Sampo
documentation

Animated stats

 General

The Animated Numbers section allows you to create visually engaging displays that combine text and animated numerical values.

Like other theme sections, it includes various customizable settings to match your store’s design preferences. In this section, you can customize: 

  • Color Scheme: Choose a color scheme that matches your store's design
  • Animation Duration: Define how long each animation takes to complete
  • Animation Delay: Set a delay before the animation starts
  • Text Alignment: Align text to the left, center, or right
  • Items per Row: Define the number of items displayed per row for desktop and mobile

Create content with blocks

Text with Animated number

  • Add an Animated Number along with an optional Prefix and Suffix.
  • Include a Heading and Text 

Section Heading

You can add a section heading to provide users with general information about the section's content. By using the Section Heading block, you can:
  • Define the heading and subheading
  • Add text, including links and lists, if necessary
  • Control text alignment and select HTML tags
  • Customize sizes for desktop and mobile views or use the default sizes 

Custom Spacing

By using the custom spacing block you can easily adjust the top padding, top margin and bottom padding of any section to suit your design needs.

Note: Values set in the custom spacing block will override those defined in the general theme settings, applying locally only to this specific section.

Steps

  1. Open the theme editor and select the section you want to edit.
  2. Click the section name to open its settings, then find and click "Add block."
  3. Select "Custom Spacing" and define padding top, margin top and padding bottom values for the section.
  4. The values you set will override the general settings in the theme.