How to add and use dynamic blocks in your size chart

A normal block shows the same content on every product. A dynamic block shows a different value on each product, taken from one of that product's metafields. This lets you build one size chart and have part of it change from product to product, instead of creating a separate chart for every product.

For example, one size chart can show each product's own fit note, model photo and fit scale, as long as those are saved in product metafields.

Video Tutorial

Watch this video to see the complete process:

0:00-0:00

The three dynamic blocks

Before you start

• The metafield needs a definition in Shopify. Go to Settings, then Custom data, then Products to create one. Metafields without a definition do not appear in Jotly.
• Fill in the metafield on the products where you want the block to appear. A product with no value simply does not show the block.
• The value is read from the product, not from the selected variant. Changing the variant on the product page does not change the block.

Step 1: Add a dynamic block

1. Open the chart builder. Click Create to start a new size chart, or click Edit on an existing one
2. Click the Add block to size guide button
3. Scroll to the Dynamic group at the bottom of the list
4. Select Dynamic text, Dynamic image or Dynamic fit scale

The block is added with a Dynamic badge next to its name, and a reminder that it is only visible on product pages.

Step 2: Choose the product metafield

1. Click the Product metafield field inside the block
2. A list opens with every metafield this block can use. Each row shows the metafield's name, its namespace and key, and its type
3. Scroll the list, or type in the search box to filter by name, namespace, key or type
4. Click the metafield you want

Step 3: Set up the block

Heading

Every dynamic block starts with an optional heading, shown above the value. In the text and image blocks it is a full text editor, so you can set the alignment, size and color. Leave it empty if you do not want a heading. The heading is hidden together with the block when a product has no value.

Dynamic text

• Numbers, dates, measurements and ratings are formatted for you, for example 24.5 cm or 3.5 / 5
• A list is shown as its items separated by commas
• A rich text metafield keeps its formatting (bold, lists, links)
• This value is HTML: turn this on if your text metafield contains HTML and you want it shown formatted. Leave it off to show the text exactly as it is written

Dynamic image

• Fallback alt text: used when the image file has no alt text of its own
• Desktop max height and Mobile max height: limit how tall the image is, in pixels
• If the metafield holds a file that is not an image, such as a PDF or a video, the block does not show

Dynamic fit scale

The look of the scale (style, marker, color and labels) is set up the same way as the normal scale bar block. The difference is the position of the marker, which comes from each product's metafield:

Use Preview with value to enter a sample value and see where the marker lands in the preview. This is only for the preview in the builder. On your store the position always comes from the product.

Step 4: Save and check a product page

1. Click Save in the chart builder
2. Open a product page that uses this size chart and has a value in the metafield
3. Open the size chart. The dynamic block shows that product's value
4. Open a second product with a different value to confirm the block changes

Using a JSON metafield

A JSON metafield holds several values at once, so the block cannot show it as it is. When you choose a JSON metafield, an extra field appears: Key inside the JSON. Enter the key of the one value the block should show.

• The key must lead to a single value or a list of values. If it leads to a group of keys, the block does not show
• A key that itself contains a dot, a bracket or a space cannot be used
• In the fit scale, a value that matches a label is placed on that label. Any other value is treated as a number and placed in the start and end range

Things to remember

• Product pages only. The block does not show on the home page, collection pages or any other page that is not a product page
• No value, no block. A product without a value for the metafield does not show the block or its heading
• Product, not variant. The value does not change when the customer picks another variant
• Inside tabs and grids. Dynamic blocks can be added inside a tab. Dynamic text and dynamic image can also be added inside a grid

Troubleshooting

The dynamic blocks have a lock icon

Dynamic blocks are part of the Enterprise plan. Upgrade your plan, then open the chart builder again.

My metafield is not in the list

• Make sure the metafield has a definition under Settings, then Custom data, then Products
• Check that its type is one the block accepts. For example, a text metafield cannot be chosen in the dynamic image block
• Metafields created by other apps often have no definition, so they are not listed

The block is not showing on my store

• Check that you are on a product page. Dynamic blocks do not show anywhere else
• Check that this product has a value saved in the metafield
• Make sure you clicked Save in the chart builder, then wait a few seconds and reload the product page
• For the fit scale with a text metafield, check that the value matches one of the labels exactly, apart from capital letters
• For a JSON metafield, check that the key is spelled exactly as it is in the JSON

The fit scale marker is in the wrong place

For a number metafield, check the start and end values in the block. They must cover the range of numbers your products use.

Want a whole size chart to appear based on a metafield, instead of one block inside it? See How to create size charts based on product metafields→.