There are two main methods to display multiple size charts on a single page:
Method 1: Using the Size Table Editor Settings
-
Assign Charts to the Same Product or Tag
- Link the size charts to the same product(s) or tag(s). This will cause all size charts to appear in a pop-up modal on the product page, arranged by creation time.
- Link the size charts to the same product(s) or tag(s). This will cause all size charts to appear in a pop-up modal on the product page, arranged by creation time.
-
Reorder Charts by Setting Priority
- To change the display order, use the Advanced settings for each chart and adjust the priority. For example, if you have charts A, B, and C but want the order to be B, A, C, do the following:
- Open Chart A and set its priority to 1.5.
- Open Chart C and set a higher priority, such as 2.
- Leave Chart B at the default priority of 1.
- To change the display order, use the Advanced settings for each chart and adjust the priority. For example, if you have charts A, B, and C but want the order to be B, A, C, do the following:
-
Inject Charts Separately
- If you'd like the charts to be injected separately on the page rather than in a single modal, go to the "Advanced settings" for each chart and find the Special Injection Setting. This will allow you to manage the charts' display independently.
- If you'd like the charts to be injected separately on the page rather than in a single modal, go to the "Advanced settings" for each chart and find the Special Injection Setting. This will allow you to manage the charts' display independently.
Method 2: Use Embedded Chart Snippets
-
Obtain Embed Code for Each Size Chart
- Each size chart has a unique ID. To embed charts individually:
- Go to the Sizing Dashboard and locate Chart B.
- Click on More Actions and select Get embed size chart snippet.
- Repeat the same steps for Chart C.
- Each size chart has a unique ID. To embed charts individually:
-
Configure Embed Properties
- In the pop-up window, select the desired properties for the chart.
- In the pop-up window, select the desired properties for the chart.
-
Insert Code into the Product Page
- Go to Online Store > Theme, from your Published theme, click on More Options, and select "Edit Code."
- Copy the generated embed code and paste it into your theme’s product page liquid file where you want the chart to appear.
- Repeat the process for each additional chart, like Chart C, ensuring the placement and properties match your design preferences.
- Go to Online Store > Theme, from your Published theme, click on More Options, and select "Edit Code."
If you need help implementing these steps, don’t hesitate to contact our support team. We’re happy to assist!