Featured Image on collection slider

Store Design

Topic summary

A user wants to add a featured image positioned to the left of their featured collection slider on the Dawn theme homepage, similar to functionality in other themes.

Initial Solutions Offered:

  • Add an Image Banner or Image with Text section above/below the featured collection (not the desired placement)
  • Use metafields to inject custom images via code

Current Status:

  • User implemented a metafields-based solution with custom code but the positioning is incorrect
  • The image appears but doesn’t align properly with the product grid
  • User specifically wants the image on the left side, matching the height of product cards

Key Technical Details:

  • Custom code uses flexbox layout with metafields (custom.featured_image)
  • One contributor offered to implement the exact solution with proper metafield setup
  • Reference example provided: theworldofzazi.com shows the desired layout

Resolution: Discussion remains open with one developer offering hands-on assistance via private collaboration code to achieve the proper positioning.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello
I am using the Dawn theme
And i would like to add a featured image in front of my featured collection on my home page.
Some themes already have this option built in but Dawn doesn’t

image
image1174×527 76.9 KB

2

Hi @TBS2023

You can do this without coding by following these steps:

  1. Go to your Shopify Admin —> Online Store–> Themes
  2. Click Customize on your Dawn theme.
  3. In the left-hand panel, scroll to find your Featured Collection section.
  4. Click Add section→ choose Image banner or Image with text
  5. Move this above your Featured Collection section by dragging it up.
  6. Upload your featured image in the Image Banner settings.

That would allow you to display your Image there.

If this helps, I would greatly appreciate a Like

Cheers,
David

3

Hi @TBS2023 ,
Shopify Admin → online Store → Themes → customize.
scroll to homepage layout
click add section
select image with text.
upload the image you want to show
add text if you want.
drag this section above your featured collection in left side layout menu.
if I was able to solve your problem , please don’t forget to like it and mark it as a solution.
thanks and regards
Manoj

4

thanks but i want the image next to the featured collection - not above

5

Hi @TBS2023 ,
then don’t drag it above the featured collection.
drag it below.
thanks and regards

6

i have managed to add an image using metafields - however the positioning is not correct

pahtri

image
image1520×645 74 KB

<div class="featured-collection-flex" style="display: flex; flex-wrap: nowrap; gap: 1rem; align-items: flex-start;">
  {% if section.settings.collection.metafields.custom.featured_image %}
    <div class="featured-image-card" style="flex: 0 0 280px; max-width: 280px;">
      <img
        src="{{ section.settings.collection.metafields.custom.featured_image | image_url: width: 600 }}"
        alt="Featured image for {{ section.settings.collection.title }}"
        loading="lazy"
        style="width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
      >
    </div>
  {% endif %}
  
  <div class="product-grid-wrapper" style="flex: 1 1 0;">
7

Hey,

May I ask is this the position that you are looking for:

image
image1920×1000 108 KB

8

Thanks for bringing this Question to Shopify community.
You want that in the product grid on the collection you can add the static image like here on this store collection page: Shop Luxury Clothing: Handcrafted Coats, Dresses, Bags & More | ZAZI – ZAZI
And you are 100% right that the Shopify dawn theme doesn’t have this option by default.
So we need to do this custom code and we need to setup metafields in your store so that you can choose different images for the different collection.
If you could share the 4 digits collab code the p/m so that I can do the requested changes.
Waiting to hear back from you.
Thanks

9

yes - on the left of the featured collection - but ideally the same size as the product card

11

Please delete this message from here. Don’t share it publicly. i send you message check it.

1 Like
12

I believe @The_ScriptFlow would be aiding you in this request so I will not have anymore input as that can cause some unwanted issues :sweat_smile:

Have a great day guys!

13

Hi,

Hope this will help

  • Go to theme Customize > Identify Where to Add the Image
  • Add a Custom Image Section