How to add a custom image to a Collection list - DAWN theme

Store Design
, ,
1

Hello,
I am looking to modify the “collection-list.liquid” section of the home page to add a “custom image” option to each collection in the collection list.

By default, the displayed image of each collection in a “collection list” section, is the image of the collection.
But I would like to be able to load a personal image, for each collection, which will be displayed in the “card” of the collection, instead of the default image of my collection (which I do not want to modify)

It seems not very complicated, but I have to modify several liquid files and I’m stuck here :slightly_smiling_face:
Thanks for any help

support dawn theme collection-list02.jpg
support dawn theme collection-list02.jpg1872×799 169 KB

2

Hi @Univers-d-Ange

You can try to use a multiple-column section instead of a collection list section and then use CSS to customize it instead of editing the code.

Best Regards,

Dan

3

Hello Dan,

Thanks for your idea, but I already tried that and it is not good.

Because the multiple-column section does not have all the features of the “card” of a collection list → shadows or other nice hover effects of the DAWN theme.
It is for that, that I think I must keep the collection-list and modify some code to add a custom image to the cards.

Thanks and congrats for Ryviu.

4

Hi @Univers-d-Ange ,

Seems you are a developer too, must be well versed in HTML/CSS too.

Request you to refer the below video for collection grid section which is best fit for your requirement.

Hope this will help…

5

Hello, Thank you for your help, but it is not working for my problem.
I just need to add a custom image to each collection block, in my collection-list section of my home
Regards

6

Hi @Univers-d-Ange ,

For that you have to edit the collection list template liquid and its schema.

7

Hello, yes but I don’t know how to solve my problem in the collection-list.liquid file.
Have you an idea, how to add a “loading custom image” in the collection block ?
Thanks

8

add the popilot extention onto your chrome and tell AI what your wanting to do and get AI to create the custom code for you , you might have to copy and paste your collecxtion-list.liquid into the AI so it can read the current code and create what you need from your current code, make sure to tell it that it is for your shopify store, as it knows dam, near everything it needs to know about shopify and the system so it knows what specs and things it needs to run to, iv done this with my collection list, not the images but i created the swipe feature for mobile so it wasnt so heavy and have so many boxs to scroll down befor the next thing, not sure why swipe on mobile on my theme (mr parker) wasnt a defult option but anyway, hope this works for you

9

@Univers-d-Ange ,

You need to add the below schema code in your collection template and code to read the value.

{
 "type": "image_picker",
 "id": "banner_image",
 "label": "Collection Image"
 }