Alternative image for collection list

[KirstyCC]

Hi - I want to use a different image for my collection list as opposed to my collection page.

I’ve created a metafield and added the alternative image but I dont know how to link it.

I’m using the dawn theme

[Moeed]

Hey @KirstyCC

You’ll have to edit the code of this default section, it’s currently coded to show the collection image. The best workout would be to edit that code and add the code of your metafield to display the metafield image.

If you’re not comfortable editing theme files, I’d recommend working with a Shopify developer to get it set up cleanly.

Happy to help if you’d like. Feel free to Connect with me and I’ll get this sorted for you.

Best,
Moeed

[mastroke]

@KirstyCC

let’s try this..

1- Settings → Custom data → Collections

• Type = File (image)

• Namespace/key = something like:

custom.alt_image

2- Edit the core code

Online Store → Themes → Edit code

snippets/card-collection.liquid

3- Replace the logic

{% if collection.metafields.custom.alt_image != blank %}
{{ collection.metafields.custom.alt_image | image_url: width: 600 | image_tag }}
{% elsif collection.featured_image != blank %}
{{ collection.featured_image | image_url: width: 600 | image_tag }}
{% endif %}

[tim_tairli]

Yes, you can do that by editing your theme code.
Keep in mind that this will make your future theme updates problematic.
So consider using a “Multi-column” section instead.

To edit code you need to open snippets/card-collection.liquid

snippets/card-collection.liquid

Step 0: make a theme copy as a backup.

Step 1. Replace card_collection.featured_image with featured_image throughout the entire file. (editor does have search/replace all function)

Step 2. Add the code like below above line 18 (use your namespace and key instead of custom.image:

assign featured_image = card_collection.metafields.custom.image.value | default: card_collection.featured_image

Save, test.

[devcoders]

Hi @KirstyCC

Could you please share the relevant theme file code and the metafield name (or a screenshot of the metafield setup)?

Alternatively, you can provide collaborator access, and I’ll check your store directly and implement it properly for you.

Best regards,
Devcoder

[KirstyCC]

Hi - thanks for your help Metafield setup attached