Pages

Turbo templates: Pop-up block

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.

click_pop-up_block_link_to_reveal_modal_size_guide_or_other_page.png

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.

size-chart-page.png

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.

select_products_then_default_to_adjust_the_base_template.png

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)

  1. In your Shopify admin, open Settings

    click_settings_in_shopify_admin_to_access_metafields.png
     
  2. Open Metafields 

    open_metafields_in_settings.png

  3. Select Products

    select_products_from_metafield_options.png
  4. Click Add metafield definition
  5. Add a Name and Description for internal reference, then click Select content type
  6. Under Reference, select Page

    select_page_as_the_content_type.png
  7. Save

    add_name_and_title_then_select_a_content_type_then_save.png
  8. Head into each product and assign a page to the newly created metafield

    add_the_size_guide_for_each_product_s_metafield.png

  9. Return to the theme editor to open the product page template and add a Pop-up block
  10. In the block's settings, click Connect dynamic source beside Page

    click_connect_dynamic_source_instead_of_select_page.png

  11. Select the metafield with the name added in step 6, then Connect

    connect_the_pop-up_page_metafield_to_the_dynamic_source.png

  12. 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.

 

Related articles