How to Add Individual Effects to Image Links on Collections Page?

Highlighted
Excursionist
78 0 3

I've been exploring this for hours and can't quite find a solution. I want to add different hover effects (opacity, color) to image links on our Collections page. From the collection-grid-item.liquid file, here is the relevant image link class:

  <a href="{{ collections[collection_handle].url }}" class="collection-grid__item-link collection-collage__item-wrapper">

I'm unsure how to identify the unique products with different hover effects given that they're all governed by rules from one class. I'm assuming I need to manually assign some class to each product (we only have four products) in the liquid file which I can then refer to in the CSS, but is there a more efficient/cleaner solution?

0 Likes
Highlighted

Hi again

 

If you want to manually assign your hover effects to products, best would be to add a new css class or id to each product image. A simple neat solution would be to use a unique attribute for the hover effect, such as product id or a specific tag if you want it to apply to multiple products. You can add this using liquid by add the following to each image:

id=“{{ product.id }}”

Similarly, if you’d prefer to use a class, add that liquid output inside the class quotation marks, separated from other classes by a space. Then at the bottom of your theme.scss.liquid file, add a new css style as follows:

#yourproduct_id {
style you want to apply: setting;
Etc: etc;
}

The # is used for identifying id, but if using a class, use a “.” instead.

 

If you want to automate the css side of things as well, you would need to know how to assign effects based on a tag or some other attribute and could use javascript to build in this logic as well.

 

Hope this answers your question. If not, you have my email!

1 Like
Highlighted
Excursionist
78 0 3

Hey Walter, I understand the second part but I still don't understand the first part. I located Product ID for each of my products, but I don't know where in the collection-grid-item.liquid file to assign the class.

 

I tried pasting 

id=“{{ product.id }}”

at the bottom of the product-grid-item.liquid as a test (before closing div) and then applying a test effect in the CSS theme file and it didn't work. 

 

I am actually taking front-end classes online, just not advanced enough to troubleshoot this stuff myself yet!

0 Likes
Highlighted

So you want to add it into the declaration of the image link itself or the container that it lives in. Therefore, if this is for an image of your product, which is rendered using the product-grid-item.liquid file, search the file (using CTRL+F) for the img and then trace upwards to find it's link or wrapper. If you want to add it to the link, then find the link reference which should look something like:

<a class="grid-product__image-link" href="{{ product.url | within: collection }}">

Then add the ID inside this a reference, like so:

<a id="{{ product.id }}" class="grid-product__image-link" href="{{ product.url | within: collection }}">

Now you have successfully "tagged" that specific link with it's own unique ID. So you can add a CSS selector for that specific ID in your theme.scss.liquid as described previously. Remember, if you are wanting to add it as an effect rather than a permanent change, you will want to use CSS attributes such as hover, focus, after, etc, not just the identifier itself otherwise it will apply the changes when the page loads.

0 Likes
Highlighted
Excursionist
78 0 3

Ok so I tried a couple things and none worked for me. I tried adding the ID for each product without changing href and nothing changed on-page.

I tried adding ID for each product and changing href to product links and got a syntax error output.

I tried adding ID for each product and changing href to "{{ product link | within: collection }}" and got a syntax error output (as expected, just figured I'd try on this one).

 

For all three I had a test CSS hover effect of "background-color: red" for one of the IDs.

 

I think that the image link section in the liquid file is the correctly identified one to institute these changes so I'm confused about why this is happening.

0 Likes
Highlighted

Hi

 

Sorry you are battling with this code change. It is a bit more of an involved change, so without experience it is likely you may not get this right. The only way I could reasonably help you further would be to have a look at the changes you’ve tried to make on your file and see exactly where it may have gone wrong. There is not enough detail or context to help further in another way, unfortunately. If you would like me to have a look into your code, please send me a private message or email to discuss.

 

All the best,

Walter

0 Likes
Highlighted
Excursionist
78 0 3

You still have full permissions to the site through Shopify. The theme I use to test this is the "Copy" theme, not the live one.

 

Definitely no obligation to check my code, but if you get a second over the weekend or anything that would be awesome! Really appreciate all the help but again don't feel obligated at all if it takes you more than a couple mins.

0 Likes