# Instagram

<figure><img src="/files/0XD2T9OO1DIUrbMuObWw" 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="/files/lrDB8CCVcGyGtosiBrru" alt=""><figcaption></figcaption></figure>

## Section Settings

| Setting                                    | Description                                                                                                                   |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| Layout:                                    | Select the width layout of the section to be either default to the body's width, 1170px, 1770px or full screen width.         |
| Padding Container Full Width               | Determine the spacing of the left and right sides if the layout 'fullwidth' is selected.                                      |
| Spacing top - Desktop / Tablet / Mobile    | Determine the spacing of the section from the top on Desktop, Tablet and Mobile.                                              |
| Spacing bottom - Desktop / Tablet / Mobile | Determine the spacing of the section from the bottom on Desktop, Tablet and Mobile.                                           |
| Enable Border?                             |                                                                                                                               |
| Border Color                               | Set the color for the border of the section.                                                                                  |
|                                            |                                                                                                                               |
| Background Color                           | Set the Background Color for the whole section.                                                                               |
| Background Gradient                        | Set the Background Gradient for the whole section. If the gradient is none, then the background color will be applied if any. |
| Background Image                           | Upload/choose an image as the background for the section.                                                                     |
| Title                                      | Enter the title for the section.                                                                                              |
| Enable Title Border                        | Turn on the line through of the title of the section.                                                                         |
| Title Color                                | Set the title color for the section.                                                                                          |
| Title Border Color                         | Set the color of the border title of the section.                                                                             |
| Title Font Size                            | Determine the font size of the section title on Desktop ranging from 10px to 50px.                                            |
| Title Font Size Mobile                     | Determine the font size of the section title on Mobile ranging from 10px to 50px.                                             |
| Title Margin Bottom                        | Determine the spacing of the title from the bottom.                                                                           |
| Description                                | Fill in the description text for the section.                                                                                 |
| Description Color                          | Set the color for description text.                                                                                           |
| Description Font Size                      | Determine the font size of the description text.                                                                              |
| Description Spacing Bottom                 | Determine the spacing of the description from the bottom.                                                                     |
| Alignment                                  | Align content to the left, the right or center of the section.                                                                |
| View All                                   | Fill in the text for the view all link.                                                                                       |
| View All Font Size                         | Determine the font size of view all link.                                                                                     |
| View All Alignment                         | Align the view all to be either to the left, right or center of the section.                                                  |
| View All Font Weight                       | Select the font weight of the view all text.                                                                                  |
| View All Margin Bottom                     | Determine the spacing of the view all text from the bottom.                                                                   |
| Enable View All Border?                    | Enable to underline the view all.                                                                                             |
| View All Link                              | Enter the link to redirect viewers to after being clicked.                                                                    |
| View All Color                             | Set the color for the view all text.                                                                                          |
| Display Button                             | Enable to show the section button or not.                                                                                     |
| Button Text                                | Specify the text the section button.                                                                                          |
| Type Button                                | Select the type of the button to be either: Redirect to a URL or load more Block item.                                        |
| Button Link                                | Specify the link for the button to redirect to.                                                                               |
| Enable Button Underline?                   | Enable to show the underline on button.                                                                                       |
| Color - Background Color - Border Color    | Set the color, border color and background for both normal and hover states of the button.                                    |
| Button Width                               | Determine the width of the button from 50px to 600px.                                                                         |
| Button Spacing Top                         | Determine the spacing of the button from the top.                                                                             |

#### SETTINGS FOR EMBED CODE APP

| Setting               | Description                                                              |
| --------------------- | ------------------------------------------------------------------------ |
| Embed JavaScript Code | Insert a library code or code snippet to run the external Instagram app. |

#### SETTINGS FOR IMAGE

| Setting                      | Description                                                                                         |
| ---------------------------- | --------------------------------------------------------------------------------------------------- |
| When Click On Image          | Decide which action to take after an image is clicked: Redirect to Link or Open Fancy box.          |
| <p>Item Per Row</p><p>5 </p> | Select the number of images to show at a time.                                                      |
| Maximum Brands To Show       | Limit the number of total images to show.                                                           |
| Grid Gap                     | Specify the spacing between image item of the section.                                              |
| Slider Instagram             | Set the Slider effect: Center Mode to zoom the centered slide image, or Default without any effect. |
| Display Arrow?               | Show the arrow for page navigation                                                                  |
| Icon                         | Fill in text (svg) as the icon for the show more images button                                      |
| Background Color             | Set the background color for the image when hovered.                                                |
| Opacity Background           | Determine the transparency of the background for the background color to show.                      |


---

# 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/bonnita-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.
