# Collection links: Image

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(12)_Y95TnkUB.jpg)

Showcase your collections with eye-catching images and seamless links, making it easy for customers to discover more.

## How to add a Collection links: Image section to your Shopify store

<Hint type="success">

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Collection links: Image** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to customize a Collection links: Image section

### Section settings

<Expandable title="🏷️ Collection title">

![image](https://docs-assets.foxecom.app/pebble-theme/image_lbLHQqAx.png)

<Table widths="171.2745361328125,auto">

| Setting | Description |
| --- | --- |
| **Preset** | Choose a predefined style or switch to custom settings. |
| **Font** | Select the font style for the content (Body or Heading). |
| **Font weight** | Adjust the thickness of the text. |
| **Font size** | Set the font size. |
| **Font size mobile** | Set the font size for mobile devices. |
| **Line height** | Control the spacing between lines of text. |
| **Text color** | Choose a predefined or custom text color. |
| **Custom text color** | Set a custom color when “Custom” is selected. |

</Table>

</Expandable>

<Expandable title="🌟 Highlighted collection title">

![image](https://docs-assets.foxecom.app/pebble-theme/image_7zmV246q.png)

<Table widths="202.86724853515625,auto">

| Setting | Description |
| --- | --- |
| **Font style** | Adjust the emphasis of the highlighted title. |
| **Text color** | Set the color of the highlighted title. |
| **Underline style** | Choose the underline style. |
| **Underline color** | Set the color of the underline. |

</Table>

</Expandable>

<Expandable title="🛍️ Product cards">

![image](https://docs-assets.foxecom.app/pebble-theme/image_UdVMQ0GI.png)

<Table widths="228.982177734375,249.12225341796875,auto">

| Setting | Description | Example |
| --- | --- | --- |
| **Show badges** | Display product badges. | ![image](https://docs-assets.foxecom.app/pebble-theme/image_jQXs9Bp4.png) |
| **Show product vendor** | Show the vendor/brand name. | ![image](https://docs-assets.foxecom.app/pebble-theme/image_5yh6zCun.png) |
| **Show product type** | Display the product category/type. | ![image](https://docs-assets.foxecom.app/pebble-theme/image_vfRLmkte.png) |
| **Show quick add** | Enable quick add button on desktop. | ![image](https://docs-assets.foxecom.app/pebble-theme/image_WAq4Iepe.png) |
| **Show quick add on mobile** | Enable quick add button on mobile devices. | ![image](https://docs-assets.foxecom.app/pebble-theme/image_tBiu6xsd.png) |

</Table>

</Expandable>

<Hint type="info">

✨ Check out other Collection links: Image section settings: [Common settings available in most sections](https://docs.foxecom.com/pebble-theme/theme-sections/overview#common-settings-available-in-most-sections)

</Hint>

### Block settings

The Collection links: Image section is made up of two main blocks: **Header** and **Collection**.

<Tabs>
<Tab title="Header">

![image](https://docs-assets.foxecom.app/pebble-theme/image_VjRt4xjV.png)

Use the **Header** block to create and customize the section’s heading and introductory content.

<Table widths="214.1806640625,auto">

| Setting | Description |
| --- | --- |
| **Alignment** | Set the header alignment: left, center, or right. |
| **Devices** | Switch between desktop and mobile padding settings. |
| **Bottom** | Adjust the spacing below the header. |

</Table>

<Hint type="info" title="📦 Nested dynamic blocks">

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
* **Image** – Display an image or icon
* **Button** – Add a call-to-action

</Hint>

<Hint type="success">

📝 Learn more: [Basic](https://docs.foxecom.com/pebble-theme/theme-blocks/basic)

</Hint>

</Tab>

<Tab title="Collection">

![image](https://docs-assets.foxecom.app/pebble-theme/image_4u4ClqwA.png)

Display a selected collection with a custom image and title.

<Table widths="189.40313720703125,auto">

| Setting | Description |
| --- | --- |
| **Collection** | Select the collection to display. |
| **Image** | Upload a custom image or leave blank to use the collection image. |
| **Collection title** | Enter a custom title or leave blank to use the collection name. |

</Table>

</Tab>
</Tabs>