> For the complete documentation index, see [llms.txt](https://nextsky-2.gitbook.io/milano-shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky-2.gitbook.io/milano-shopify/theme-sections/instagram.md).

# Instagram

Instagram is one of the most influential social platforms that can attract potential customers. Using it in your store can be a tactic move.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FYR2eJKBJAme2Xdm8rNpq%2Fimage.png?alt=media&amp;token=15e9a8de-f0e9-432f-89aa-b4c7a3e7633f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Instagram**
3. **Save**
   {% endhint %}

## General settings

| Setting                | Description                                                                                                                           |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| Section width          | You can choose among Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video. |
| Color scheme           | You are allowed to change text color, background color, etc. with preset color.                                                       |
| Heading, description   | Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.       |
| Header size, alignment | Adjust the text alignment (left/center/right) along with the font size.                                                               |

## Instagram settings

**Instagram image source**: Choose to manually upload images or automatically select them using an Instagram access token.

**Instagram access token**: Provide your Instagram access token to enable automatic image selection.

**Show Instagram profile**: Display or hide the Instagram profile section.

**Instagram profile text**: Set the text that appears as a call-to-action for the Instagram profile.

**Instagram profile link**: Add a URL to link to an Instagram profile.

**Image animation**: Enable or disable animation effects for images.

**Image ratio**: Select a preset ratio for the images.

**Custom ratio**: Define a custom ratio instead.

**Display mode:** There are three types of product displays to choose from: grid, carousel and scrolling, each offering a unique way to showcase products.

**Items per row:** This option lets you specify the number of products featured in each row, allowing for a customized layout.

**Column gap:** Adjust the spacing between two Instagram items to ensure a visually pleasing and well-organized layout within the Instagram block.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fi8oiAJPZhLo2YSVwnGsi%2Fimage.png?alt=media&amp;token=98304882-0fce-43dd-8b4b-9e355357ef6f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F0bsTHONXJwTood5plrdY%2Fimage.png?alt=media&amp;token=9aca5066-85e4-42ea-a2b9-ccf17d845daa" alt=""><figcaption></figcaption></figure>

## **Carousel settings**

**Show Next/Back:** Display arrows to navigate to the next or previous item.

**Pagination:** Choose from different types of pagination options.

**Setup period time:** Configure the time interval for changing slides.

**Reveal next slide:** Allow a part of the next slide to be visible while the previous one is still displayed.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FrFIcNJZQ9ADWaVN50UAM%2Fimage.png?alt=media&amp;token=9d5e01bd-9373-43b2-9c3c-8be830c215c4" alt=""><figcaption></figcaption></figure>

## Mobile options, Scrolling and Section padding

**Enable Carousel on Mobile:** Turn on this option to enable the carousel functionality for mobile devices, providing a seamless scrolling experience.

**Items per row:** In mobile view, the number of items displayed on each row in the grid layout can be customized to suit your preferences and the overall design of your site.

**Speed:** Adjust the scrolling speed in seconds.

**Image width:** Set the width of images in pixels.

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FM79JVXvIMyujxgSaicIx%2Fimage.png?alt=media&amp;token=7444acc7-f0c5-4dce-a9df-686e40e01154" alt=""><figcaption></figcaption></figure>

## Blocks settings

You have the flexibility to choose between Image and Video as the content type for your display, allowing for a diverse range of visual presentations.

**Link:** Provide a direct link to the associated image, enabling users to access it with a single click.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fbug57XWTKoxGSQSyDvBr%2Fimage.png?alt=media&amp;token=087a3811-1278-4d6b-bea4-0797fb49514e" alt=""><figcaption></figcaption></figure>