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.

Select Feed

If your store has multiple feeds and you want to choose a specific one to display to your customers, go to Manage feeds and select the desired feed ID to customize.  

1. 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.
• No action: 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 edit the settings under Slider layout settings config group:

• 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. Popup Detail Style

The Popup detail style config allows users to choose how media details are displayed when a post is clicked with 2 options:

• External media info: Display media and post details side by side. 
• Internal media info: Overlay post details directly on the media.

Note: The config Popup detail style is only available when config On post click is Show post details.

External media info	Internal media info

4. Media Styling

4.1. Format

Format: Choose the post display format: 1:1, 9:16, 4:5, 3:4, 4:3.

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. Display post engagement

5.1. Show like counts

Enable this to show the number of Instagram likes when hovering over the media and on the popup when clicking on the post.

5.2. Show comment counts

Enable this to show the number of Instagram comments when hovering over the media and on the popup when clicking on the post.

6. Desktop 

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 desktop and tablet screens. You can set the spacing in pixels, with values ranging from 0 to 20.

6.3. Feed padding

You can adjust Top/Bottom padding and Left/Right padding for the feed on desktop.

7. Mobile

7.1. Border

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

7.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.3. Feed padding

You can adjust Top/Bottom padding and Left/Right padding for the feed on mobile.

8. Mobile (Button load more)

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

8.1. Content

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

8.2. Text color

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

8.3. Background color

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

9. Footer

The Footer config group allows you to add a CTA button, engaging customers to visit your Instagram page. 

9.1. Show Instagram button

Enable Yes option to display Instagram button below the feed. After that, you can customize other elements of the button. 

9.2. Button visit Instagram

At this config group, you can customize:

• Content: Enter the text displayed on the button.
• Text color: Define the button’s text color.
• Background color: Set the button’s background color.
• Text hover color: Specify the text color when hovered.
• Background hover color: Change the background color on hover.

10. Eurus highlight layout settings

Note: The Eurus highlight layout settings config group is only for Highlight layout. When you choose Highlight layout, the config group will appear.

Check Yes in the Show highlight button setting to display Eurus Highlight layout. 

10.1. Title on highlighted media

Under the config group, you can customize:

• Title: Enter the text displayed on the highlight image. The default is Follow Us.
• Title color: Choose the color for the title text.

10.2. Button on highlighted media

Under the config group, you can customize:

• Content: Enter the text that will appear on the button. The default is Follow Us.
• Button link: Enter the link you want to redirect users to (example: your Instagram link).
• Button style: Choose the style of the button: Normal or Textlink.

10.3. Settings button style

Under the config group, you can customize:

• Text color: Choose the color of the text displayed on the button. 
• Background color: Choose the background color of the button. 
• Text hover color: Choose the color of the text displayed on the button when hovered over.
• Background hover color: Choose the background color of the button when hovered over.

11. 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.