How to make color swatches only show on hover?

Solved

How to make color swatches only show on hover?

JCeballos
Tourist
3 0 1

Hey all,

 

We are using Glo Color Swatch app with the shopify Streamlined theme and I am looking for a way to make the color swatches show on hover only (in the collections, not on product pages). Currently the product title and price are only showing on hover, but the color swatches are always showing and it looks weird. Any help would be awesome and I can provide any more info that is needed just LMK. 

 

Thanks,

John

Screenshot 2024-10-17 at 10.56.21 AM.png

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
1969 564 566

This is an accepted solution.

@JCeballos,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.globo-product-groups-collection {
    display: none;
}
.grid__item:hover .globo-product-groups-collection  {
    display: block;
}
</style>

If it helps you, please like and mark it as the solution.

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 4 (4)

BSSCommerce-B2B
Shopify Partner
1969 564 566

@JCeballos , could you kindly share your store url?

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

JCeballos
Tourist
3 0 1

This version is not yet published so here is the preview link https://l1fn75yr4i21e93u-81758552351.shopifypreview.com

BSSCommerce-B2B
Shopify Partner
1969 564 566

This is an accepted solution.

@JCeballos,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.globo-product-groups-collection {
    display: none;
}
.grid__item:hover .globo-product-groups-collection  {
    display: block;
}
</style>

If it helps you, please like and mark it as the solution.

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

JCeballos
Tourist
3 0 1

I appreciate you so much!! This worked!