Seventh > Blocks > Attribute meter
Attribute meter
The Attribute meter block shows a labeled meter or progress indicator for product attributes.
What it does
This block displays:
- A labeled meter bar
Block settings explained
Segments
- The total number of segments displayed
Active segment
- The segment which is selected
Active segment metafield
- A number field that can connect to a metafield if you want to change the active segment dynamically
How to set up the active segment metafield
- Considering a case where you're using the attribute meter in product pages
- Create a "number" type metafield, under your store's Settings > Metafields and metaobjects > products
- For each product that needs to have a different value, set the number value in the newly created metafield
- Link the created metafield in the "Active segment metafield" setting inside the admin
Tip: Make sure that the dynamic value isn't higher than the total number of segments.
Active segment color
- Choose a custom color for the active segment
- All other segments take the text color with some opacity
Fill segments up to active segment
- Doesn't highlight just the active segment, but all the segments up to it
Remove space between segments
- Connects all segments, turning the block into a progress bar
Segments height
- Change the height of the entire bar
Show active segments value
- Shows an indicator of the active value (number)
Start label
- Adds a label at the beginning of the meter bar (below the first segmnet)
Middle label
- Adds a label at the middle of the meter bar (below the center)
End label
- Adds a label at the end of the meter bar (below the last segment)
Common use cases
- Material or quality indicators
- Feature strength or level
- Size fit (true to size -> loose fit)
Tips for success
- Use consistent scales across meters
- Limit to a few key attributes
Troubleshooting
- If the meter looks empty, check the value range
- If text wraps, shorten labels