Welcome to Size Chart: Easy size guide App

Size Chart is a simple, visual drag & drop size chart builder for your Shopify store. With this app, you can freely create any type of size chart for multiple kinds of products such as clothing, shoes, accessories, bags, stationery, etc with any size chart elements like size chart table, image, video… to create a size chart in your style.

Thanks to Size Chart, you can add unlimited size charts and display them wherever you want on the product page to provide more information about sizes and detailed descriptions for customers to know how to measure and choose the right size for them.

Within this document, we will describe the installation, creation, and setting up of the Size Chart app process.

We did our greatest to create this manual info to be presented in a very straightforward, simple manner. But if you have any questions that are beyond the scope of this documentation, please feel free to contact us via our email address: contact@etssoft.net

Install Size Chart App

Step 1: Navigate to Size Chart app in the Shopify App Store by clicking on this link: https://apps.shopify.com/size-chart

Step 2: Click on “Add app” button >> Log in to your Shopify store and authorize the app in your Shopify admin.

Step 3: And you’re ready! Your newly installed app will appear in the Apps section of your Shopify Admin.

Create a new size chart

Click on the “Size Charts” tab at the sidebar to navigate to the “Size Charts” listing page.

Click on the “Add Size Chart” button at the top right corner of the page to open the “Add Size Chart” popup.

You can easily create a new size chart with 5 pre-designed templates or you can create a custom size chart as you want with a blank size chart.

Let create a new “Blank Size Chart” for example!

Step 1: Size chart layout

  • Fill in the “Size chart title”. Enable “Show size chart title” if you want to display this title on the storefront.
  • Click on the button “Add size chart content”.

  • Select content type: there are 12 types of chart content and presentation styles for you to choose from table, title, text, image and text, 2 images, single image, video, to space, divider, tabs, accordion, HTML.

  • You can delete, duplicate or edit the chart content as you wish.
  • Continue adding chart content and customize its elements until you complete your size chart.

  • Click “Next” to move to the next step.

Step 2: Decoration

(1) Select display type:

The app provides 3 different display styles for the size chart: Size chart button, Size chart block, and Floating button. When you click on each type, you can see its display preview, then choose the display type that matches the size chart and product for the best effect.

(2) Button setting:

  • You can customize the label of the size chart button and choose an icon for it from the 5 provided icons or custom icons by uploading files.
  • Select a position for the button.
  • You also can change the position of the button by filling the distance you want on the input fields.

(3) Button style:

You can freely customize the color for every size chart button element in this section, for example, button background, button border, button text & icon, etc.

(4) Layout style:

Feel free to customize the layout for all the size chart elements by filling the width, height, box padding, border width, border radius, shadow size, and choose the color for text and background.

Step 3: Product to display size chart

You can choose to display the size chart for all products or only for specific products by searching for suitable products using the smart filter provided by this app.

You can add conditions to filter and easily search for products that match the conditions you want to apply a size chart.

Now, it’s time to choose a position to display the size chart. Click on the “Change position” button to open an instruction popup and follow the instructions.

Hover your mouse and choose the place you want on the product page.

After selecting a position, our app will automatically get the ID or Class of your selected display position. Then, you should choose to display the size chart above or below the position you selected on the product page.

Click on “Save” button to finish.

Let see how it display on the storefront!


IMPORTANT NOTE:

If your Shopify store is using Online Store 2.0 theme, you will need to enable the size chart block to display it on the storefront:

  • Go to “Online Store” in your Shopify Admin Panel > On your “Current theme” select “Customize”.

  • In the bottom left corner of the screen select “Theme settings” > click on “App embeds”.

  • Enable “Size chart app” and “Save”.

Other Settings

1. Document

Click on “Document” to open this app documentation when needed.

2. Your Profile

Your store info and app info will be here. When you install the app, it will automatically connect and save your store’s information here.

3. Help

If you have any problem using the app, you can navigate to “Help” on the sidebar to contact the web developer. We are happy to support you solve the problems related to this app whenever you need it.

Uninstall app

Installation of our Size Chart app automatically injects certain code snippets into your Shopify theme in order to make the installation process fully automatic and make our app work fast and smoothly.

Unfortunately, when you uninstall Size Chart, we lose programmatic access to your store, thus we cannot remove the code snippets that we injected automatically.

Although these code snippets that we add do not harm your store even after the uninstallation process, you might want to remove them anyway, the following guide will walk you through this process.

Step 1: Go to “Online store” in your Shopify Admin Panel > On your “Current theme” select “Actions” -> “Edit Code”

REMOVE ASSET FILES

Step 2: In the “Assets” folder, delete the following files: “ets_sc_app.css”, “ets_sc_config.js”, “ets_sc_app.js”

REMOVE PICTURES

Step 3: Delete all image files that have “ets_sc_” prefix.

REMOVE CODE IN OTHER PLACES

Step 4: In the “Snippets” folder: delete file “ets_sc_assets.liquid”.

Step 5: In the “Layout” folder: open “theme.liquid” file then find and delete this line “{% include ‘ets_sc_assets’ %}”.