The Turbo theme includes a Pop-Up (formerly Size Chart) page block for the Product page. If you are selling products that come in different sizes, this feature helps customers determine which size to order by providing a table or chart with details on your product sizes and any recommended corresponding measurements.
Create a size chart
In the Pages portion of the Online Store, create a new page by selecting Add page.
This page can include text and/or images, and commonly uses some kind of grid or table to present sizing information.
Using a single pop-up for all products
If you only have one sizing guide that applies to all your merchandise, and you want that size chart to be accessible from each product page, once you've created the actual 'size chart' you can enable it on your Product pages by opening Products, then Default product in the page selector.
In the left sidebar, select (+) Add block, then Pop-up. Click to open the block, then Select page to connect the size chart page.
Create different pop-ups for separate products
If you have different size charts for different products, and/or have some products that don’t need a size chart at all, you can make use of metafields or alternate templates.
Using metafields (best option)
- In your Shopify admin, open Settings
- Open Metafields
- Select Products
- Click Add metafield definition
- Add a Name and Description for internal reference, then click Select content type
- Under Reference, select Page
- Save
- Head into each product and assign a page to the newly created metafield
- Return to the theme editor to open the product page template and add a Pop-up block
- In the block's settings, click Connect dynamic source beside Page
- Select the metafield with the name added in step 6, then Connect
- Save
Using duplicated templates (secondary option)
Use the page selector to click Products, then [+] Create template.
Add a Name for your template (e.g. size chart womens tops), then Create template.
In the left sidebar, select (+) Add block, then Pop-up. Click to open the block, then Select page to connect the size chart page.
Save, then go to the Products admin to assign the right products to this new template.
Mobile layout
When viewed on a mobile device, the Pop-up will function the same as desktop. When clicked, a popup expands to take up your mobile screen.