Debut Theme - Add Hover Function to Products - No css.liquid files in Assets

daniellesilvie
New Member
2 0 0

Hi there! 

Hoping that someone can help with this as I can't seem to get the usual suggestions working on my Debut theme!

I'm trying to get the secondary hover image over my products, but I can't get it functioning at the moment. I've tried https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo... and also the updated walkthrough one on YouTube but no joy. 

Both tutorials mentioned copying code into Assets/theme.css.liquid, but I've got no css.liquid files in my Assets directory. I tried creating a new one called hover.css.liquid, but that didn't work either. 

The code misaligned all of my current products and made the formatting look strange, so I've removed my changes for now. 

Can anyone give me some pointers on how to achieve this? 

Many thanks!

0 Likes
Bluish
Shopify Partner
555 78 89

Hi @daniellesilvie 

Are you sure you are looking in the right place, did you happen to rename it?

Creating a .css.liquid won't do anything unless you mention this file in your theme.liquid.

 

Bluish_0-1611526142173.png

 

If my answer was helpful please Like and Accept my post as the Solution
0 Likes
daniellesilvie
New Member
2 0 0

Hi!

no changes to any of the code up until now. I’ve only got a theme.css file there, but no theme.css.liquid unfortunately.

if I make a new file (hover.css.liquid), what would I need to place in my theme.css file to reference it?

sorry, I’m new to coding so just trying to get my head around why my default Debut theme doesn’t include these files in the Assets folder

0 Likes
Bluish
Shopify Partner
555 78 89

Hi @daniellesilvie 

Theme.css file is the file. You don't need a hover.scss.liquid file, just place the code at the bottom of your theme.css file.

If my answer was helpful please Like and Accept my post as the Solution
0 Likes