# Counter

## General settings

### Counter

| Setting                     | Description                                                                                                                                                                                                                                                                                                                                                                               |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Layout**                  | <p>Determines how the counter and its accompanying text are arranged.</p><ul><li><strong>Default (Block)</strong> – Displays the number and text stacked vertically, ideal for prominent, standalone counters.</li><li><strong>Inline</strong> – Places the number and text side by side in a single line, suitable for embedding counters within sentences or compact layouts.</li></ul> |
| **Starting number**         | Defines the initial value for the counter. This number represents the starting point before the counter begins incrementing.                                                                                                                                                                                                                                                              |
| **Ending number**           | Specifies the final numeric value a counter animation should reach before stopping.                                                                                                                                                                                                                                                                                                       |
| **Animation duration (ms)** | Specifies the total time, in milliseconds, for the counter animation to run from its starting value to the ending number.                                                                                                                                                                                                                                                                 |
| **Typography**              | This element inherits the font preset defined in the [Theme Settings](https://nextsky.gitbook.io/purity-theme/theme-settings/typography#id-3.-heading-1-6), ensuring consistent typography across the storefront.                                                                                                                                                                         |
| **Text Color**              | Determines the color of the counter’s numeric value and accompanying text.                                                                                                                                                                                                                                                                                                                |
| **Text Stroke**             | Sets the thickness of the outline applied to the counter’s numeric value, measured in pixels.                                                                                                                                                                                                                                                                                             |
| **Stroke Color**            | Defines the color of the outline applied to the counter’s numeric value.                                                                                                                                                                                                                                                                                                                  |
| **Text Shadow**             | Adds or removes a shadow effect behind the text.                                                                                                                                                                                                                                                                                                                                          |
| **Number Alignment**        | <p>Controls the horizontal positioning of the counter’s numeric value within its container when using the <strong>Inline layout</strong>. </p><p>Options include:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul>                                                                                                               |
| **Number position**         | Determines whether the counter’s numeric value appears ***Before*** or ***After*** its accompanying label or descriptive text.                                                                                                                                                                                                                                                            |

### Title

| Setting             | Description                                                                                                                                                                                                                                                       |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text**            | <p>Specifies the label displayed above or alongside the counter. </p><p>This text provides context for the number being shown, helping visitors understand what the value represents</p>                                                                          |
| **Text Color**      | <p>Sets the color of the counter’s title or label text. </p><p>This helps maintain visual harmony with the store’s design and ensures the title remains readable against the chosen background.</p>                                                               |
| **Text Stroke**     | Sets the thickness of the outline applied to the counter’s text, measured in pixels.                                                                                                                                                                              |
| **Stroke Color**    | Defines the color of the outline applied to the counter’s title.                                                                                                                                                                                                  |
| **Text Shadow**     |                                                                                                                                                                                                                                                                   |
| **Title alignment** | <p>Controls the horizontal positioning of the counter’s text within its container when using the <strong>Inline layout</strong>.</p><p>Options include:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |

### Padding

| Setting                | Description                                                                                           |
| ---------------------- | ----------------------------------------------------------------------------------------------------- |
| **Top/Bottom padding** | Adjust these values to control the amount of space between the section’s content and its outer edges. |
