Appearance

Circle Progress Block ​

What This Block Does ​

Circle Progress blocks create animated circular indicators that visually show percentages, completion rates, or statistics. They're eye-catching and perfect for highlighting achievements, progress, or key metrics.

Perfect for: Customer satisfaction rates, project completion status, skill levels, feature comparisons, delivery success rates, satisfaction scores

How to Add It ​

Step 1: Add the Circle Progress Block

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Navigate to any section that supports blocks
  4. Click Add block and choose Circle Progress Block from the list

Step 2: Configure Your Progress Circle

  1. Set the percentage value (0-100%)
  2. Add descriptive text that explains what the percentage represents
  3. Choose the circle color (accent or custom)
  4. Set alignment for different screen sizes

Key Settings to Configure ​

Progress Content ​

Percentage: The value shown in the circle (0-100%)

  • When to use: Use real data when possible (actual satisfaction rates, completion percentages)
  • Best practice: Round numbers work well (75%, 90%, 95% rather than 73.4%)

Progress Text: Label that explains what the percentage represents

  • Examples: "Customer Satisfaction", "On-Time Delivery", "Five Star Reviews", "Orders Completed"
  • Keep it clear: Make sure customers understand what metric you're showing

Visual Style ​

Bar Color: Choose how the progress circle appears

  • Accent: Uses your theme's accent color for brand consistency
  • Custom: Pick a specific color that matches your content or brand
  • Pro tip: Use colors that match the meaning (green for success, blue for trust, etc.)

Pro Tips for Success ​

Progress Best Practices

  • Use real data: Authentic metrics are more trustworthy than rounded numbers
  • Group related metrics: Multiple progress circles work well together for comparisons
  • Keep text short: 1-3 words work best for progress labels
  • Choose meaningful percentages: High numbers (80%+) are more impressive for positive metrics

Common Mistakes

  • Fake numbers: Avoid obviously made-up percentages like 99.9%
  • Too many circles: More than 3-4 progress circles can overwhelm users
  • Unclear labels: Make sure the text clearly explains what's being measured
  • Poor color choices: Ensure the progress color has good contrast against backgrounds