# Instagram

<figure><img src="/files/I2kKw6lrIlTCXlhEdEo6" 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**".

## Section settings

### General

<table><thead><tr><th width="303">Settings</th><th width="567">Meaning</th></tr></thead><tbody><tr><td>Section Width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1470px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determines the left and right spacing of the Full width layout.</td></tr><tr><td>Remove content right padding</td><td>Toggle to remove content right padding.<br><br><em><mark style="color:orange;">Note: Use for full width layout.</mark></em></td></tr><tr><td>Instagram type</td><td>Select the code that renders image blocks. Two options are: <br><br><mark style="color:orange;"><strong>Use app code</strong></mark><br><mark style="color:orange;"><strong>Use image gallery</strong></mark></td></tr><tr><td>Layout</td><td>Select the display layout of the blocks. There are 4 options:<br><br><mark style="color:orange;"><strong>Grid</strong></mark><br><mark style="color:orange;"><strong>Slider</strong></mark><br><mark style="color:orange;"><strong>Scroll</strong></mark><br><mark style="color:orange;"><strong>Infinite scroll</strong></mark><br><br><em><mark style="color:orange;">Note: When selecting the 'infinite scroll' option, the section container will automatically be full width and have no padding.</mark></em></td></tr><tr><td>Scroll from</td><td>Determine the direction of movement of items. There are 2 optioions:<br><br><mark style="color:orange;"><strong>Left to right</strong></mark><br><mark style="color:orange;"><strong>Right to left</strong></mark><br><br><em><mark style="color:orange;">Note: This setting only works with the 'infinite scroll' option of the layout setting above.</mark></em></td></tr><tr><td>Scroll speed</td><td>Adjust the time to run all items in the Instagram section. There are the following options:<br><br><mark style="color:orange;"><strong>5/10/15/20/25/30/35/40/45/50 seconds</strong></mark><br><br><em><mark style="color:orange;">Note: This setting only works with the 'infinite scroll' option of the layout setting above.</mark></em></td></tr><tr><td>Show top border</td><td>Toggle to show the top border of the section.</td></tr><tr><td>Border color</td><td>The border color of the section.</td></tr><tr><td>Background color</td><td>The background color of the section.</td></tr><tr><td>Background gradient</td><td>The background gradient of the section.</td></tr><tr><td>Background image</td><td>Upload image as the section background.</td></tr><tr><td><strong>Section header</strong></td><td></td></tr><tr><td>Style</td><td>Determine the style of the section header.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing bottom of the title.</td></tr><tr><td>Title</td><td>Enter text for the section title.</td></tr><tr><td>Title font weight</td><td>Select the font weight of the title.</td></tr><tr><td>Show 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 bottom margin</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 on 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 bottom margin</td><td>Determine the spacing bottom of the section description.</td></tr><tr><td>Maximum content width</td><td>Set the maximum width of the content.</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>SVG icon</td><td><p>Enter the SVG icon for the view all button. </p><p></p><p><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></p></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>Alignment (top/center/bottom)</td><td>Select the position of the view all button.</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, Extra bold or Black.</td></tr><tr><td>'View all' bottom margin</td><td>Determine the spacing of the view all button from the bottom.</td></tr><tr><td>Show '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' link color</td><td>Set color for the view all button text.</td></tr><tr><td>Show view more button</td><td>Toggle to show 'view more' button at the section bottom or not.</td></tr><tr><td>Button type</td><td><p>Select the button type. There are 2 options:</p><p></p><p><mark style="color:orange;"><strong>Load more button</strong></mark></p><p><mark style="color:orange;"><strong>Link</strong></mark><br><br><em><mark style="color:orange;">Note: The ‘Load more button’ option does not apply when the ‘infinite scroll’ layout is selected.</mark></em></p></td></tr><tr><td>Button label</td><td>Enter text for the button.</td></tr><tr><td>Button link</td><td>Specify URL for the Button Link.<br><br><em><mark style="color:orange;">Note: Applies when the 'Button type' setting is set to link.</mark></em></td></tr><tr><td>Show button underline</td><td>Toggle to show button underline/border.</td></tr><tr><td>Button label color</td><td>The text color of the button.</td></tr><tr><td>Button border color</td><td>The border color of the button.</td></tr><tr><td>Button background color</td><td>The background color of the button.</td></tr><tr><td>Button background gradient</td><td>The background gradient of the button.</td></tr><tr><td>Button label hover color</td><td>The text color of the button for hover state.</td></tr><tr><td>Button border hover color</td><td>The border color of the button for hover state.</td></tr><tr><td>Button background hover color</td><td>The background color of the button for hover state.</td></tr><tr><td>Button background hover gradient</td><td>The background gradient of the button for hover state.</td></tr><tr><td>Button width</td><td>Determine the width of the button.</td></tr><tr><td>Button top margin</td><td>Determine the spacing of the button from the top content.</td></tr></tbody></table>

### App Code

<table><thead><tr><th width="305">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Embed app code</td><td>If the Use App Code option is selected, please insert the code to render instagram.</td></tr></tbody></table>

### Block items

<table><thead><tr><th width="295">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Action when clicking 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>Items per row</td><td>Determines the number of image columns per row.</td></tr><tr><td>Maximum items to show</td><td>Maximum number of images to be in viewport at a time. Minimum: 3. Maximum: 10.</td></tr><tr><td>Grid gap</td><td>Specify the gap between blocks.</td></tr><tr><td>Slider mode</td><td>Choose the slider mode. The two styles are Center and Default.<br><br><em><mark style="color:orange;">Note: Only applicable for slider layout.</mark></em></td></tr><tr><td>Make the slider overflow the section container</td><td>Toggle to slider can be displayed outside of the section container.<br><br><em><mark style="color:orange;">Note: Only applicable for slider layout.</mark></em></td></tr><tr><td>Show navigation arrows</td><td>Toggle to navigation arrows.<br><br><em><mark style="color:orange;">Note: Only applicable for slider layout.</mark></em></td></tr><tr><td>Show navigation arrows on hover</td><td>Toggle to navigation arrows when hovering.<br><br><em><mark style="color:orange;">Note: Only applicable for slider layout.</mark></em></td></tr><tr><td>Show navigation dots</td><td>Toggle to navigation dots.<br><br><em><mark style="color:orange;">Note: Only applicable for slider layout.</mark></em></td></tr><tr><td>Icon on image when hovering</td><td>Enter the SVG icon that will be displayed when hovering over the image.</td></tr><tr><td>Icon position</td><td>Select the location where the icon will be displayed. There are 3 options:<br><br>Mid center<br>Bottom Left<br>Bottom Right</td></tr><tr><td>Background gradient</td><td>Set color for the image background when hovered.</td></tr><tr><td>Background opacity</td><td>Determine the transparency of the background when hovered.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="294">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>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).</td></tr><tr><td>Tablet</td><td>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).</td></tr><tr><td>Mobile</td><td>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).</td></tr></tbody></table>

### Spacing Bottom <a href="#spacing-bottom" id="spacing-bottom"></a>

<table><thead><tr><th width="292">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>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).</td></tr><tr><td>Tablet</td><td>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).</td></tr><tr><td>Mobile</td><td>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).</td></tr></tbody></table>

## Block Settings

### \[BLOCK] Instagram

<table><thead><tr><th width="289">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Image</td><td>Select/Upload an image for the block item.</td></tr><tr><td>Title</td><td>Enter the title for the block item.</td></tr><tr><td>Title font size</td><td>Determine the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on the mobile.</td></tr><tr><td>Title color</td><td>Set the color for the block title.</td></tr><tr><td>Description</td><td>Enter the description text for the block item.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description text.</td></tr><tr><td>Description color</td><td>Set color for the description text.</td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Button label color</td><td>Set the color for the button text</td></tr><tr><td>Button label hover color</td><td>Set the color for the button text when hovering.</td></tr><tr><td>Button link</td><td>Specify the link to which the button will redirect.</td></tr></tbody></table>

### \[BLOCK] Tying text

<table><thead><tr><th width="289">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Text 1</td><td>Enter the text for block.<br><br><em><mark style="color:orange;">Example: This, is , an example.</mark></em></td></tr><tr><td>Text 2</td><td>Enter the text for block.<br><br><em><mark style="color:orange;">Example: This, is , an example.</mark></em></td></tr><tr><td>Title font size</td><td>Determine the font size of the text.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the text on the mobile.</td></tr><tr><td>Title color</td><td>Set the color for the text.</td></tr><tr><td>Background color</td><td>Set the background color for the text block.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/instagram.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.