# Image gallery

The **Image Gallery Section** allows you to display multiple images in a visually appealing layout. It is ideal for showcasing **product images, brand visuals, promotions, or lifestyle photography** to enhance customer engagement.

{% hint style="success" %}

1. **Navigate to** Shopify Admin > Online Store > Themes.
2. **Click** Customize on your active theme.
3. **In the Theme Editor**, click **Add Section > Image Gallery**.
   {% endhint %}

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2FJRiQwz1sLnPCJoPikB9N%2Finsta.png?alt=media&#x26;token=999835f2-6f8e-4d13-83a2-e8ca7a3d19df" alt=""><figcaption></figcaption></figure>

### Settings & Customization

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2Ftj6Pnmy9aCvKI6Y7NQiN%2Finstgallery.png?alt=media&#x26;token=30971599-91f6-454f-a342-1303fdc00015" alt=""><figcaption></figcaption></figure>

#### **Layout**

* **Expand to Full Width** : Enable this option to extend the image gallery across the entire screen width.
* **Color scheme:** You can customize the section’s appearance by changing the **text color, background color**, and more using **preset color** options.
* **Background Opacity** : Adjust transparency (Range: 0–100 %, Default: 100%). This applies to the background image, customizable in theme settings.

#### Content Settings

* **Heading:** Set a custom title (e.g., "Hot & Top Trends").
* **Heading Size:** Choose from **Small, Medium, or Large**.
* **Text :** Add additional text if needed.
* **Text Position :** Select the Position&#x20;
  * **Above Main Heading** – Position the subheading above the main heading.
  * **Below main heading** – Position the subheading below the main heading.
* **Desktop Content Alignment** – Choose the text alignment for desktop. **( Left, Right & Center ).** The content alignment is automatically centered on mobile screens.
* **Aspect ratio -** There are 3 option image ratio as **( Adapt to image, square and portrait) c**an choose the required style as theme requirement.
* **Gallery View :** Selct the gallery style
  * **Rotate** – Enables rotating images within the gallery (This option works only when the carousel is enabled).
  * **Default** – Displays images in a standard gallery format.

#### **Column Settings**

* **Desktop Columns** – Choose the number of columns for desktop view (Options: 5,6,7).
* **Mobile Columns** – Choose the number of columns for mobile view (Options: 1, 2).

#### **Carousel Settings** <a href="#carousel-settings" id="carousel-settings"></a>

* **Enable Carousel** : Activate a sliding format for product display.
* **Change Slides Every:** Set transition delay (in seconds). If set to 0, auto-play is disabled.
* **Gap** : Define spacing between items (Default: 30px, auto-adjusts for mobile).
* **Pagination** : Choose the pagination type: **Dots** (dot indicators), **Arrow** (manual navigation), or **None** (no indicators).
* **Pagination Style** : Choose the style: **Classic** (traditional) or **Modern** (updated look)..

#### Section padding

* **Top Padding :** Adjust spacing above the section.
* **Bottom Padding :** Adjust spacing below the section.

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.

{% hint style="success" %}
**In the Theme Editor**, click **Add Section > Image Gallery >** add **Image**
{% endhint %}

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2FpgHjnW1TDdrYT4N7dNG5%2Finst-block.png?alt=media&#x26;token=b24954d3-c614-46a7-838c-b26b63e05486" alt=""><figcaption></figcaption></figure>

### Image

* **Image:** Upload a custom image or select from free images.
* **Link:** Assign a destination link (e.g., All Products).
* **Open Link in a New Window:** Enable this option to open the link in a new tab.