Add picture on collection page

Solved
Highlighted
New Member
3 0 0

I am looking for a way to add an image to my collection page which possible links to other pages in store. See attached image for clarification. 

 

0 Likes
Highlighted
Shopify Partner
1441 194 501

Thats a little vague but it's entirely possible. You would edit your collection.liquid file, find the end of your product loop, and depending on which collections you want to have an image you can use if statements to target them:

 

{% if collection.handle == "dress-shirts" %}
<a href="/collections/casual-shirts">
<img src="path-to-casual-shirts.jpg">
</a>
{% endif %}

Something like that. Probably would need more information for a more specific answer.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
3 0 0

I would like to implement something like that on my collections page.

For example in the waistcoat collection page https://www.debonairsuave.com/collections/mens-waistcoat. I would like to have a link to my shirts or suits. 

I don't know if I am making myself clear. Sorry. Btw I don't know too much about coding. So how do I call the picture as you did with the

<img src="path-to-casual-shirts.jpg">

 ?

0 Likes
Highlighted
Pathfinder
121 6 8

you want only in one collection or all collections ? 

and you want just like the one on attached file or you want an image that when click on it it open your product page on a new windows or same windows for ex

?

 


@McBonn_Njankenj wrote:

I would like to implement something like that on my collections page.

For example in the waistcoat collection page https://www.debonairsuave.com/collections/mens-waistcoat. I would like to have a link to my shirts or suits. 

I don't know if I am making myself clear. Sorry. Btw I don't know too much about coding. So how do I call the picture as you did with the

<img src="path-to-casual-shirts.jpg">

 ?


 

0 Likes
Highlighted
Shopify Partner
1441 194 501

This is an accepted solution.

First you would have to upload the picture to shopify. That is in Settings on the bottom left of the screen in the Admin.  So click settings, then navigate to files. You can upload a file there, once it's done, it will show a thumbnail of the image and will have a link next to it that you can copy and put in the src attribute of the image tag.  The links appear in this format:

 

https://cdn.shopify.com/s/files/1/0561/0261/files/name-of-your-image.jpg?18042014377796136824

This is the path you need. If I were you, I'd get a little more comfortable with finding where you need to put things first. I like to recommend this video series to anyone who hasn't really worked much in Liquid or the code portion of your shopify store at all. It's free, you just have to create an account on SkillShare:

 

https://www.skillshare.com/classes/Shopify-Essentials-for-Web-Developers-From-Store-Setup-to-Custom-...

 

Also, before making any edits to your code, I suggest backing up your theme. You can do this by going to Online Store > Actions > Duplicate and just name it Store Backup or something. So go through some of those videos, then try to find where you need to put the code. Then if you have more questions come back here and I'll try to shed any light I can on them.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
3 0 0

You are the best! Thanks a lot, I appreciate your valuable time

0 Likes
Highlighted
New Member
2 0 0

hey i have same problem do you know how

0 Likes
Highlighted
New Member
2 0 0

where do  i put this code can you please tell that too ?

 

0 Likes
Highlighted
Excursionist
19 0 4

Hi, did you figure out where to put 'src attribute of the image'? 

Have same issue

 

0 Likes
Highlighted
Excursionist
19 0 4

hi, please advise where do i  put 'src attribute of the image' 

0 Likes