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 layout block button: clicking on this will open the Size chart layout blocks view. From there, you can add new layout blocks 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 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, lets take a look at each layout block!
1: Sizing Table
There is a lot of details to this, so please refer to this guide.
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.
Image upload interface: You can upload images to us or use an existing image URL.
You can also add text inside the divider.
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.
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.