> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bonnita-documentation/sections/all-sections-in-theme/instagram.md).
# Instagram
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
| 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. |
|
Item Per Row
5
| 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. |