Clickable Collection Image Prestige Theme

Highlighted
New Member
6 0 0

Hello Shopify Community! 

I´ve got a problem with the Prestige Theme ( Version 4.9.3 ) . I am currentley trying to build my online store and want to showcase different collections next to another on my homepage.

Unfortunatley, the Image that I added to the collection is not clickable, only the button or text at the bottom is. 

Do you guys have any Ideas on how my Problem can be resolved ? 

Best Regards, 

Robin  

0 Likes
Highlighted
Excursionist
32 10 8

Hi Robin,

 

First, navigate to the Shopify online code editor. If you haven't done this before, check out this link:

https://shopify.dev/tutorials/develop-theme-getting-started-choosing-an-editor

 

Here, you want to modify the collection-list.liquid file (found in the Sections folder).

 

NOTE: Before editing your theme code, it's important to save a backup of your theme.

 

With the collection-list.liquid file open in the Shopify online code editor, do the following:

 

1. Find the line with:

<div class="CollectionItem__ImageWrapper">

... and add this line of code below it:

<a href="{{ collection.url }}">

 

2. Just a little below that, find the line(s) with:

<noscript><!-- PLACEHOLDER --></noscript>

... and add this line of code below it:

</a>

 

After making these additions, you'll end up with something like:

<div class="CollectionItem__ImageWrapper">
  <a href="{{ collection.url }}">
    <div class="CollectionItem__Image  Image--lazyLoad Image--zoomOut hide-no-js"
      style="background-position: center center"
      data-optimumx="1.4"
      data-expand="-150"
      data-bgset="..."></div>
    <noscript>
      <div class="CollectionItem__Image " style="..."></div>
    </noscript>
  </a>
</div>

 

These additions will wrap the contents of the CollectionItem__ImageWrapper inside a link, so visitors can click the image to navigate to the collection. The code is untested, but I believe it should achieve what you're after.

 

I hope this helps.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes
Highlighted
New Member
6 0 0

Hello ThemuMitch,

Thank you for the quick response. 

Saldly, I can´t seem to find the Code you described under the collection-list.liquid. 

Do you have any other suggestions ? 

Thank you in advance, 

Robin

 

Screenshot.png

0 Likes
Highlighted
Excursionist
32 10 8

Oh I see. In the code editor, could you check if the code is in the collection-item.liquid file (found in the Snippets folder)? If it is, the same steps as before will apply.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes
Highlighted
New Member
6 0 0

It looks quite similar, although it is not spot on. 

Do you think, it is sufficient if i follow the steps you gave me after line 9 ? 

Bildschirmfoto 2020-08-29 um 22.13.13.png

0 Likes
Highlighted
Excursionist
32 10 8

Now we're getting somewhere!

 

Between lines 8 and 9 (under <div class="CollectionItem__ImageWrapper">), add a new line:

<a href="{{ collection.url }}">

... and between lines 26 and 27 (between {%- endif -%} and </div>), add a new line:

</a>

 

That should do it.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes
Highlighted
New Member
6 0 0

Okay, it kind of worked. 

The only slight issue is, that the text is slighty moved upwards. Also the complete area on the right site of the text is not clickable. 

Do you have any suggestion on how that could be resolved ? 

Bildschirmfoto 2020-08-29 um 22.33.01.pngBildschirmfoto 2020-08-29 um 22.35.22.png

0 Likes
Highlighted
Excursionist
32 10 8

Please could you send me a link to your website? I'll try and see what the issue is.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes
Highlighted
New Member
6 0 0

URL: purely-purpose.myshopify.com

Password: trowng

0 Likes
Highlighted
Excursionist
32 10 8

Also, please could you send another screenshot of the collection-item.liquid file with the additions made?

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes