> For the complete documentation index, see [llms.txt](https://moodboard-creations.gitbook.io/agnes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://moodboard-creations.gitbook.io/agnes/sections/links-with-media.md).

# Links switched gallery

### What It Does

The Linked gallery section lets you customize multiple gallery images with product hotspots on the images.\ <br>

<figure><img src="/files/ejgWXs79g2Lh0jyy5YaD" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}

#### How to Add It

1. In the Shopify theme editor, click **Add section**.
2. Search for **"Links switched gallery"**.
3. Click the section to add it to your page.
4. Adjust the settings described below.
   {% endhint %}

***

### Settings

#### **Layout**

Controls the Layout. Choose from: Full width, Fit to width.

#### **Layout type (desktop)**

Controls the Layout type (desktop). Choose from: Media on the left, Media on the right.

#### **Layout type (mobile)**

Controls the Layout type (mobile). Choose from: Media on the top, Media on the bottom.

#### **Image ratio**

Controls the Image ratio. Choose from: Square, Portrait, Landscape.

**Links**

#### **Heading**

Displays the title text in the links block.

**Hotspot product**

#### **Show product image**

When enabled, displays the product image on the product hotspot popup. Disable to hide it.

#### **Show price**

When enabled, displays the price on the product hotspot popup. Disable to hide it.

#### **Button color scheme**

The button appears in the hotspot product popup. Choose from: Primary, Secondary.

#### **Hotspot icon color**

Sets the color for the hotspot icon.

**Appearance**

#### **Heading font size**

Controls the heading text size.

#### **Link font size**

Controls the link text size.

#### **Horizontal alignment**

Controls the text alignment.

#### **Vertical alignment (desktop)**

Controls the Vertical alignment (desktop). Choose from: Top, Center, Bottom.

#### **Color scheme**

Applies a predefined color scheme to this element.

{% hint style="info" %}
Color schemes are sets of coordinated colors you define under **Theme settings > Colors**. Choosing a scheme applies its background, text, and accent colors.
{% endhint %}

**Spacing**

#### **Maximum padding top**

Adjusts the space above the content.

#### **Maximum padding bottom**

Adjusts the space below the content.

***

### Supported Blocks

#### Link with video

See the child document for full settings: [Link with video](/agnes/sections/links-with-media/video.md)

#### Link with image (hotspot)

See the child document for full settings: [Link with image (hotspot)](/agnes/sections/links-with-media/image.md)

***