If you are using the theme Symmetry, 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:

In your Shopify admin, go to Online Store → Themes → Customize
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

In your Shopify admin, go to Online Store → Themes → Customize
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/variant-picker.liquid

4. On that file, search for show_size_chart

5. Comment the whole block that starts with {% if show_size_chart %} and ends with {% endif %}

6. Below the commented block, add the following code:

{% comment %} START - Added by SmartSize {% endcomment %}
   <div class="flex justify-between items-cemter">
      <legend class="label">{{- option.name -}}</legend>
      <div id="sizefox-container"></div>
   </div>
{% comment %} END - Added by SmartSize {% endcomment %}

6. The final result is this:

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

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

Step 2: Add code snippet to your theme

Related articles