Click on the “Size Charts” tab at the sidebar to navigate to the “Size Charts” listing page.
Click on the “Add Size Chart” button at the top right corner of the page to open the “Add Size Chart” popup.
You can easily create a new size chart with 5 pre-designed templates or you can create a custom size chart as you want with a blank size chart.
Let create a new “Blank Size Chart” for example!
Step 1: Size chart layout
- Fill in the “Size chart title”. Enable “Show size chart title” if you want to display this title on the storefront.
- Click on the button “Add size chart content”.
- Select content type: there are 12 types of chart content and presentation styles for you to choose from table, title, text, image and text, 2 images, single image, video, to space, divider, tabs, accordion, HTML.
- You can delete, duplicate or edit the chart content as you wish.
- Continue adding chart content and customize its elements until you complete your size chart.
- Click “Next” to move to the next step.
Step 2: Decoration
(1) Select display type:
The app provides 3 different display styles for the size chart: Size chart button, Size chart block, and Floating button. When you click on each type, you can see its display preview, then choose the display type that matches the size chart and product for the best effect.
(2) Button setting:
- You can customize the label of the size chart button and choose an icon for it from the 5 provided icons or custom icons by uploading files.
- Select a position for the button.
- You also can change the position of the button by filling the distance you want on the input fields.
(3) Button style:
You can freely customize the color for every size chart button element in this section, for example, button background, button border, button text & icon, etc.
(4) Layout style:
Feel free to customize the layout for all the size chart elements by filling the width, height, box padding, border width, border radius, shadow size, and choose the color for text and background.
Step 3: Product to display size chart
You can choose to display the size chart for all products or only for specific products by searching for suitable products using the smart filter provided by this app.
You can add conditions to filter and easily search for products that match the conditions you want to apply a size chart.
Now, it’s time to choose a position to display the size chart. Click on the “Change position” button to open an instruction popup and follow the instructions.
Hover your mouse and choose the place you want on the product page.
After selecting a position, our app will automatically get the ID or Class of your selected display position. Then, you should choose to display the size chart above or below the position you selected on the product page.
Click on “Save” button to finish.
Let see how it display on the storefront!
If your Shopify store is using Online Store 2.0 theme, you will need to enable the size chart block to display it on the storefront:
- Go to “Online Store” in your Shopify Admin Panel > On your “Current theme” select “Customize”.
- In the bottom left corner of the screen select “Theme settings” > click on “App embeds”.
- Enable “Size chart app” and “Save”.