> 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/scrolling-products.md).

# Scrolling products

The **Scrolling Products** section enables customers to explore multiple products in a smooth, horizontal scrolling format. This feature enhances user engagement and makes browsing more convenient, especially on mobile devices.

{% hint style="success" %}

1. **Go to Shopify Admin** > Online Store > Themes.
2. Click **Customize** on your active theme.
3. Click **Add Section** > **Scrolling Products** 
   {% endhint %}

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

### **Settings & Customization**

<figure><img src="/files/1URC7QHzpRBpiV3Nnsv9" alt=""><figcaption></figcaption></figure>

#### **Layout** <a href="#layout" id="layout"></a>

* **Expand to Full Width:** Enable this option to extend the section 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:** Set the transparency level (Range: 0–100, Default: 100). This applies to the background image, which can be customized in the theme settings.

#### Content  <a href="#content-settings" id="content-settings"></a>

* **Heading:** Set a custom title (**e.g., "Scrolling Products"**).
* **Heading Size:** Choose from **Small, Medium, or Large** (**Default: Medium**).
* **Text :** Add additional text if needed.
* **Text Position :** Select the Position
  * **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.

#### **Product**&#x20;

* **Gap Between Products:** Adjust spacing between products.&#x20;
* **Image Size:** Customize product image dimensions.
* **Desktop Alignment:** Choose the text alignment for desktop **Left, Right & Center .** The content alignment is automatically centered on mobile screens.

#### **Animation Settings**

* **Reverse Animation:** Adjust scrolling direction.
* **Speed:** Set scrolling speed.

#### Section padding <a href="#section-padding" id="section-padding"></a>

* **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)**.

### **Block Settings**

* **Color Scheme:**  You can customize the section’s appearance by changing the **text color, background color**, and more using **preset color** options..
* **Product:** Select a specific product to display.
* **Upload Image:** Choose a custom image for the product.