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".
Last updated
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
Section Width
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.
Enable Border
Toggle to show border around 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.
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.
Button
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
The text color of the button.
Border Color
The border color of the button.
Background Color
The background color of the button.
Background Gradient
The background gradient of the button.
Hover / Active Color
The text color of the button for hover state.
Hover / Active Border Color
The border color of the button for hover state.
Hover / Active Background Color
The background color of the button for hover state.
Hover / Active Background Gradient
The background gradient of the button for hover state.
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
Determines the number of image columns per row.
Maximum Images To Show
Maximum number of images to be in viewport at a time. Minimum: 3. Maximum: 10.
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.
Desktop
Determines the spacing of the section from its top sections on Desktop.
Tablet
Determines the spacing of the section from its top sections on Tablet.
Mobile
Determines the spacing of the section from its top sections on Mobile.
Desktop
Determines the spacing of the section from its bottom sections on Desktop.
Tablet
Determines the spacing of the section from its bottom sections on Tablet.
Mobile
Determines the spacing of the section from its bottom sections on Mobile.
Enable?
Toggle to show/hide the block.
Image
Upload the 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.
