How to add a scale bar to your size chart

A scale bar gives your customers a quick visual of how a product fits, for example from tight to loose or from runs small to runs large. You can add it inside the size chart popup, and you can also show the same scale bar directly on your product page, near the Add to Cart button.

Video Tutorial

Watch this video to see the complete process:

0:00-0:00

Step 1: Add the scale bar block to your size chart

1. Make sure you are subscribed to a paid plan
2. Open the chart builder. Click Create to start a new size chart, or click Edit on an existing chart
3. In the chart builder, click the Add blocks to size guide button
4. Select the Scale bar block from the list

Step 2: Customize the scale bar

The scale bar block comes with all its settings in one place. You can adjust:

• Theme: the look and colors of the scale bar
• Scale bar type: the style of scale bar you want to show
• Chips: the labels shown along the scale
• Any other available settings, until it looks the way you want

When you're happy with it, click Save to save the size chart. The scale bar is now part of your size chart popup.

Step 3: Check it in the size chart popup

Go to a product page on your store that uses this size chart and click the size chart button. The popup will open, and you'll see the scale bar block inside it.

Step 4 (optional): Show the scale bar on the product page

If you also want the same scale bar to show on the product page itself, for example near the Add to Cart button, add the Jotly scale bar app block in your theme.

1. In your Shopify admin, go to Online Store and click Edit theme
2. Open your product page template
3. Click the Add block button in the section where you want the scale bar to appear
4. Click on the Apps tab and select the Jotly scale bar app block
5. Drag and drop the block to the position you want, for example just above or below the Add to Cart button
6. Click Save to save the product template
7. Reload the product page on your online store

The same scale bar you added to the size chart popup will now show up on the product page too.

Troubleshooting

I don't see the scale bar in the block list

The scale bar block is only available on paid plans. Check that your store is subscribed to a paid plan, then open the chart builder again.

The scale bar isn't showing on my store

• Make sure you clicked Save in the chart builder after adding the block
• Check that the product has this size chart assigned to it
• For the product page block, make sure you saved the product template in the theme editor
• Clear your browser cache and reload the page

New to Jotly? Start with How to create Jotly size chart→ first.