Section: Results

Everything you'll need to know on how to setup your Results section.

The Results section is a two-column layout that pairs a lifestyle image with up to six animated stat rings. Perfect for showcasing customer satisfaction percentages, success metrics, or product testimonials in a visual, data-driven format. Each stat is a circular progress indicator with a percentage and a descriptive label.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Results, then click on it.

3) Done — your Results section is added.

The general settings contain the content, image, buttons, and spacing setup of the Results section. Simply click on the section to open the settings.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. Controls the section background, heading, body text, and stat ring colors.

The main heading of the section. For example: Real People, Real Results or Numbers don't lie. Leave empty to hide.

Smaller emphasized line below the heading. For example: Real People, Real Craftsmanship. Leave empty to hide.

Supporting paragraph below the subheading. Use it to expand on the headline message. Leave empty to hide.

Upload the lifestyle photo for the left column. A real customer photo, product-in-use shot, or studio image works best — something that visually supports the metrics on the right.

Aspect ratio of the image: Portrait (4:5), Square (1:1), or Landscape (16:9). Default Portrait works best for lifestyle photos with people; Landscape is better for wide product shots.

Where the image sits on desktop: Left or Right. On mobile the image always appears on top of the content.

Round the corners of the image, between 0 px and 32 px. Default 16 px gives a soft modern look. Set to 0 for sharp edges.

Tick this box to display the primary button. Default: on.

The text shown on the primary button. For example: TRY NOW, Shop the collection, or Get yours. The button hides if this is empty.

Where the primary button links to — usually your bestseller product or featured collection.

Tick this box to display the secondary button. Default: on.

The text shown on the secondary button. For example: Learn more or Read the reviews. The button hides if this is empty.

Where the secondary button links to.

Space above the section in pixels (0–120). The default 80 px gives the Results section presence. Reduced ~40% on mobile.

Space below the section in pixels (0–120). Default: 80 px.

Each stat ring is an individual Stat block. Click Add block inside the section and choose Stat. You can add up to 6 stats per section. Each ring renders as an animated circular progress arc with the percentage in the center.

The numeric value shown inside the ring, between 0% and 100%. Drives the arc fill — the higher the value, the more of the ring is filled. For example: 98 for 98% customer satisfaction.

The descriptive text shown next to the ring. Keep it concise — 1 to 2 short sentences. For example: Customer satisfaction with our products or Repeat-buyer rate within 30 days.

Three stats is the sweet spot — they balance well next to a portrait image without crowding. The maximum is 6, but with more than 4 the column gets long. Keep stats focused on your strongest metrics.

The Percentage range is intentionally limited to 0–100% because each ring renders as a circular arc — values above 100% would loop the arc and become misleading visually. If you need to show a number over 100, put it in the Label text instead.

The ring color is automatically derived from the foreground color of your active Color scheme. To change it, pick a different scheme or edit the foreground color in Theme Settings → Colors.

The ring animation runs once on page load. If you have Reduced motion enabled in your OS preferences, the animation is intentionally disabled for accessibility — the rings render in their final filled state instead.

Yes — the section works on any template. It's particularly effective on product pages where it adds a trust layer (e.g. 96% would buy again, 92% rate it 5 stars) right next to product details.