Circle Chart Grid is a Shopify theme section in the Section Star library. Build amazing circle charts.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set the display of grid
| Setting | Type | Default |
|---|---|---|
| Columns on Desktop | Select (1 column, 2 columns, 3 columns, 4 columns) | 1fr 1fr 1fr |
| Columns on Mobile | Select (1 column, 2 columns, 3 columns, 4 columns) | 1fr |
Chart Design
Set the display of chart
| Setting | Type | Default |
|---|---|---|
| Headline Size | Range | 18 |
| Chart Size | Range | 100 |
Grid Design
Set the display of the grid
| Setting | Type | Default |
|---|---|---|
| Gap Between Columns | Number | 20 |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |
Chart block settings
| Setting | Type | Default |
|---|---|---|
| Chart Percent | Range | 40 |
| Chart Text Color | Color | #111 |
| Chart Color | Color | #8C1AF8 |
| Headline | Inline rich text | <b>Headline</b> |
| Text | Inline rich text | Some followup text to build on the fe… |
| Link (optional) | URL | — |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Circle Chart Grid”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.