How to display available size on collection page

[GeminiAtelier]

Hi,

I am trying to display the available sizes for the products on the collection pages, so the customer does not have to click the product to see if the size is available.

Example below:

Thank you,

[dws_pvt_ltd]

Hello @GeminiAtelier, Please share your store URL and password.
So that I will check and let you know the exact solution here.

[GeminiAtelier]

Hi,

Thank you, the store url is www.geminiatelier.com and there is no password.

[dws_pvt_ltd]

Hello @GeminiAtelier, It works with the filters user applies In stock filter enable and can see only in stock available products only.

It works perfect i think!!.

[GeminiAtelier]

Hi,

I do not wish the use the filter, I want a solution where the available sizes are written under the products on the collection pages and the "in stock" sizes are highlighted. As on the images attached below:

 

[Huptech-Web]

Hey @GeminiAtelier, here are the code and steps to how to add the code 

1. Update the main-collection-product-grid.liquid file

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your main-collection-product-grid.liquid file. and added your code the same as the Image After <li> and before <ul>

{% if request.page_type == 'collection' %}
  {% if product.variants.size > 1 %}
    <div class="variant-selector">
      <form action="/cart/add" method="post">
        <select name="id">
          {% for variant in product.variants %}
            {% if variant.available %}
              <option value="{{ variant.id }}">{{ variant.title }}</option>
            {% else %}
              <option disabled="disabled">{{ variant.title }} - Sold Out</option>
            {% endif %}
          {% endfor %}
        </select>
        <input type="submit" value="Add to Cart" class="add-to-cart-button" />
      </form>
    </div>
  {% else %}
    <form action="/cart/add" method="post">
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <input type="submit" value="Add to Cart" class="add-to-cart-button" />
    </form>
  {% endif %}
{% endif %}

2. Add Styling to Your CSS File

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

.product-card {
  height: auto !important;
}

.variant-selector {
  display: block !important;
  margin-top: 10px;
}

.add-to-cart-button {
  background-color: #333;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.add-to-cart-button:hover {
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
}

 
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you 
K.K

[GeminiAtelier]

Hi,

I have done the changes in the code but it does not show anything on the website. My theme is Reformation.

[kristianh]

Hi, did you find a solution - I have the same wish?