To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Instagram".
Section settings
General
Section Width
Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1470px) Width (1770px) Full width (100% of the viewport width).
Padding for 'full width' option on desktop
Determines the left and right spacing of the Full width layout.
Remove content right padding
Toggle to remove content right padding. Note: Use for full width layout.
Instagram type
Select the code that renders image blocks. Two options are: Use app code Use image gallery
Layout
Select the display layout of the blocks. There are 4 options: Grid Slider Scroll Infinite scroll Note: When selecting the 'infinite scroll' option, the section container will automatically be full width and have no padding.
Scroll from
Determine the direction of movement of items. There are 2 optioions: Left to right Right to left Note: This setting only works with the 'infinite scroll' option of the layout setting above.
Scroll speed
Adjust the time to run all items in the Instagram section. There are the following options: 5/10/15/20/25/30/35/40/45/50 seconds Note: This setting only works with the 'infinite scroll' option of the layout setting above.
Show top border
Toggle to show the top border of the section.
Border color
The border color of the section.
Background color
The background color of the section.
Background gradient
The background gradient of the section.
Background image
Upload image as the section background.
Section header
Style
Determine the style of the section header.
Bottom margin
Determine the spacing bottom of the title.
Title
Enter text for the section title.
Title font weight
Select the font weight of the title.
Show title border
Toggle the title underline/border.
Title border color
Apply color onto the title underline/border.
Title color
Set color for the title.
Title bottom margin
Determine the spacing of the title from the bottom.
Title font size
Determine the font size of the title.
Title font size on mobile
Determine the font size of the title on mobile device.
Description
Enter text for the section description.
Description color
Set color for the description text.
Description font size
Determine the font size for the description text.
Description bottom margin
Determine the spacing bottom of the section description.
Maximum content width
Set the maximum width of the content.
Alignment
Select the alignment of the content to be either to the Left, Right or Center of the section.
View all
Enter the text for the view all button.
SVG icon
Enter the SVG icon for the view all button.
Note: Go to this link find your icon. Find the icon you want, then copy the SVG code and paste it here.
'View all' font size
Specify the font size for the view all button text.
'View all' alignment
Select the alignment of the view all button to be either Left, Right or Center.
Alignment (top/center/bottom)
Select the position of the view all button.
'View all' font weight
Select the font weight of the view all button text to be either Normal, Medium, Semi Bold, Bold, Extra bold or Black.
'View all' bottom margin
Determine the spacing of the view all button from the bottom.
Show 'view all' border
Toggle to turn on the view all button/link underline/border.
'View all' link
Specify the link for the view all button to redirect to.
'View all' link color
Set color for the view all button text.
Show view more button
Toggle to show 'view more' button at the section bottom or not.
Button type
Select the button type. There are 2 options:
Load more button
Link Note: The ‘Load more button’ option does not apply when the ‘infinite scroll’ layout is selected.
Button label
Enter text for the button.
Button link
Specify URL for the Button Link. Note: Applies when the 'Button type' setting is set to link.
Show button underline
Toggle to show button underline/border.
Button label color
The text color of the button.
Button border color
The border color of the button.
Button background color
The background color of the button.
Button background gradient
The background gradient of the button.
Button label hover color
The text color of the button for hover state.
Button border hover color
The border color of the button for hover state.
Button background hover color
The background color of the button for hover state.
Button background hover gradient
The background gradient of the button for hover state.
Button width
Determine the width of the button.
Button top margin
Determine the spacing of the button from the top content.
App Code
Embed app code
If the Use App Code option is selected, please insert the code to render instagram.
Block items
Action when clicking on image
Decide the behavior when a block image is clicked on. It can either redirect to a URL or open the Fancybox for clearer view of the image.
Items per row
Determines the number of image columns per row.
Maximum items to show
Maximum number of images to be in viewport at a time. Minimum: 3. Maximum: 10.
Grid gap
Specify the gap between blocks.
Slider mode
Choose the slider mode. The two styles are Center and Default. Note: Only applicable for slider layout.
Make the slider overflow the section container
Toggle to slider can be displayed outside of the section container. Note: Only applicable for slider layout.
Show navigation arrows
Toggle to navigation arrows. Note: Only applicable for slider layout.
Show navigation arrows on hover
Toggle to navigation arrows when hovering. Note: Only applicable for slider layout.
Show navigation dots
Toggle to navigation dots. Note: Only applicable for slider layout.
Icon on image when hovering
Enter the SVG icon that will be displayed when hovering over the image.
Icon position
Select the location where the icon will be displayed. There are 3 options: Mid center Bottom Left Bottom Right
Background gradient
Set color for the image background when hovered.
Background opacity
Determine the transparency of the background when hovered.
Section top padding
Desktop
Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Spacing Bottom
Desktop
Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Block Settings
[BLOCK] Instagram
Image
Select/Upload an image for the block item.
Title
Enter the title for the block item.
Title font size
Determine the font size of the title.
Title font size on mobile
Determine the font size of the title on the mobile.
Title color
Set the color for the block title.
Description
Enter the description text for the block item.
Description font size
Determine the font size of the description text.
Description color
Set color for the description text.
Button label
Enter the text for the button.
Button label color
Set the color for the button text
Button label hover color
Set the color for the button text when hovering.
Button link
Specify the link to which the button will redirect.
[BLOCK] Tying text
Text 1
Enter the text for block. Example: This, is , an example.
Text 2
Enter the text for block. Example: This, is , an example.
Title font size
Determine the font size of the text.
Title font size on mobile
Determine the font size of the text on the mobile.
Title color
Set the color for the text.
Background color
Set the background color for the text block.
Last updated