Hi Guys, so basically I want a non app way (Code Only) to hide variants that has 0 stock (Sold-out variants) or would never have that variant.
I am using “dawn” theme.
Topic summary
Goal: Hide out-of-stock (0 inventory) product variants via code-only (no app) in the Dawn theme (Shopify’s default theme).
Progress and attempts:
- Helpers requested store access; the author shared both the live URL and a development product link with password. Dawn v8.0.0 confirmed.
- Suggestions focused on adding custom code in theme.liquid (either before or below ). However, the shared code snippets in replies were missing in the thread capture, and the author reported no change (sold-out options still visible).
Technical details:
- The author prefers a jQuery-based approach and posted a custom script that filters variants by title and a variant_inventory attribute, hides matching size options when inventory <= 0, and disables the submit button while showing a “sold out” notice. The script works in other templates but not with Dawn’s default templates, likely due to differing markup/selectors.
Current status:
- No confirmed solution implemented. Further theme-specific adjustments (correct selectors/attributes in Dawn) or direct store access were suggested. Discussion remains open without a verified fix.
Hey @Haider512 ,
Can you share the link to your store?
Hi @Haider512 ,
If it is for the Dawn theme then,
You can add code by following these steps
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- Paste the below code before on theme.liquid
Let me know you want to implement on more systematic way. For that access to store is required.
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hey @Haider512 ,
Is this the current theme you are working on or are you using a draft theme?
No it’s not working
Is this Dawn theme?
Which product is this? It would be easier to look at. @Haider512
Hey @Haider512 ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Hi @Haider512 ,
Can you try this. This must work.
You can add code by following these steps
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- Paste the below code before on theme.liquid
Let me know you want to implement on more systematic way. For that access to store is required.
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Yes it is Dawn theme version 8.0.0
I am not doing on live store it is on my development store
https://practtt.myshopify.com/products/spikes
password: meucri
There’s only a jQuery code will work because in other templates I use my on code but in default template, it is not working
let productImage = "{{ product.featured_image | img_url: 'master' }}";
let productTitle = "{{ product.title }}";
var variant_style = '14';
var variant_size = '5/16"';
var variant_anodized = 'No';
var anodizedCheckbox = $('#Yes').prop('checked');
var complete_variant_title = '';
let SubmitButton = document.querySelector('#buttonSubmitjuno');
function HideVariants(){
inventory_variant_title = variant_anodized + ' / ' + variant_style;
$( ".custom_variant_hidden option" ).each(function( index ) {
var full_variant = $( this ).attr('variant_title');
if(full_variant.match(inventory_variant_title) == null){
}else{
full_variant = full_variant.split(inventory_variant_title);
full_variant = full_variant[1].split(' / ');
var full_variant_inventory =$(this).attr('variant_inventory');
if (full_variant_inventory <= 0){
$('.size_custom div').each(function( index ){
if($( this ).text() ==full_variant[1] ){
$( this ).css('display', 'none')
}
});
}else{
$('.size_custom div').each(function( index ){
if($( this ).text() ==full_variant[1] ){
$( this ).css('display', 'block')
}
});
}
}
});
}
$(document).ready(function() {
var selected_variant_name = $('.custom_variant_hidden').val();
$(".gauge_custom div").on('click', function(e){
variant_style = e.currentTarget.dataset.value
complete_variant_title = variant_anodized + ' / ' + variant_style +' / '+ variant_size;
HideVariants();
console.log(complete_variant_title);
const optionVariantSelected = pVariants.filter(variant => variant.title === complete_variant_title);
$('.custom_variant_hidden').val(optionVariantSelected.length && optionVariantSelected[0].id || '');
selected_variant_name = $('.custom_variant_hidden').val();
if ((optionVariantSelected[0] != null) || (optionVariantSelected[0] !== undefined)){
if($('.custom_variant_hidden option[value="'+selected_variant_name+'"]').attr('variant_inventory') < 1){
SubmitButton.setAttribute('disabled','true');
document.querySelector('.soldOutVariatn').style.display = 'block';
}else{
SubmitButton.removeAttribute('disabled');
document.querySelector('.soldOutVariatn').style.display = 'none';
$('.custom_variant_hidden').val(optionVariantSelected.length && optionVariantSelected[0].id || '');
}
}else if(optionVariantSelected[0] == undefined){
SubmitButton.setAttribute('disabled','true');
document.querySelector('.soldOutVariatn').style.display = 'block';
}
$('.price-item').text( $('.custom_variant_hidden option[value="'+selected_variant_name+'"]').attr('variant_price'));
})
// END GUAGE
$(".size_custom div").on('click', function(e){
variant_size = e.currentTarget.dataset.value
complete_variant_title = variant_anodized + ' / ' + variant_style +' / '+ variant_size;
console.log(complete_variant_title);
const optionVariantSelected = pVariants.filter(variant => variant.title === complete_variant_title);
$('.custom_variant_hidden').val(optionVariantSelected.length && optionVariantSelected[0].id || '');
console.log(optionVariantSelected[0]);
if ((optionVariantSelected[0] != null) || (optionVariantSelected[0] !== undefined)){
console.log(selected_variant_name);
selected_variant_name = $('.custom_variant_hidden').val();
if($('.custom_variant_hidden option[value="'+selected_variant_name+'"]').attr('variant_inventory') < 1){
SubmitButton.setAttribute('disabled','true');
document.querySelector('.soldOutVariatn').style.display = 'block';
}else{
SubmitButton.removeAttribute('disabled');
document.querySelector('.soldOutVariatn').style.display = 'none';
}
}else if(optionVariantSelected[0] == undefined){
SubmitButton.setAttribute('disabled','true');
document.querySelector('.soldOutVariatn').style.display = 'block';
}
selected_variant_name = $('.custom_variant_hidden').val();
$('span.price-item').text( $('.custom_variant_hidden option[value="'+selected_variant_name+'"]').attr('variant_price'));
})
// END SIZE
this code maybe help you i make the logic if the inventory is <= 0 then it applies and run successfully but not on default templates