Theme: Warehouse

If you are using the theme Warehouse, you can replace its native Size Chart button with SmartSize's button:

Step 1: Remove SmartSize's App Block (optional)

This step is only necessary if you previously added SmartSize's App Block to your Product template:

1. In your Shopify admin, go to Online Store → Themes → Customize

2. In the Theme Editor, select Product → Default product on the top dropdown

3. On the left pane, navigate to the place where you added SmartSize's App Block

4. Select the App Block and click the trashcan icon to delete it

5. Save your changes by clicking Save on the top right corner

---

Step 2: Add code snippet to your theme

1. In your Shopify admin, go to Online Store → Themes → Customize

2. In the Theme Editor, click  ... → </> Edit code  on the top left corner:

3. On the code editor, select this file on the file explorer on the left: snippets/product-variant-selector.liquid

4. On that file, search for  block-swatch-list and locate this section:

5. Right above that section (block-swatch-list), enter this code snippet:

<div style="display: flex; justify-content: flex-start; align-items: center;">
 <span class="product-form__option-name text--strong">
   {{ option.name }}:
   <span class="product-form__selected-value">{{ option.selected_value }}</span>
 </span>
 <div id="sizefox-container"></div>
</div>

6. You can adjust the with CSS (here is an article explaining how)

#sizefox-container {
  margin-left: 48px !important;
}

.smartsize-trigger {
  margin-top: 0px !important;
}

7. Click 'Save' on the top right corner and go back to your Product page. The size button will now be displayed here: