The Instagram Studio app block
The Instagram Studio app block lets you add an Instagram feed exactly where you want to show it on your online store.
The app block can be added as a block in a template section, and as a section in a template.
You can add, remove, reposition, and customize the app block through the theme editor.
Instagram Studio does not add, change, or remove any theme code
All app functionality is provided via lightweight JavaScript and CSS files that are kept completely separate from the theme.
On this page
- Add the app block to a section
- Add the app block to a template
- Remove the app block
- Reposition the app block
- Customize the app block
- The app block settings
Add the app block to a section
Some of your theme sections might not support app blocks. To identify which of your theme sections support app blocks, refer to your theme's documentation or contact your theme developer.
If your theme sections don't support app blocks, you can show a feed without using the app block.
To add the app block to a section:
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, in the Apps section, select the Instagram Feed app block.
- Optional
Move the block to another location by clicking and dragging the ⋮⋮ icon.
- Optional
View and customize the settings for the app block by clicking the block name.
Click Save.
Add the app block to a template
Some of your theme templates might not support sections. To identify which of your theme templates support sections, refer to your theme's documentation or contact your theme developer.
If your theme templates don't support app blocks, you can show a feed without using the app block.
To add the app block to a template:
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 section.
From the drop-down menu, in the Apps section, select the Instagram Feed app block.
- Optional
Move the block to another location by clicking and dragging the ⋮⋮ icon.
- Optional
View and customize the settings for the app block by clicking the block name.
Click Save.
Remove the app block
To remove the app 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 that contains the block that you want to remove.
On the sidebar, click the Instagram Feed app block.
Click the button beside the block name at the top of the sidebar.
To hide the app block, click Hide.
To remove the app block, click Remove.
Click Save.
Reposition the app block
To reposition the app 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 that contains the block that you want to reposition.
Click and drag the ⋮⋮ icon next to the Instagram Feed app block name to move the block to another location.
Click Save.
Customize the app block
To customize the app 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 that contains the block that you want to customize.
Click the Instagram Feed app block name to view and customize the settings for the app block.
Click Save.
The app block settings
The app block settings affect the way that the app block functions on your online store. They are completely separate from the app settings, and they are unique to the block, so you can have multiple blocks on the page that function differently from each other.
Layout
You can select from the following options for the feed layout:
- Grid — Show all images in multiple rows and columns to create a structured, tile-like appearance.
- Slider — Show a limited number of images in a single row that viewers can scroll or swipe through.
Columns
The number of images to show in each row.
Space between images
The amount of horizontal and vertical space between each image in pixels.
Vertical space
The amount of space above and below the feed in pixels.
Horizontal space
The amount of space on the left and right of the feed in pixels.
Maximum width
The maximum width of the feed in pixels. If the maximum width is less than the available space, then the feed will be centered in the available space.
Mobile
The mobile settings affect the way that the feed is displayed on smaller screens.
Columns
The number of images to show in each row.
Vertical space
The amount of space above and below the feed in pixels.
Horizontal space
The amount of space on the left and right of the feed in pixels.
Breakpoint
The maximum screen width (in pixels) where the mobile settings are used before switching to the main settings.
Source
Feed ID
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.
Advanced
Custom JavaScript
You can enter custom JavaScript code to change the app behaviour.