Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Show color swatch on collection page instead of text

Solved

Show color swatch on collection page instead of text

blakelyhi
Explorer
97 1 5

Hi, using Stiletto Theme and I want to show the circle product swatches as default instead of the word "3 colors", currently the circle swatches only appear on hover and I'd like for them to appear immediately and remove the text above it for all products..

URL: https://afca7f-2.myshopify.com/

 

Screenshot 2023-11-12 at 6.33.09 AM.png

Accepted Solutions (2)

fadi_yousif
Shopify Partner
345 43 67

This is an accepted solution.

To show the color swatches at all times, navigate to assets --> theme.css and remove opacity: 0; on line 9616.

 

To remove the text, you need to find and delete the <h5> element with a class of product-item__swatch-count. Another option would be to hide the element by adding the following code to the end of theme.css:

h5.ff-body.fs-body-50.product-item__swatch-count {
    display: none;
}

If the above doesn't work, try this:

h5.ff-body.fs-body-50.product-item__swatch-count {
    display: none !important;
}

 

Freelance Shopify Developer


Did I help? Leave a tip!

View solution in original post

theycallmemakka
Shopify Partner
1737 421 439

This is an accepted solution.

Hi @blakelyhi ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
.product-item__variant-info, .product-item__variant-info{
    opacity: 1!important;
}
</style>

 

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 5 (5)

fadi_yousif
Shopify Partner
345 43 67

This is an accepted solution.

To show the color swatches at all times, navigate to assets --> theme.css and remove opacity: 0; on line 9616.

 

To remove the text, you need to find and delete the <h5> element with a class of product-item__swatch-count. Another option would be to hide the element by adding the following code to the end of theme.css:

h5.ff-body.fs-body-50.product-item__swatch-count {
    display: none;
}

If the above doesn't work, try this:

h5.ff-body.fs-body-50.product-item__swatch-count {
    display: none !important;
}

 

Freelance Shopify Developer


Did I help? Leave a tip!

blakelyhi
Explorer
97 1 5

Thank you, the code worked beautifully but I'm not sure I'm locating the right line of code to remove the opacity... my 9616 line doesn't show anything like that. Would it be my line 9611? Attaching an image. 

 

Screenshot 2023-11-12 at 8.52.32 AM.png

fadi_yousif
Shopify Partner
345 43 67

Yes, line 9611 in your case! It was listed at 9616 in my browser.

Freelance Shopify Developer


Did I help? Leave a tip!

theycallmemakka
Shopify Partner
1737 421 439

This is an accepted solution.

Hi @blakelyhi ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
.product-item__variant-info, .product-item__variant-info{
    opacity: 1!important;
}
</style>

 

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

MRamzan
Shopify Partner
392 3 36

You can try this solution:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112