Adding Size Chart

Solved
Highlighted
Excursionist
27 0 3

I'm trying to add a size chart to my site for certain products.  I've followed the tutorial here: https://shopify.dev/tutorials/customize-theme-add-size-chart and I've made my page, but now that I am at the step of adding the code, I don't know what I am doing.

I'm using the Supply theme and I do have some apps, such as Custom Product Options by W3, installed, which add extra noise to the coding.  The first step is that I am supposed to paste some code above the Add to Cart button on my product-template.liquid file.  Where exactly is the add to cart button in the code?

0 Likes
Highlighted
Shopify Partner
1435 194 488

This is an accepted solution.

Go into product-template.liquid and Ctrl + F and search for:   (class="payment-buttons)

Without the parentheses, it should be around line 216, but Ive made some changes to my default supply theme so it may be a little off. You'll be looking for this:

 

        <div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
          <button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
            <span class="icon icon-cart"></span>
            <span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
          </button>

          {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        </div>

You'll probably want to make a div or something right above it so that it stacks instead of going right next to it:

 

<div>
<!-- Your chart code here -->
</div>        
       <div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
          <button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
            <span class="icon icon-cart"></span>
            <span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
          </button>

          {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        </div>
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Excursionist
27 0 3

Thanks so much!  That was very helpful!! 

0 Likes