> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/in-app/library/product-blocks/divider.md).

# Divider

The Divider block is a simple and flexible horizontal rule you can drop into any product page to cleanly separate chunks of content.

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

## **Key Features**

* Adjustable Thickness & Color: Control line weight and pick any color so the divider can be ultra-subtle or boldly stand out.
* Spacing Controls: Precisely adjust top/bottom margins and inner padding so there’s just the right amount of “breathing room” before and after the line.

## Benefits

* Improves Readability: It helps your customers scan key information faster without feeling overwhelmed.
* Guides the Eye: It helps direct attention to where you want it—whether that’s the start of a new feature section or the call-to-action at the bottom of the page.

## How To Use?

1. After installing the **Divider** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab.
2. Choose the **Divider** block

<figure><img src="/files/8wd5R3XZglULEsBQMybN" alt=""><figcaption></figcaption></figure>

3. Copy the block ID. For example: **smi-block-divider-1**

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

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

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

5. On the **Smind Block**, insert the block ID of divider which is **smi-block-divider-1** to the Section ID and change the block name if you want.

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

6. Next, you can rearrange the relevant blocks within the product detail sections

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

7. Finally, let's start to customize the **Divider** block

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

* Block ID: The unique ID of divider blocks
* Content Max Width: Set the maximum width of the timer’s content area can stretch to.
* Height: The thickness of the divider line itself.
* Color: The line’s color, picked via a color picker or hex code.
* Top margin: The blank space above the divider.
* Bottom margin: The blank space below the divider.
* Custom CSS
