How can i show the sold out sizes with a strikethrough on the product page - using dawn theme
Topic summary
A user asks how to display sold-out product sizes with a strikethrough on the product page in Shopify’s Dawn theme.
Proposed Solution:
- One response suggests modifying the
product-template.liquidfile in the theme’s Sections folder - The approach involves adding custom code to check variant availability and apply a
sold-outclass to unavailable options - CSS styling would add
text-decoration: line-throughand gray color (#999999) to sold-out sizes
Current Status:
- The solution appears problematic—much of the provided code is displayed in reverse/garbled text
- A third participant questions whether the solution worked, noting the instructions don’t make sense and don’t match their Dawn theme code
- The discussion remains unresolved with concerns about the accuracy and applicability of the suggested fix
To show sold out sizes with a strikethrough on the product page using the Dawn theme, you can modify the product-template.liquid file in your Shopify theme. Here’s how you can do it:
-
In your Shopify admin, go to Online Store > Themes > Actions > Edit code.
-
Open the
product-template.liquidfile in the Sections folder. -
Find the code that generates the size options for the product. It may look something like this:
liquid
{% if variant.title contains 'Size' %} <label for="SingleOptionSelector-{{ forloop.index0 }}"> {{ variant.title }} </label> <select class="single-option-selector" data-index="{{ forloop.index }}" id="SingleOptionSelector-{{ forloop.index0 }}" name="{{ variant.title | handleize }}"> {% for value in variant.options %} <option value="{{ value | escape }}"{% if variant.selected_options[forloop.index0] == value %} selected="selected"{% endif %}> {{ value }} </option> {% endfor %} </select> {% endif %}
- Replace the above code with the following code:
{% if variant.title contains 'Size' %} <label for="SingleOptionSelector-{{ forloop.index0 }}"> {{ variant.title }} </label> <select class="single-option-selector" data-index="{{ forloop.index }}" id="SingleOptionSelector-{{ forloop.index0 }}" name="{{ variant.title | handleize }}"> {% for value in variant.options %} {% assign variantAvailable = false %} {% for variant in product.variants %} {% if variant.title contains value and variant.available %} {% assign variantAvailable = true %} {% break %} {% endif %} {% endfor %} <option value="{{ value | escape }}" {% if variant.selected_options[forloop.index0] == value %} selected="selected"{% endif %} {% unless variantAvailable %}disabled="disabled" class="sold-out"{% endunless %}> {{ value }}{% unless variantAvailable %} - Sold Out{% endunless %} </option> {% endfor %} </select> {% endif %}
- Save the file.
This updated code checks each variant to see if it contains the size option and is available. If the variant is not available, it adds the disabled and sold-out classes to the option tag, which allows you to style it with CSS. The sold-out class adds the strikethrough to the size option.
To style the sold-out sizes with a strikethrough, add the following CSS code to your theme’s stylesheet:
css
.sold-out { text-decoration: line-through; color: #999999; }
This code sets the text-decoration property to line-through and the color property to #999999 for the sold-out class.
After adding the code and the CSS, the sizes that are sold out will be displayed with a strikethrough on the product page.
Did this help you? It doesn’t make any sense to me - and I do not have any of this in my dawn theme code.