Last updated
Last updated
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".
| Settings | Meaning |
|---|---|
Section Width | Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) 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. |
Title | Enter text for the section 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. |
'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. |
'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. |
| Settings | Meaning |
|---|---|
Embed app code | If the Use App Code option is selected, please insert the code to render instagram. |
| Settings | Meaning |
|---|---|
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. |
| Settings | Meaning |
|---|---|
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). |
| Settings | Meaning |
|---|---|
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). |
| Settings | Meaning |
|---|---|
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. |
