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".
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.
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.
