How can I hide unused variant pills in Dawn 8.0 with CSS?

Store Design
, ,
1

Hello, i would like to hide variants pills that doesn’t refer to any product : it is currently crossed out but I want it to not appears at all since this pills variante (canvas) doesn’t exist in 70x70cm. (Im on Dawn 8.0)

is it possible to extend it to every variant pill that is not related to any product not juste manually select which pills to hide ?

is it possible with css ?

thank you for your time and consideration !

2

YOu want to hide the variant box which are not available? Am I right?

3

@Orlastra you can prefer the technique which over here apply for the unused variant pills which is right now appear with the cross marked you can hide the same way as you are doing it to marked it as cross. Might be below css helpful for you :

li.nt-swatch.swatch_pr_item.pr.bg_css_medium.nt_soldout {
    display: none;
}

class might be changed based on theme . try above one otherwise share your store url.

4

To hide variant pills that don’t refer to any product in the Dawn theme, you can use CSS to target and hide those specific elements. Here’s an approach you can try:

  1. From your Shopify admin, go to “Online Store” and then “Themes”.
  2. Find the Dawn theme and click on “Actions” > “Edit code”.
  3. In the theme code editor, navigate to the “Assets” folder and open the “theme.css.liquid” file.
  4. Scroll to the bottom of the file and add the following CSS code:
.product-single__variant:not(.variant--available) {
  display: none;
}
​
5

Hi, yes it’s not available but not because it’s out of stock, it is because it just don’t existe, like for other type (poster, metal poster etc) there is a 70x70cm size but not for Canvas

6

Thank you for your response I didn’t find the css file but there is one directly when you customise the template of your store. The css didn’t work because apparently .product-single__variant is not recognised so I tried with the suggestion :

.product-variant-id:not(.variant–available) {
display: none;
}but still nothing

my store URL is Orlastra.com

7

@Orlastra , Please add the below line of code at the end of your base.css file.

body .product-form__input input[type=radio].disabled+label {
    display: none;
}

let me know, if the above given CSS will not work.

1 Like
8

YOOOOO IT WORKED THANK YOU SO MUCHH !!!