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 the Size chart layout preview, which will always be on the left hand side.
Layout block labels: These black arrows shows you which layout blocks are currently in the size chart.
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.
Add a Section: clicking on this will open the Size chart layout section view. From there, you can add new sections to the size chart.
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 the Size chart section view. You can open this by click on "Add a Section" from the preview.
Clicking on a section will display an "Add " button. Clicking on this will add the new section!
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 section 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 section. You can customize whether text should show on the right, left, above, or under. And the text to image ratio.
7. Image Group
This section 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.
