Solved: Dawn 2.0 Variant Image Showing instead of Feature Image in Custom Home Page Section

Store Design
,

Topic summary

Issue Resolved by Original Poster

The thread creator initially sought help modifying a custom Dawn 2.0 home page section to display featured images instead of variant images for products with multiple variants. This was needed for gift-with-purchase promotions where the featured image shows the gift, but the variant image (without gift) should appear in cart.

Resolution:
The poster quickly realized their code was already working correctly—they had simply lost track of their product setup during testing. No modifications were actually needed.

Shared Resources:

  • Complete code for custom section “featured-collection-buynow.liquid”
  • Snippet code for “product-card-buynow.liquid”
  • Template file “collection.collection-buynow.json”
  • Test store access provided (password-protected)

Community Response:

  • One user requested guidance on recreating the same custom section
  • Another user (2 years later) expressed frustration that similar image display issues persist in Dawn, criticizing Shopify for not addressing this problem and leaving non-technical merchants to modify code themselves

The original poster left all code and store access available for others facing similar customization needs.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

EDIT: IGNORE MY ASK! I lost track of how I had my product set up when I was testing. The code below is behaving as I would like it to behave, no modifications are required. I’m leaving this up and access to the test store open in case someone needs to do this on their own site. I already figured it out, so you don’t have to!

I have created a custom section for the home page in Dawn that creates a Feature Collection on the Home Page that includes an Add to Cart button (I renamed it Buy Now). The store’s products have multiple variants, but I have forced the Buy Now section to select the first variant. I am happy with how the section looks, but I have an issue.

My client is going to be offering multiple gift with purchase offers. When we have a gift with purchase on offer, we will be changing the featured image to an image that shows the product as well as the gift with purchase. The reason we change the featured image and not the variant image is that we want the variant image without the gift with purchase to show up in the cart, as we add the gift as a separate line item and do not want two images of the gift in the cart. People believe what they see and not what they read and will expect two gifts with the purchase otherwise. If you go to the store and hover over the MCM Eau de Parfum image, you can see the featured image that I am describing.

So my ask is, how do I modify the code in my custom section so that it uses the featured image and not the variant image, even though I have forced the first variant as the product.id?

Note: This is the test store and not the final version, so it’s not looking overly pretty at the moment!

Store link: https://test-store-colleen.myshopify.com/

Password: thanksforyourhelp

Section Code “featured-collection-buynow.liquid”
Code added by me has a comment with explanation, search for “Colleen” in the code to see my changes.

Scroll down for snippet code for “product-card-buynow.liquid”, I will place it below this code section.

Show More 

## {{ section.settings.title | escape }}{%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%} {{ 'sections.featured_collection.view_all' | t }} {%- endif -%}
{%- if section.settings.show_view_all and more_in_collection -%}{{ 'sections.featured_collection.view_all' | t }} 
{%- endif -%}
{% schema %} { "name": "Buy Now Section", "tag": "section", "class": "spaced-section", "settings": [ { "type": "text", "id": "title", "default": "Buy Now Collection", "label": "t:sections.featured-collection.settings.title.label" }, { "type": "collection", "id": "collection", "label": "t:sections.featured-collection.settings.collection.label" }, { "type": "range", "id": "products_to_show", "min": 2, "max": 12, "step": 2, "default": 4, "label": "t:sections.featured-collection.settings.products_to_show.label" }, { "type": "checkbox", "id": "show_view_all", "default": true, "label": "t:sections.featured-collection.settings.show_view_all.label" }, { "type": "checkbox", "id": "swipe_on_mobile", "default": false, "label": "t:sections.featured-collection.settings.swipe_on_mobile.label" }, { "type": "header", "content": "t:sections.featured-collection.settings.header.content" }, { "type": "select", "id": "image_ratio", "options": [ { "value": "adapt", "label": "t:sections.featured-collection.settings.image_ratio.options__1.label" }, { "value": "portrait", "label": "t:sections.featured-collection.settings.image_ratio.options__2.label" }, { "value": "square", "label": "t:sections.featured-collection.settings.image_ratio.options__3.label" } ], "default": "adapt", "label": "t:sections.featured-collection.settings.image_ratio.label" }, { "type": "checkbox", "id": "show_secondary_image", "default": false, "label": "t:sections.featured-collection.settings.show_secondary_image.label" }, { "type": "checkbox", "id": "add_image_padding", "default": false, "label": "t:sections.featured-collection.settings.add_image_padding.label" }, { "type": "checkbox", "id": "show_image_outline", "default": true, "label": "t:sections.featured-collection.settings.show_image_outline.label" }, { "type": "checkbox", "id": "show_vendor", "default": false, "label": "t:sections.featured-collection.settings.show_vendor.label" }, { "type": "checkbox", "id": "show_rating", "default": false, "label": "t:sections.featured-collection.settings.show_rating.label", "info": "t:sections.featured-collection.settings.show_rating.info" } ], "presets": [ { "name": "t:sections.featured-collection.presets.name" } ] } {% endschema %} ```

Code for snippet “product-card-buynow.liquid”

Show More 
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %} {% unless the_snippet_fave_icon contains 'Liquid error' %} {{ the_snippet_fave_icon }} {% endunless %}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ product_card_product.vendor }}
{%- endif -%} {%- if product_card_product.featured_media -%}### {{ product_card_product.title | escape }} {%- endif -%} {% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-listing', product: product %}{% endcapture %} {% unless the_snippet_review_avg contains 'Liquid error' %} {{ the_snippet_review_avg }} {% endunless %} {% comment %} TODO: metafield {{ block.settings.description | escape }} {%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%} {% liquid assign rating_decimal = 0 assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1 if decimal >= 0.3 and decimal <= 0.7 assign rating_decimal = 0.5 elsif decimal > 0.7 assign rating_decimal = 1 endif %}

{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}

({{ product_card_product.metafields.reviews.rating_count }}) {{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%} {% endcomment %} {% comment %} Original code {% render 'price', product: product_card_product, price_class: '' %} Colleen modified code below to show the first variant price under the product on the collection.buynow page {% endcomment %} {% render 'price', product: product_card_product, use_variant: product_card_product.first_available_variant.id %}

{%- if product_card_product.featured_media -%} {%- liquid assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio if product_card_product.featured_media.aspect_ratio == nil assign featured_media_aspect_ratio = 1 endif -%}
{%- else -%}## {{ product_card_product.title }} 
{%- endif -%}{%- if product_card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}

{% comment %} Code added by Colleen to create add to cart button {% endcomment %} ```
2

If you use this code, you need one more file:

Create this template and add the following code:

collection.collection-buynow.json

{
  "sections": {
    "banner": {
      "type": "main-collection-banner",
      "settings": {
        "show_collection_description": true,
        "show_collection_image": false
      }
    },
    "product-grid": {
      "type": "main-collection-product-grid-buynow",
      "settings": {
        "products_per_page": 24,
        "image_ratio": "square",
        "show_secondary_image": false,
        "add_image_padding": false,
        "show_image_outline": false,
        "show_vendor": true,
        "show_rating": true,
        "enable_filtering": true,
        "enable_sorting": true,
        "collapse_on_larger_devices": true
      }
    }
  },
  "order": [
    "banner",
    "product-grid"
  ]
}
3

Hello. I just saw your testing store and i would do the smaw in the home page. I want to create this new section that you created. How can i do this?

4

Why is this still an issue in Dawn and we are 2 years past the dates on this thread?

I have this problem and I cannot for the life of me work it out. Shopify KNOWS this is a problem and yet it’s still happening and you leave it up to the customers who many aren’t codes to go neck deep in the code of the site to fix it.

This is not good enough.

3 Likes
5

I just saw this comment now. I am sorry for responding years later, but all of the code you need to create this section was included above. I hope you were able to sort this out.