Adding a Size Chart to the eComm Performance Theme

Adding a Size Chart to the eComm Performance Theme

Supported Versions: The details shared in this article apply to the updated version of eComm Performance. 



Making Use of the Size Chart Feature

The eComm Performance theme includes a 'Size Chart' feature that you can have in your 'product form' on the product page. If you are selling products that come in different sizes, this feature can help customers decide which size to order by including a chart with details on the product sizes and measurements. 
After a 'Size Chart,' a 'Size Guide' link will be shown on the right-hand side of the product price on the product page. You can change the name of the link in 'Language Files.' This can be located by going into your Shopify Admin, go into Online Store > Themes > Actions > Edit Languages. Once you're in the Language Files, go into 'Products' and go to Product > Size Chart, and then enter your preferred text here.

Create a Single Size Chart

You can create a size chart, but adding a new page to your shop! Go into your Shopify Admin > Online Store > Pages > Add Page.

You can customize this page to include text and/or images. A grid or a table is also commonly used to showcase sizing.

Using One Size Chart for All Products

Suppose you only have one sizing guide that will apply to all of your merchandise, and you want that chart to be accessed from each product page. In that case, you can enable it on your Product pages (after it has been created) by going into Customize (your Theme Editor) > Theme Settings > Product Grid > Size Chart.
By doing this, your 'Size Chart' link will be added to all the product pages in your online store.

 

Creating Multiple Size Charts for Multiple Products

If you have needed multiple size charts for different products or have products that don’t require a size chart, you can note which products to use in this alternative way.
Go into your 'Size Chart' Page and take note of the 'handle' for the page.

After that, go to a product where you want that 'size chart' to be used, and add a new tag with the following format:
meta-size-chart-handle-name
(where “handle-name” = the handle of the page for a particular size chart; in our example, the page handle was "Size Chart")

Repeat this for the products you want to use a specific size chart with.
After this, go into Customize (your Theme Editor) > Theme Settings > Product Grid > 'Size chart' and remove the selected size chart or leave this setting empty.
​
By doing this, you will add a 'Size Chart' link only to the product pages that have the ‘meta-size-chart’ tag applied to them; products that don't have the meta tag will not have a size chart link.

Mobile Device Layout

When the 'Size Chart' is being viewed on a mobile device, it will open the same as when viewed on a desktop. When the Size Chart is clicked, a pop-up expands to take up the mobile screen.


    • Related Articles

    • Footer Guide eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.  Using the Footer Section The eComm Performance theme has a customizable 'Footer' section that lets you add up to 5 vertical columns. You can ...

    • Recommended Products in the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Adding Recommended Products You have the option to enable Recommended Products on all product pages in the eComm Performance theme.  Shopify has ...

    • Facebook Pixel Event Tracking and the SSD Theme

      Tracking Sales (conversions) using the Facebook Pixel works in all versions of the SSD theme if you follow these steps from Shopify. Compatibility Notes In situations where your marketing strategy requires detailed page visit tracking we would ...

    • FAQ Template - eComm Performance Theme

      The theme will need to be published to use the 'page.faq'  template. The templates that you can select are limited to the templates available in the currently published theme.  Supported Versions: The details here apply to the most recent version of ...

    • Collection List Section in the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.   Using the Collection List Section The eComm Performance theme features a 'Collection List' section that is available on the homepage. The ...