Skip to main content
All CollectionsInstalling SnapWidget on your website
How do I add an Instagram widget to Shopify?
How do I add an Instagram widget to Shopify?

Find out how you can add SnapWidget to your Shopify store 💡

Herman Schutte avatar
Written by Herman Schutte
Updated over 2 years ago

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

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

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

To setup your widget for Shoppable, see https://snapwidget.help/creating-a-new-widget/pro-widget-advanced-settings/how-do-i-make-my-photos-shoppable

Please Note - In Shopify, Custom HTML is added by means of a Custom content section containing a Custom HTML block. By default the justification setting for any content inside the Custom content section is left-justified. This means your widget will also be displayed left-justified on the page. If this is how you want it, skip the next steps.

If you want to center justify your widget you will have to add some CSS code to your snippet. This can also be done by modifying the theme.css file (under Assets) using the Code editor. We prefer adding the code to the snippet, thus not making any changes to the Shopify base files.

Add the following CSS code (marked in yellow) to your snippet (Grid or SlideShow widget), just below the first line.

A. Edit the Shopify Template

  1. Log in to Shopify and go to your Admin page.

  2. Select Online Store > Themes.

  3. This will display a small preview of your online store as well as the theme used. For this tutorial we are using the Debut theme; other theme setups are similar.

  4. Select Customize to customize your online store (on the far right of the screen).

  5. In the theme editor, select Add section to add a new section where we can place the code snippet.

  6. Choose Custom Content to add the new section.

  7. Modify the Custom Content heading as required (for this part we are inserting the Grid Widget, so we have called it “Grid Widget”, in the next part we will call it “SlideShow Widget”).

  8. In the Custom content editor, choose Add block and then select the Custom HTML option.

  9. Paste the entire code snippet into the HTML section (on the right sidebar), remember to add the extra CSS code for justification purposes.

  10. Set the Custom HTML Container width for the widget as required – suggested width to use is at least 75% or 100%. You can use a combination of the widget width and the Custom HTML width. Just remember if you make it too small you won’t be able to click on it to display it in a Lightbox and your Social media buttons won’t be clickable.

  11. You can also check to see how your widget will display on a mobile device by selecting the monitor icon.

  12. You can re-order the position where you want the widget to be displayed (within the Custom Content section). To do this, go back to the editor and drag the Section into position.

  13. Click on Save to update your Shopify store page.

  14. Your widget will now be displayed as follows on your page.

  15. Clicking on any of the images in the grid will display it in a Lightbox display.

  16. The above was for inserting your Grid Widget. Adding your SlideShow Widget is basically the same, there are just a few subtle differences.

2. SlideShow Widget

  1. If you added your responsive Slideshow snippet to your page it will be displayed as follows on your webpage.

  2. The width of the responsive Slideshow widget as well as the justification cannot be changed. If this is what you wanted then you should skip the next part.

  3. To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.

  4. Create a non-responsive widget on your SnapWidget dashboard. The width and height are not important, you can set them to 200px each.

  5. We are now going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:

    This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.

  6. The standard non-responsive widget snippet contains the following:

  7. Make the following changes to this snippet.

    • Add 2 <div> blocks with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).

    <div id=”Wrapper” style=”width: 45%; margin: 0 auto;”>.

    • This sets the wrapper to 45% of available width and center-justified. With this width setting we can change the width of the widget to any width we require.

    Please Note - As with the Grid display, if you make the width too small, you will have difficulty to click on the item to display it in a lightbox. Your Social Media buttons will also not be displayed properly. For Shopify using this setting for the Slideshow display the minimum width is 45%.

    <div id="container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;">

    • This sets the area used to display the iframe to 100% of the wrapper width as well as height = 100% of the width.

    • Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes (left:0; width:100%; height:100%; position:absolute;)

  8. This will then display the widget as follows:

  9. Clicking on any of the images in the grid will display it in a Lightbox display.

  10. The widget is also responsive.

Did this answer your question?