About Performance Graphs Block
The Performance Graphs block is a dynamic visualization tool that helps showcase your product's key metrics and features through intuitive graphical representations. It enables you to display:
Product performance metrics
Product fit analysis
Multiple graph comparisons
The section stands out for its flexibility in presenting data through both circular and linear graph styles, with customizable colors and collapsible display options to enhance the user experience.
How to Access Performance Graphs Block
Performance graphs belong to the product details section (on the product template) and the Featured product section. You can access it
From Product details section
From your Shopify Themes, customize your active theme
Select any product from the top center bar to access the Product template
On the Product details – default section, we set a Product performance
Or click "Add block" where you want to add the Performance graphs
Search for "Performance graphs" and select it
From Featured product section
From your page, click “Add section” and select the Feature Product section
In this section, click "Add block" where you want to add the Performance graphs
Search for "Performance graphs" and select it
After adding the Performance graphs, customize its appearance and functionality using the available settings.
How to Configure Performance Graphs Section
Basic Components
Each Performance Graphs section includes these default components:
General settings configuration
Single graph customization
List of graphs functionality
To begin customizing, click the "Performance Graphs" section to access its settings.
General
Within General settings, you can:
Choose between Circular or Linear graph style
Set custom graphs color with Transparent option
Configure Heading text (default: "Product performance")
Toggle "Show as collapsible item" option
Enable/disable the "Expand collapsible by default" setting
Single Graph Configuration
Under the Single graph settings, you can customize:
Label (example: "Product fit")
Description field with tooltip display
Graph maximum value (between 1 and maximum value)
Product value settings
Graph description that appears in a tooltip
List of Graphs
You can display a list of multiple graphs inside a block by using the product metaobject.
To configure a list of graphs:
Toggle the "Use list of graphs" option to replace a single graph
Set up Graphs metafield
This section allows you to show multiple performance metrics by replacing the single graph display with a collection of graphs.
How to Create Metaobject Used in Performance Graphs Block
Step 1: Create the metaobject in the form of "list entries" with the following requirements:
Label (single line text)
Description (multi-line text)
Maximum value (integer)
Product value (integer)
Step 2: Create the metafield by going to Shopify Admin Settings > Custom data and filling in all the required fields.
Step 3: Go to product, and add value to products.
Step 4: Go to theme editor, access the product template, add and click on block "performance graphs". Then, enable "Use the list of graphs".
Step 5: Fill in the namespace name and key of the metafield just created.
Common Cases and FAQs
1. How to optimize graph readability on different devices?
When setting up Performance Graphs, you can:
Use clear, descriptive labels for each graph
Keep maximum values reasonable (recommended between 1-5 for best visibility)
Ensure descriptions are concise and informative for tooltip display
2. When should I use circular vs linear graphs?
Choose Circular graphs for:
Single metric comparisons
Percentage-based data
Compact visual representation
Choose Linear graphs for:
Trend analysis
Multiple data point comparison
Detailed performance tracking
3. How can I display multiple graphs efficiently?
Use the list of graphs feature with metaobject when you need to:
Show multiple performance metrics at once
Compare different product attributes
Create a comprehensive performance dashboard
4. How to make graphs more interactive?
Enable these features for better user interaction:
"Show as collapsible item" for cleaner interface
"Expand collapsible by default" for immediate visibility
Add descriptive tooltips using the Description field
5. What are the best practices for graph descriptions?
Keep descriptions clear and concise
Include key metrics and what they mean
Use consistent terminology across all graphs
Remember that descriptions will appear in tooltips