After connecting your Instagram account, creating your Media Source and Gallery, you need to create a Widget to display the Instagram feed on your store.

In this article:

A. Create a Widget
B. Widget Settings
Choose gallery
Customize widget
Install widget
C. Preview/Edit/Pause/Duplicate/Delete a widget

Create a Widget

There are two ways to create a Widget.

1. Create a Widget from a Gallery

In Gallery tab, click on the icon (...) on the right-hand side > Click Create widget > You will be redirected to the Widget Settings page

2. Create a Widget from scratch

Click on the third icon on the Menu > Click on Add new

Widget Settings

You need to go through three steps to complete the setup, which are Choosing gallery, Customizing widget and Installing widget

1. Choose gallery

You need to name your widget, choose the gallery for the widget and choose the template. We have multiple templates to suit your needs, so feel free to pick one that looks best on your website and mobile.

2. Customize widget

With this step, you can fully customize your widget, including the layout, heading, item and popup.

Layout settings

Here you can edit the padding, border and margin of the whole widget.

Notably, our app enables you to choose the max-width of the widget to be equal to the elements above it. This way, the widget is automatically consistent with other elements in your website without having to adjust manually.

Moreover, now you can set a background image for the widget. Simply click on Choose image in Background section and upload your own image.

Heading settings

Here is the place where you can enable and edit the content for your widget's title and description.

To change the content and the format of these two fields, double click on them and type your own content in the preview.

Note: The font of these fields is automatically matched with the main font of your theme. We are also working on the feature that lets you choose your own font, so stay tuned!

Item settings

If you choose Enable hover effect, customers are able to see other information (caption, likes, comments, date of post) when hovering on a picture. Besides, you can also adjust the background (color, opacity) and the content (color, font, etc.).

Please note that this feature is only available for desktop, so customers are not able to see anything when hovering on your widget on mobile.

Instagram's API restricts the app from counting the likes of comments of a Personal account. Therefore, if you want your likes and comments to be shown, please switch the account type to Business.

Popup settings

This is a feature for you to set up how and where your customers will be led to when they click on an image. Besides setting the image's information, you can also choose how to display the tagged products (vertical or horizontal) and the CTA button.

CTA button will help you convert your visitors to buyers.

Check-out button: this will turn your visitors directly to the Checkout page in one click.

Add-to-cart button: this will help your customers add products to the shopping cart directly on widget feed and checkout later by clicking on the button.

Tip: You are able to change the content for Check-out/ Add-to-cart button as you want.

Especially, the content of Follow button can be changed by double clicking on preview board.

3. Install widget

The Auto install option lets you choose an existing page and the position (top, bottom or custom position). If you want to custom the position, simply click on Custom > Select Element. Then, you will be directed to another window to decide the position of the widget by clicking Insert Here.

If you want to install the widget by yourself manually, choose the option Manual install by widget code. You can copy and paste the code into your Shopify theme template to embed the widget anywhere in your store.

Click Save and your widget is created successfully!

Here is how the widget looks on your site. You can visit our sample store to see how a widget for your category will look!

Note: You can create multiple widgets on the same page. There is no limit on how many widgets, so feel free to experiment and custom them to match your site.

Preview/Edit/Pause/Duplicate/Delete a widget

In the Widget tab, click on the (...) icon to see the option to preview/edit/duplicate/delete a widget.

Was this article helpful?
Thank you!