Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

Add Available Sizes To My Product Grid On Shopify Store

Aug 25, 2022Nov 16, 2022

This modification adds product sizes to the product grid/collection page of your Shopify store.

Editing your theme code to add this feature

  • In the Template directory, create a new file called collection.available-size.liquid and copy the collection.liquid from the same directory.
  • In the Snippets directory, find the product-card-grid.liquid file and add the following code at the specific place where you want to show the sizes, here we’ve added the after the price. Price code looks like this {% include 'product-price', variant: product.selected_or_first_available_variant %} :
{% if collection.template_suffix == "available-size" %}

<p>
{% for option in product.options %}
{% if option == 'Size' %}
{% if product.options_with_values[0].name=="Size" %}
{% for variant in product.variants %}

{{ variant.option1  }}

{% endfor%}
{% elsif product.options_with_values[1].name=="Size" %}
{% for variant in product.variants %}

{{ variant.option2  }}

{% endfor%}
{% else %}
{% for variant in product.variants %}

{{ variant.option3  }}

{% endfor%}
{% endif %}

{% endif %}
{% endfor %}
</p>
{% endif %}
  • In the Theme admin, go to a collection and set the template to collection.available-size, it’ll enable the available sizes in the product grid in the collection page

Congrats you’ve completed this feature

Posted in Shopify Tutorials

Post navigation

Prev Now You Can Run Your Fashion Boutiques On Shopify
Next 10 Best Shopify Themes For Your eCommerce Store In 2022

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Shopify vs Squarespace: Which Is Best for Your Business in 2023?
    Shopify vs Squarespace: Which Is Best for Your Business in 2023?Jan 23, 2023
  • Shopify Hydrogen and Oxygen Supporting Shopify Storefront
    Discover Shopify Hydrogen and Shopify Oxygen: The Future of Shopify Storefront ShopifyJan 19, 2023
  • Magento To Shopify Migration – A Detailed Guide
    Magento To Shopify Migration – A Detailed GuideJan 16, 2023
  • How to use Shopify API Integrations with other tools or platforms?
    How To Use Shopify Api to Build Custom Integrations With Other Tools Or Platform?Jan 7, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved