# Instagram

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FDdQIigtAGUt2JKsYCEqw%2Finstagram.jpg?alt=media&#x26;token=062dc9a9-56cf-4ae7-8ad5-61e3fd504f13" alt=""><figcaption></figcaption></figure>

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Instagram**".

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FIx7Zt8ak88QfDSjqctst%2Finstagram.gif?alt=media&#x26;token=5762640c-7d66-4856-8b89-b3f2489446cf" alt=""><figcaption></figcaption></figure>

### General

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

### \[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. |
