Adding your Instagram, Facebook or Twitter widget to your Shopify online store is easy. Follow these steps to create your widget.

Pro Tip: SnapWidget Shoppable widgets work great with Shopify online stores and allow you to sell your items using your Instagram photos.

Once you've created your widget, follow the appropriate steps below to add it to your website.

Edit the Shopify Template

This procedure differs from template to template, e.g. Debut (default template), Brooklyn, Venture, Minimal, etc.

  • Log in to Shopify and go to your Admin page.
  • Select Online Store > Themes. This will display actual theme currently used, e.g. Debut, Brooklyn, Venture, Minimal, etc. We will start with the Debut theme, other theme setups can be found at the bottom of this article.
  • Select Customize theme (on the far right of the screen)

Depending on your theme, there are two ways of adding the widget to Shopify, i.e.

  • Via Sections (newer themes supporting Sections) or
  • Via Edit code - editing the appropriate liquid file (older themes not supporting Sections)

Via View Sections

Newer themes supporting sections

  • In the theme editor, select Add section (under the Sections tab) to add a new section where we can place the code snippet.
  • Choose Custom Content to add the new section
  • In the Custom content editor, choose Add content and select the Custom HTML option. 
  • Paste the entire code snippet into the HTML section
  • Set the Container width for the widget as required – suggested width to use is at least 75% or 100%.
  • Configure the Heading and other content you'd like to change and click Save to update your website.
  • You can re-order the position where you want the widget to be displayed. To do this, go back to the editor and drag the Section into position and click on Save to save the new layout.

Your widget will now be displayed on your Shopify store.

Via Edit code

If your theme does not support Sections (older themes) or if you want to add the snippet directly to your code:

Note: Procedure differs for different themes. We will start with the Debut theme, other theme setups can be found at the bottom of this article.

  • In the theme editor, click on the theme name and select the Edit code option on the More Actions dropdown.
  • To include the snippet and have it displayed as custom HTML on your Main page, choose Layout and select the theme.liquid file. 
  • Paste your snippet just before the Footer section.

Please note: With this default snippet insert, the widget will be displayed just under your slideshow with little or no space between them. 

To modify this do the following:

  • Insert a <hr>  tag before the <div>  tag. This will separate the Slideshow and your widget. 

The width of your widget displayed depends on the width you have chosen when you created the widget on your SnapWidget dashboard. If necessary you can change it here or go back to your SnapWidget dashboard and do the mods there. If you do it here it will only be applicable to this one instance, if you do it via your SnapWidget dashboard it will be applicable wherever you use your widget.

<hr>
<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />
<script src="https://snapwidget.com/js/snapwidget-lightbox.js"></script>
<iframe src="https://snapwidget.com/embed/344855" class="snapwidget-widget" allowTransparency="true"
frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>


To horizontally center the widget on the page you will have to encapsulate the widget in a <div></div> area. To do this include a <div> with a text-align: center style just after the newly included <hr> tag and close the <div> area with a </div> tag after the </iframe> tag. If you would like to include a header for your widget you can include a header just after the <div style=”text-align:center”> tag, e.g. <h1>Our Products</h1>. Depending on the size of header you want you can use <h1>, <h2> or <h3>

<hr>
<div style="text-align: center;">
<h1>Our Products</h1><br/>
<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />
<script src="https://snapwidget.com/js/snapwidget-lightbox.js"></script>
<iframe src="https://snapwidget.com/embed/344855" class="snapwidget-widget" allowTransparency="true"
frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
</div>


Example of an inserted snippet with the <hr> tag, header, widget width set to 75% and the widget encapsulated in a <div> area.

This will result in the following:

  • Click Save (upper right-hand corner) to update your website.

Your widget will now be displayed on your Shopify store.

Other Themes

Theme Brooklyn

Via Sections:

  • Select Online Store > Themes.
  • Select Customize theme (on the far right of the screen)
  • Select Add section > Custom HTML (under ADVANCED LAYOUT
  • Click on Add
  • Replace the contents of the HTML area with your SnapWidget snippet.
  • Click on Save


Via Edit Code:

  • In the theme editor, click on the theme name and select the Edit code option on the More Actions dropdown.
  • To include the snippet and have it displayed as custom HTML on your Main page, choose Layout and select the theme.liquid file. 
  • Paste your snippet just after the <main class="main-content" role="main"> section.

Similar to the Debut theme you can insert the snippet with a <hr> tag, header, widget width set to 75% or 100% and the widget encapsulated in a <div> area.

  • Click Save (upper right-hand corner) to update your website.

Your Shoppable widget will now be displayed on your Shopify store.

Theme Venture

Via Sections:

Follow the steps outlined above for Theme Brooklyn


Via Edit Code:

  • In the theme editor, click on the theme name and select the Edit code option on the More Actions dropdown.
  • To include the snippet and have it displayed as custom HTML on your Main page, choose Layout and select the theme.liquid file.
  • Paste your snippet just after the {{ content_for_layout }} section just before the {% section 'footer' %} section.

Similar to the Debut theme you can insert the snippet with a <hr> tag, header, widget width set to 75% or 100% and the widget encapsulated in a <div> area.

  • Click Save (upper right-hand corner) to update your website.

Your widget will now be displayed on your Shopify store.

Theme Minimal

Via Sections:

Follow the steps outlined above for Theme Brooklyn


Via Edit Code:

  • In the theme editor, click on the theme name and select the Edit code option on the More Actions dropdown.
  • To include the snippet and have it displayed as custom HTML on your Main page, choose Layout and select the theme.liquid file. 
  • Paste your snippet just before the {% section 'footer' %} section.

Similar to the Debut theme you can insert the snippet with a <hr> tag, header, widget width set to 75% or 100% and the widget encapsulated in a <div> area.

  • Click Save (upper right-hand corner) to update your website.

Your widget will now be displayed on your Shopify store.

Did this answer your question?