Size chart layouts

Size chart layout is designed to be extremely flexible - you can add arbitrary number of different layout blocks to create the ideal size chart you want for your shoppers. 

Now lets first look at theSize chart layout preview, which will always be on the left hand side. 

1. Layout block labels: These black arrows shows you which layout blocks are currently in the size chart. 
2. Layout block editing options: If you hover your mouse over a layout block, you will see this green bar show up. The bar has various actions you can take on the layout block. For example, you can change the order, open the layout block editor, or delete the layout block.
3. Add layout block button: clicking on this will open theSize chart layout blocks view. From there, you can add new layout blocks to the size chart.
4. Template button: If you want to use the same layout for different sizing charts, you should use layout templates. The advantage here is consistency - if you set up the same layout for different sizing charts separately, updating one will requiring work to update the rest which often leads to human errors and inconsistencies. With layout templates, you only have to do the work once.

On the right hand side, you first see theSize chart layout blocks view. You can open this by click on "Add layout block" from the preview.

Clicking on a layout block will display a"Add to layout"button. Clicking on this will add the new layout block!

Now, let's take a look at each layout block!

---

1: Sizing Table 

There is a lot of details to this, so please refer to this guide.

---

2. Text

The text block is where you can add text and style them according to your needs. The interface should be similar to any other text editor. 

---

3. Image

Image upload interface:You can upload images to us or use an existing image URL.

---

4. Divider

You can also add text inside the divider. 

---

5. Video

---

6 . Image + Caption

If you want to mix text with images, use this layout block. You can customize whether text should show on the right, left, above, or under. And the text to image ratio. 

---

7. Image Group

This layout block is useful to group multiple images (up to 6 images) together. 

There are various layout options for each number of images. For example, for 3 images, you can have the following layout:

---

8. Layout Editor: Tabs

Tabs is a good way to organize your content is different sections. For example, you can put description and illustration for how to measure each sizes in a different tab. This way, you content seems more concise and easier to follow.

Note: Tabs is a advance feature only available in Premium plan.

---

9. Code

Sometimes, you simply want full control over what is displayed. This is when the Code block is useful. It allows you to put in raw HTML and essentially display anything you want.