> For the complete documentation index, see [llms.txt](https://themessupport.gitbook.io/lollipop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themessupport.gitbook.io/lollipop/sections/image-gallery.md).

# 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="/files/mNh99qFMLHmKIA22Jw4N" alt=""><figcaption></figcaption></figure>

### Settings & Customization

<figure><img src="/files/vSker4d5yvQAJjWl9neB" 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="/files/48mXVDG6Sm9En8bSWRhJ" 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://themessupport.gitbook.io/lollipop/sections/image-gallery.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.