# Collection links: Scrolling

<Tabs>
<Tab title="GIF">

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

</Tab>

<Tab title="Image">

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

</Tab>
</Tabs>

Showcase multiple collections in a scrolling layout with engaging visuals and text.

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

<Hint type="success">

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

</Hint>

## How to customize a Collection links: Scrolling section

### Section settings

<Expandable title="🎨 Layout">

<Table widths="191.19476318359375,auto">

| Setting | Description |
| --- | --- |
| **Container** | Choose between full-width or fixed-width layout for the section. |
| **Content position** *(Full width only)* | Place the content inside the image area or outside of it.<br/>• `Inside`:<br/><img src="https://docs-assets.foxecom.app/pebble-theme/image_RVMYw436.png" alt="image" /><br/>• `Outside`:<br/><img src="https://docs-assets.foxecom.app/pebble-theme/image_6xhJkp5S.png" alt="image" /> |

</Table>

</Expandable>

<Expandable title="🏷️ Collection title">

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

<Table widths="171.2745361328125,auto">

| Setting | Description |
| --- | --- |
| **Show product count** | Toggle to display or hide the number of products in the collection. |
| **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_fQhfxYxu.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="🖼️ Collection image">

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

<Table widths="188.18011474609375,auto">

| Setting | Description |
| --- | --- |
| **Corner radius** | Adjust the roundness of the image corners. |
| **Overlay color scheme** | Select a color scheme overlay for the image (applies only on mobile). |

</Table>

</Expandable>

<Hint type="info">

✨ Check out other Collection links: Scrolling 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: Scrolling section is made up of two main blocks: **Header** and **Collection**.

<Tabs>
<Tab title="Header">

![image](https://docs-assets.foxecom.app/pebble-theme/image_934PKMWh.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_TuzNm9ka.png)

Display a selected collection with a custom image and title.

<Table widths="154.4052734375,auto">

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

</Table>

</Tab>
</Tabs>