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
| Settings | Meaning |
|---|---|
Layout | Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width). |
Choose Instagram Type: | Select the code that renders image blocks. Two options are: Use Image Gallery (setup) and Use App Code (External script). |
Layout | Select the display layout of the blocks to be either Grid or Slider. |
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile | Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately. |
Enable Border | Toggle to show border around the section. |
Border Color | Set color for the section border. |
Background Color | Set color for the background of the section. |
Background Gradient | Set color gradient for the background for the section. |
Background Image | Select/Upload image as the section background. |
Title | Enter text for the section title. |
Enable 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 Margin Bottom | Determine the spacing of the title from the bottom. |
Title Font Size | Determine the font size of the title. |
Title Font Size 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 Spacing Bottom | Determine the spacing bottom of the section description. |
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, Bolder or Black. |
View All Margin Bottom | Determine the spacing of the view all button from the bottom. |
Enable 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 Color | Set color for the view all button text. |
Display Button? | Toggle to show button at the section bottom or not. |
Button Text | Enter text for the button. |
Type Button | Select the behavior of the button when clicked. The options are: Load more Block item and Redirect To URL. |
Button Link | Specify URL for the Button Link. |
Enable Button Underline? | Toggle to show button underline/border. |
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient | Set colors for the button text, background and border for both normal and hovered/clicked states. |
Button Width | Determine the width of the button. |
Button Spacing Top | Determine the spacing of the button from the top content. |
Embed Javascript Code | If the Use App Code option is selected, please insert the code to render instagram. |
When Click 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. |
Item Per Row | Decide the column count per row. |
Maximum Brands To Show | Determine the maximum number of brands to be in viewport at a time. |
Grid Gap | Specify the gap between blocks. |
Hide A Portion Of The Block's Sides | Toggle to show a portion of the image blocks' sides. |
Slider Instagram | Choose the slider mode. The two styles are Center Mode and Default. |
Display Arrow? | Toggle to show arrows on slider. |
Icon | Enter the SVG icon for the load more button. |
Effects Hover Image: Background Color | Set color for the image background when hovered. |
Effects Hover Image: Opacity Background | Determine the transparency of the background when hovered. |
[BLOCK] Instagram
| Settings | Meaning |
|---|---|
Enable? | Toggle to show/hide the block. |
Image | Upload/Select image for the block. |
Link | Insert the link for the image to redirect to if the When Click On Image is set to Redirect To URL. |
Last updated
