> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/products/shop-by-step.md).

# Shop by step

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FXJMtOzFUOj492LSCtgvr%2Fimage.png?alt=media&amp;token=59cd8c1e-c34e-4a87-8c4b-326e8dff8b43" alt=""><figcaption></figcaption></figure>

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

#### General settings <a href="#general-setting" id="general-setting"></a>

| Setting                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Section width                      | <p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Expand full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul> |
| Color scheme                       | Select colors from **Theme settings -> Colors**                                                                                                                                                                                                                                                                                                                                                                                           |
| Items per row on desktop           | Number of columns to display on desktop computers                                                                                                                                                                                                                                                                                                                                                                                         |
| Column gap                         | <p>4 options for column gap</p><ul><li><strong>No gap</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul>                                                                                                                                                                                                                                                                    |
| Subheading                         | The subheading of the section                                                                                                                                                                                                                                                                                                                                                                                                             |
| Heading                            | The title of the section                                                                                                                                                                                                                                                                                                                                                                                                                  |
| Enable heading underline animation | Enable heading underline animation                                                                                                                                                                                                                                                                                                                                                                                                        |
| Underline style                    | Select Underline style                                                                                                                                                                                                                                                                                                                                                                                                                    |
| Underline color                    | Customize Underline color                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Description                        | The description of the section                                                                                                                                                                                                                                                                                                                                                                                                            |
| Heading size                       | <p>The size of the title:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul>                                                                                                                                                                                                                                                                                                      |
| Alignment                          | <p>The position of the heading and description.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul>                                                                                                                                                                                                                                                                                 |

#### Carousel settings <a href="#settings-for-carousel" id="settings-for-carousel"></a>

| Setting                 | Description                                                    |
| ----------------------- | -------------------------------------------------------------- |
| Enable carousel         | When enabled, the section will be displayed in carousel format |
| Show navigation         | Display the next and back controls for the carousel            |
| Show pagination         | Display the pagination for the carousel                        |
| Reveal next slide       | Display a part of the upcoming slide.                          |
| Items per row on mobile | Number of columns to display on mobile devices.                |

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

| Setting | Description                                |
| ------- | ------------------------------------------ |
| Top     | Customize the top margin of the section    |
| Bottom  | Customize the bottom margin of the section |

#### Section divider

| Setting      | Description                                                   |
| ------------ | ------------------------------------------------------------- |
| Show divider | Display a dividing line to separate from the previous section |

Block setting

| Setting         | Description              |
| --------------- | ------------------------ |
| Step title      | Set up the text content  |
| Product in step | Select a product to show |