Show a feed without using the app block
The easiest way to show a feed on your online store is to add the Instagram Studio app block to a theme section or template using Shopify's theme editor.
To check if your theme supports app blocks, you can look for a blocks directory in the theme's code, refer to your theme's documentation, or contact your theme developer.
If your theme doesn't support app blocks, then you can follow the steps below to show a feed using HTML.
On this page
The feed HTML
Use the feed HTML to show a feed anywhere in your theme:
<instagram-studio-feed></instagram-studio-feed>The basic feed HTML shows your default feed using the default display settings. To customize the feed, add attributes to the opening <instagram-studio-feed> tag.
For example, to show posts in three columns, add the data-columns attribute with a value of 3:
<instagram-studio-feed data-columns="3"></instagram-studio-feed>You can use as few or as many attributes as you need.
Attributes
The available attributes are:
source
The ID of the feed (eg 1121) to display. You can find and copy the feed ID when editing the feed in the app. You only need to enter the feed ID if you have multiple feeds and want to show a feed other than the default.
data-columns
The number of images to show in each row.
data-columns-mobile
The number of images to show in each row on smaller screens.
data-gap
The amount of horizontal and vertical space between each image.
data-horizontal-padding
The amount of space on the left and right of the feed.
data-horizontal-padding-mobile
The amount of space on the left and right of the feed on smaller screens.
data-layout
The feed layout. One of the following: grid or slider.
Grid shows all images in multiple rows and columns to create a structured, tile-like appearance.
Slider shows a limited number of images in a single row that viewers can scroll or swipe through.
data-max-width
The maximum width of the feed. If the maximum width is less than the available space, then the feed will be centered in the available space.
data-breakpoint
The maximum screen width (in pixels) where the mobile settings are used before switching to the main settings.
data-vertical-padding
The amount of space above and below the feed.
data-vertical-padding-mobile
The amount of space above and below the feed on smaller screens.
Example
This example shows all of the attributes being used at once, along with their default values:
<instagram-studio-feed
data-columns="4"
data-columns-mobile="2"
data-gap="4px"
data-horizontal-padding-mobile="0px"
data-horizontal-padding="0px"
data-layout="grid"
data-max-width="none"
data-breakpoint="750px"
data-vertical-padding-mobile="0px"
data-vertical-padding="0px"
source="1121"
></instagram-studio-feed>Add the feed HTML to a theme block
Most modern Shopify themes include a Custom HTML or Custom Liquid block that allows you to paste code directly into a section.
To add the feed HTML to a theme block:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section where you want to add the app block.
On the sidebar, click + Add block.
From the drop-down menu, select the Custom HTML or Custom Liquid block.
Click the block name to view the block's settings.
Add the feed HTML into the block's content area.
- Optional
Move the block to another location by clicking and dragging the ⋮⋮ icon.
Click Save.
Add the feed HTML to your theme code
If you want to show a feed in a specific location that your theme doesn't support using the theme editor, you can add the feed HTML directly into your theme files.
If changes that you've made to a theme's code are incompatible with a theme update, then all your code changes are removed in the updated copy. You should only edit your theme's code if you can't make the changes that you need by using the theme editor.
If you're not comfortable with editing code or working with theme files, then consider contacting your theme developer or hiring a Shopify Partner so that they can add the feed HTML for you.
To add the feed HTML to your theme code:
Go to your Shopify admin.
Navigate to Online Store > Themes.
Find your current theme, click the ... button, and select Edit code.
Open the file where you want to show the feed (e.g.,
layouts/theme.liquidorsections/main-product.liquid).Add the feed HTML at the appropriate place in the file.
Click Save.