How to show more than one size chart on a product page

Normally, Jotly shows one size chart on each product page: the one that best matches the product. Sometimes one isn't enough. You might want a size chart and a "How to measure" guide, or a size chart and a fit guide, both on the same product page.

Slots let you do that. You put each extra size chart in a slot (Slot 2, Slot 3 or Slot 4), then add a Jotly extra size chart block to your product page for each slot. Each block shows the size chart from its slot that matches the product, using the same targeting you already know: products, collections, tags, vendors, metafields and advanced conditions.

Video Tutorial

0:00-0:00

How slots work

Every size chart lives in exactly one place:

Inside each slot, Jotly picks the size chart for the product exactly as it does for your main size chart. Targeting and priority work the same way, but each slot only looks at its own size charts. A size chart in Slot 2 never competes with your main size chart, and never replaces it.

Example: you sell shoes and want two things on every shoe product page: the shoe size chart, and a "How to measure your foot" guide.

On a shoe product, the main button opens the shoe size chart, and the Slot 2 block opens the measuring guide. On a product outside the Shoes collection, the Slot 2 block shows nothing.

Step 1: Create a product-based size chart and put it in a slot

1. Open the Jotly app and click Create to start a new size chart
2. In the targeting section, choose Specific products and select the products that should show this size guide
3. Build the size chart content as usual
4. Find Product page placement and change it from Main size chart (default) to an extra size chart slot, for example Extra size chart: Slot 2
5. Fill in Button display text, for example "How to measure". This is the text the slot's button shows. If you leave it empty, the button shows your normal button text from Settings
6. Click Save

In your size chart list, the size chart now has a Slot 2 badge next to its status, so you can tell it apart from your main size charts.

Step 2: Add the Jotly extra size chart block to your product page

1. In your Shopify admin, go to Online Store and click Edit theme
2. Open your product page template. If you use more than one product template, repeat these steps for each one that needs the extra size chart
3. Click the Add block button in the section where you want the extra size chart to appear
4. Click on the Apps tab and select the Jotly extra size chart app block
5. In the block settings, set Slot to the same slot you chose in Step 1, for example Slot 2
6. Choose the Display and Button text you want (see below)
7. Drag and drop the block to the position you want, for example just below your main size chart button
8. Click Save to save the product template

You only add the block once per template. You don't need a separate block for each product: the block picks the right size chart for every product on its own.

Step 3: Choose how the block looks

Display

• Button that opens the size chart (default): shows a button that opens the size chart in a popup, styled like your main size chart button
• Size chart on the page: shows the size chart directly on the product page, with no button

Button text

Each Jotly extra size chart block chooses its own button text, so two buttons on the same page never have to say the same thing.

All three are translated. If you've translated the size chart's name or button text in Jotly, customers see their own language.

Want to style the button differently? Add a class in the block's CSS Class field and target it in your theme's CSS.

Step 4: Check it on your store

Open a product page that your slot size chart targets. You should see your main size chart as before, plus the extra size chart where you placed the block. Open a product that the slot size chart doesn't target: the block shows nothing there.

Good to know

• Several size charts in the same slot work like your main size charts: each product gets one size chart from that slot. A size chart assigned to the product directly wins first; after that the higher priority wins, and if the priority is the same, the most recently created size chart wins. See How Jotly decides which size chart to show→. To show both on the same product, put them in different slots
• Slots never fill in for each other. If a product has a Slot 2 size chart but no main size chart, the main button won't show the Slot 2 size chart
• Product pages only. The Jotly extra size chart block is for product templates. It isn't shown in quick view popups on collection pages
• Reusable blocks can't be put in a slot. They're used inside other size charts, not shown on their own
• Moving a size chart back to the main size chart is just a matter of changing Product page placement to Main size chart (default) and saving

Troubleshooting

I don't see the Product page placement option in the size chart builder

Slots aren't turned on for your store yet. They're only available on the Enterprise plan. Make sure you're subscribed to it, then create a support request from the Jotly app (or email [email protected]) and we'll turn them on.

I can't find the Jotly extra size chart block under Apps

• Make sure you're editing a product template. The block isn't offered on other pages
• Make sure slots are turned on for your store (see above)

The extra size chart isn't showing on my store

• Check that the block's Slot matches the slot in the size chart's Product page placement exactly. A Slot 3 block never shows a Slot 2 size chart
• Check that the size chart's targeting matches this product, and that the size chart is Active, not Draft
• Make sure you saved the product template in the theme editor
• Make sure the Jotly app embed is turned on in your theme. See How to enable Jotly in your live theme→
• If you use more than one product template, check that the block is on the template this product uses

My main size chart disappeared after I changed Product page placement

If you move your only matching size chart into a slot, the product no longer has a main size chart, so the main button has nothing to show. Change Product page placement back to Main size chart (default), or create a separate size chart for the main button.

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