Edit Config

Under the account section is the configuration for the feed. There is an Edit section and a Preview section for both desktop and mobile displays. The preview will change upon your settings.

1. Select Feed

If your store has multiple feeds and you want to choose a specific one to display to your customers, find the "Select Feed" dropdown on the dashboard. From the dropdown menu, select the desired feed ID.

To manage your feeds, click the "Manage Feeds" button located next to the feed ID list.

Note: This feature is only visible when your account has more than 2 feeds and is only accessible on the Instagram Feed page.

Feed Name

This configuration field is required. Please provide a name to identify this feed. This will help you easily distinguish between different feeds. 

Simply enter a name in the provided text field.

2. Header

2.1. Default Title

Enter the title for the feed or leave it blank to hide the title.

3.1. On post click

Here you can choose the action for when customers click on a certain post.

• Show post details: A popup will show up with the media, account name, caption, and the published date. Customers can click the arrow to see the next posts. They can also click the account name or the See on Instagram text to be redirected to your Instagram account page, or the media to be redirected to that post on Instagram.
• Show media only: A popup will show up with the media only. Customers can click the arrow to see the next posts, or click on the media to be redirected to that post on your Instagram page.
• Redirect to Instagram: Visitors will be redirected to that post on your Instagram account page.
• Do nothing: No action happens upon clicking.

View the results by clicking on the post in the preview section.

3.2. Max number of posts

Choose the maximum number of posts to be displayed on the feed. The minimum value is 1 and the maximum is 25 (Shopify’s limit).

Note:

• If your account has more posts than the chosen value, this app will show the latest posts until the limit is reached.
• If your post has more than 1 image/video: By default, our app will only display the first one. Or contact us if you want to show all.

3.3. Layout

This Instagram Feed app supports 3 layouts for you to choose from: Grid, Slider and, Highlight.

Grid: The feed will be displayed in a grid layout. We’ve set the default number of posts per row for both desktop and mobile. If you want to change it, please contact us.

Slider: The feed will be displayed in a slider/carousel layout. Here, you can:

• Choose to enable Auto-play mode or not.
• Set the auto-play time to the next post at Change slide every (second). The maximum value is 10 (or contact us to change the max value).
• Customers also can click the arrow to switch to the next post.
• Row: Choose the number of rows displayed in the slider, the maximum is 2 rows.

Highlight: The feed will have 1 post in highlight and other posts in 2 rows. We’ve set the default number of posts per row for both desktop and mobile. If you want to change it, please contact us.

3.4. Responsive Layout

This function determines the responsiveness of the layout in your storefront.

If you select "Auto":

• The layout will automatically adjust to different devices.
• For example, desktop will display 5 columns, tablets will display 4 or 3, and mobile will display 2.

If you select "Manual":

• The number of columns displayed in a single row will be based on the value you set in the "Columns" configuration.

3.5. Show like counts

Enable this to show the number of Instagram likes when hovering over the media. 

3.6. Show comment counts

Enable this to show the number of Instagram comments when hovering over the media. 

4. Media Styling

4.1. Format

Format: Choose the post display format: 1:1 (square) or 9:16 (vertical).

4.2. Rounded corners

Set the degree of rounded corners for the posts. The default value is 5%.

4.3. Hover effect

You can define hover effects on media. There're 3 options:

• None: Only has a blur overlay
• Zoom In: When hovering the media, there will be a blur overlay and the image will be zoom in.
• Zoom out: When hovering the media, there will be a blur overlay and the image will be zoom out.

The default value will be "None".

4.4. Videos autoplay

When you enable “Yes” in this setting, your video media will automatically play in a no-control, muted, and loop mode. 

5. Desktop 

5.1. Border 

This option allows you to enable/disable the border of your feed on mobiles. The default value is "Yes"

5.2. Post Spacing 

This option lets you adjust the spacing between images on desktop and tablet screens. You can set the spacing in pixels, with values ranging from 0 to 20.

6. Mobile

6.1. Border

This option allows you to enable/disable the border of your feed on mobiles. The default value is "Yes"

6.2. Post Spacing 

This option lets you adjust the spacing between images on mobiles. You can set the spacing in pixels, with values ranging from 0 to 12.

7. Mobile (Button load more)

The Button load more setting will only be applicable when you use the Grid layout on the mobile version. 

7.1. Content

You can enter the desired text to show on the button in the Content setting box.

7.2. Text color

Choose the color of the text displayed on the button here.

7.3. Background color

You can change the background color of the button in this setting. 

8. Preview Tab

This tab displays a preview of your layout on desktop and mobile devices. The mobile preview is particularly helpful as it shows how your layout will appear within a mobile device frame, providing a more realistic view.