> 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/image-tabs.md).

# Image tabs

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FY2RrYvbrEO2FOxQD1eRl%2Fimage.png?alt=media&amp;token=15001b67-9820-4a28-b0e6-0605094e4b95" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**

1. In your Shopify admin, go to **Online Store ==> Themes**.
2. Click **Customize**.
3. Locate **Image tabs.**
4. Change images.
5. Click **Save**
   {% endhint %}

## Section settings

### Section header and General

**Section width:** You can choose among Container, Wrapped container, Full width for the banner layout.

**Color scheme:** Set text color and background color with preset scheme.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F1Bm2KMxtxADNNDw2gNKC%2Fimage.png?alt=media&amp;token=dd02ef43-b14d-415c-be97-0ef472809179" alt=""><figcaption></figcaption></figure>

Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the background color and container type.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FQr8cguQzj9Pw7cPtt975%2Fimage.png?alt=media&amp;token=f241c58e-ff11-4e1f-b860-75b8126849de" alt=""><figcaption></figcaption></figure>

### Settings

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fi4fna8spq7W8KF8u7XkP%2Fimage.png?alt=media&amp;token=87770ef4-ae23-4e99-ae8d-42135ec2f958" alt=""><figcaption></figcaption></figure>

**Desktop image width:** Set the width of the image for desktop view to ensure optimal display and layout consistency.

**Sliding effects:** Choose the sliding direction for the carousel: "Slide Vertical" for an up-and-down transition or "Slide Horizontal" for a left-to-right transition.

**Desktop Image Position:** Choose whether the image appears on the left or right side of the section when viewed on a desktop.

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

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

**Column gap:** You are allowed to change both of them for mobile devices.

### Section padding

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%2FwghT1vT05vgJZ8gTM2Wn%2Fimage.png?alt=media&amp;token=a404d69a-ef71-4ddc-aa54-8cfc533a2f1b" alt=""><figcaption></figcaption></figure>

## Block settings

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FCjOVAanYKMZRobc5Qb2Z%2Fimage.png?alt=media&amp;token=1acb3af6-bd38-4d1f-88c7-3261edd96d26" alt=""><figcaption></figcaption></figure>

**Image:** Upload or select an image to be displayed in the section, ensuring it aligns with your design and layout preferences.

**Heading:** Set the main title for this section to clearly define its purpose and content.

**Link:** Add a URL to make the element clickable, directing users to a specific page when selected.