SnapWidget: import my Instagram feed on to my store


 
Your Instagram account represents your online store window and it is important to maintain your feed.
You may, if you want, add your Instagram feed directly to your store, using online tools.
For this tutorial, we have selected a service called SnapWidget, which offers a free plan.


1. Create your SnapWidget account

 

a. Click on Choose a Service:



b. Select Instagram:




c. Choose the first Grid box for the feed:




d. Click on Configure Widget:

 

2. Set up your Instagram feed on the Basic plan

Username: Log on to your Instagram account.
Description: Add a short description of your account.
Thumbnail Size: Set your grid’s size in pixels.
Layout (Columns x Rows): Set the number of photos that you wish to display (columns x lines).


☝️ The Instagram feed represents a social proof on your store, it should not have too important a place on your website. We therefore recommend that the best use to make of your feed would be to add 3 images, or 3 x 1.

 

Photo Border: Decide whether or not to add a border to your photos.
Background Color: You can add a background color to your grid. You will need to indicate the color code, the example here is #293133, which corresponds to anthracite. Go to color-code for the color codes.
Photo Padding: Select the space between each photo in pixels.
Hoover effect: Select an effect when you hover the mouse over the photos.

These are the effects you can choose from:

  • None: no effect
  • Fade in:



  • Fade out:



  • Zoom in:




  • Likes & Comments:

 

  • Caption:




Sharing buttons: Choose whether or not to display sharing buttons when you hover over the photo.
Responsive: Activate this option to integrate the feed properly whatever the device used.


3. Install your Instagram feed on your store


Click on the Get Widget button to get the install button, and copy the code that is generated.


 

A. Integrate your feed on your home page and your information pages, using WiziBlocks technology.


✋ If you use the former block system, go directly to point B.

 

  • Add an HTML block (see tutorial Wiziblocks: The code)
  • Paste the code that you have already copied, in the HTML block:

    mceclip0.png


  • Place the HTML block where you want your Instagram feed to appear on your home page, and publish.

    mceclip1.png

B. Integrate your Instagram on the former block system:

  • Add a text block on your page:

    mceclip3.png

  • Click on the Source mode:
    mceclip5.png


  • Paste your code, save the block and then your page:

    mceclip6.png


👉 Please note:

  • Your Instagram feed on your store will be updated every 15 minutes if you use the free version of the tool, and every 5 minutes if you use the paid version.
  • If you use the free version, the block containing your Instagram feed will automatically redirect to the SnapWidget website. For it to redirect to your Instagram page when a user clicks on it, you will need to subscribe to the paid version.

    For further help, please go to Snap Widget's help center.