Adding a Popup Size Chart to Product Pages

Create a sizing guide for multiple products in your BigCommerce store using selection criteria
The Size chart link/button that opens the popup will be automatically added to all pages of the selected products


Open the Prikid Size Chart App

Open the app (it must be already installed. See how to install Prikid Size Charts App

To do this click on Apps in your Bigcommerce admin panel and then click Prikid Size Charts:


Open Prikid Size Charts App for BigCommerce


The main page of the application will be loaded where you can see all the size tables you have created

Add a new size chart


Click Add new button:


Click Add new size chart button


You will proceed to the first step of creating a sizing guide - setting the product segment to which this size table will be linked.


Products Filter - Prikid Size Charts App for BigCommerce


In essence, it is a designer of conditions that you can flexibly customize. This size chart will appear on product pages that meet the specified conditions.

{info} Please note that even for those products that you will add in the future, the size chart will also appear, if these products meet the conditions you have set

You can flexibly design filters for product selection using different types of conditions. For example, you can specify a list of specific products or categories or brands. Alternatively, you can choose products that contain a word in the name. You can create combinations of conditions using AND/OR operators. You can even use regular expressions if you are familiar with them.


Set products selection criteria

For example, you would like to create a size chart for those items in the Women's T-Shirts category that contains the word beautiful.

{warning} Most likely, there are other product and category names in your store, so use them

To do this, in the filter designer, select the type of condition Product category is, specify in list in the next field


Select product category - Prikid Size Charts App for BigCommerce


Begin typing the category name in the third field. A drop-down list of autocomplete will appear in which select Women's T-Shirts


Start typing the category name - Prikid Size Charts App for BigCommerce


Now click the AND button, in the new line select the type of condition Product name, in the next field - contains. And type the word beautiful in the third field


Type part of the product name - Prikid Size Charts App for BigCommerce


Preview products that meet criteria

You can now preview the products that meet the conditions by clicking the Preview button


Preview selected products - Prikid Size Charts App for BigCommerce


In our case, there are only two products that meet these criteria.

Ok. Moving on.
Click Esc to close the preview window, and then click Next in the bottom right corner.

Create sizing chart layout

In this step, you will see a layout editor where you can, using different blocks, create a size chart page that will be displayed to your site visitors


Sizing guide layout editor - Prikid Size Charts App for BigCommerce


To simplify this example, let's use the template by clicking the Examples button and selecting the T-shirt size chart from the drop-down list


Select T-Shirt size chart from examples - Prikid Size Charts App for BigCommerce


This action will populate your layout with sample data:


Sizing chart T-Shirt sample - Prikid Size Charts App for BigCommerce


For our example, this is enough.

Save and publish the size chart

Click the Next button and give a name for your size chart (just for internal use


Give the name for the size chart - Prikid Size Charts App for BigCommerce


Click Save & Publish

Great! You just created your first size chart.
Let's check if it works. As you remember we have two products that apply our conditions.

Check the size chart on product page

Now we can go to their public pages, and check if the size chart will appear


Size chart link appears on the product page - Prikid Size Charts App for BigCommerce


As you can see, the link Size chart appeared near the size selection section.
Let's click on it


Size chart popup on the product page - Prikid Size Charts App for BigCommerce


Voila!
We have opened our size chart. The same thing will happen on the page of our second product.


Great job! It's time to try it on your own!