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

[colleenc]

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.

Click to expand...

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>

{%- liquid
  assign products_to_display = section.settings.collection.all_products_count

  if section.settings.collection.all_products_count > section.settings.products_to_show
    assign products_to_display = section.settings.products_to_show
    assign more_in_collection = true
  endif
-%}
<div class="collection page-width{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
  <div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
    <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      <a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
    {%- endif -%}
  </div>

  <slider-component class="slider-mobile-gutter">
    <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
      {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
        <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
          {% render 'product-card-buynow',
            product_card_product: product,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor,
            show_image_outline: section.settings.show_image_outline,
            show_rating: section.settings.show_rating
          %}
        </li>
      {%- else -%}
        {%- for i in (1..4) -%}
          <li class="grid__item">
            {% render 'product-card-placeholder' %}
          </li>
        {%- endfor -%}
      {%- endfor -%}
    </ul>
    {%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
      <div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
        <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
        <div class="slider-counter caption">
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
          <span class="slider-counter--total">{{ products_to_display }}</span>
        </div>
        <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
      </div>
    {%- endif -%}
  </slider-component>

  {%- if section.settings.show_view_all and more_in_collection -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      <a href="{{ section.settings.collection.url }}"
        class="button"
        aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
      >
        {{ 'sections.featured_collection.view_all' | t }}
      </a>
    </div>
  {%- endif -%}
</div>

{% 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"

Click to expand...

{% comment %}
    Renders a product card

    Accepts:
    - product_card_product: {Object} Product Liquid object (optional)
    - media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - add_image_padding: {Boolean} Enables padding on the image to space out the grid
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_image_outline: {Boolean} Show card outline. Default: true (optional)
    - show_rating: {Boolean} Show the product rating. Default: false

    Usage:
    {% render 'product-card-buynow', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<div class="card-wrapper">

  {% 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 %}
  
  <div class="card-information">
    <div class="card-information__wrapper">
      {%- if show_vendor -%}
        <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
        <div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
      {%- endif -%}

      {%- if product_card_product.featured_media -%}
        <h3 class="card-information__text h5">
          <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
            {{ product_card_product.title | escape }}
          </a>
        </h3>
      {%- 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 
      <span class="caption-large light">{{ block.settings.description | escape }}</span>
      {%- 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 
        %}
        <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
          <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
        </div>
        <p class="rating-text caption">
          <span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
        </p>
        <p class="rating-count caption">
          <span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
          <span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
        </p>
      {%- 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 %}
    </div>
  </div>

  <div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
    <div class="card__inner">
      {%- 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
        -%}

        <div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
          <div class="media media--transparent media--{{ media_size }} media--hover-effect"
            {% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
              src="{{ product_card_product.featured_media | img_url: '533x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
              alt="{{ product_card_product.featured_media.alt | escape }}"
              loading="lazy"
              class="motion-reduce"
              width="{{ product_card_product.featured_media.width }}"
              height="{{ product_card_product.featured_media.height }}"
            >

            {%- if product_card_product.media[1] != nil and show_secondary_image -%}
              <img
                srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
                  {{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
                src="{{ product_card_product.media[1] | img_url: '533x' }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ product_card_product.media[1].alt | escape }}"
                loading="lazy"
                class="motion-reduce"
              width="{{ product_card_product.media[1].width }}"
              height="{{ product_card_product.media[1].height }}"
              >
            {%- endif -%}
          </div>
        </div>
      {%- else -%}
        <div class="card__content">
          <h2 class="card__text h3">
            <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
              {{ product_card_product.title }}
            </a>
          </h2>
        </div>
      {%- endif -%}

      <div class="card__badge">
        {%- if product_card_product.available == false -%}
          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
        {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

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

<form method="post" action="/cart/add">

<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input type="hidden" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Buy Now" class="btn" />

</form>

[colleenc · Accepted solution]

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"
  ]
}

[Yieki]

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. 

[gzef]

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?

[colleenc]

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.