Create product label that appear over the photo for example Mix & Match Etc. Expanse Theme

Store Design
, , ,

Topic summary

A user working with the Expanse theme on their Shopify store (dibor.co.uk) wants to add custom product labels that overlay product images, similar to promotional tags like ‘Black Friday’ or ‘Mix & Match’.

Current situation:

  • The theme already has a ‘sale’ tag that automatically appears when a compare price is set
  • User attempted to follow a YouTube tutorial but encountered a roadblock: their theme lacks the card_product.liquid file referenced in the guide

Technical details:

  • The tutorial suggested adding code using Liquid tags (e.g., {%- elsif card_product.tags contains 'new' -%})
  • User has identified a file containing the existing sale tag code but is unsure how to adapt it for custom labels
  • A code snippet and screenshot were shared showing the current sale tag implementation

Status: The question remains unanswered with no solution provided yet. The user needs guidance on the correct approach for adding custom product tags in the Expanse theme, given its different file structure.

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

Hi all,

I am using the expanse theme, and looking to add product labels.
My store is www.dibor.co.uk

I would like to add an image tag on product photos, in the theme there is a ‘sale’ tag that triggers from a compare price change.

I would like to be able to add my own tags, for products that feature in a sale, such as ‘Black Friday’ or ‘Mix & Match’.

What would be the best way of doing this? I’ve tried following a youtube video but my theme does not have the ‘card_product.liquid’ file.

The code it wants me to put in that file is:

{%- elsif card_product.tags contains 'new' -%}

{{ 'new' }}

Screenshot 2023-11-06 at 13.27.32.png
Screenshot 2023-11-06 at 13.27.32.png588×952 338 KB

I have the following file with the sale tag in.

<div class="grid-item grid-product {{ classes }}">
  <div class="grid-item__content">
    <a href="{{ product.url | within: collection }}" class="grid-item__link">
      <div class="grid-product__image-wrap">
        {%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
        {%- if i == 1 -%}
          <div class="grid-product__tags">
            <div class="grid-product__tag grid-product__tag--sale">
              {{ 'products.general.sale' | t }}
            </div>
          </div>
        {%- endif -%}
        <div class="image-wrap">
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      </div>
      <div class="grid-item__meta">
        <div class="grid-item__meta-main">
          <div class="grid-product__title">{{ 'home_page.onboarding.product_title' | t }}</div>
        </div>
        <div class="grid-item__meta-secondary">
          <div class="grid-product__price">
            <span class="grid-product__price--current">
              {%- render 'price' with '2999' -%}
            </span>
            {%- if i == 1 -%}
              <span class="grid-product__price--original">
                {%- render 'price' with '3599' -%}
              </span>

              {%- if settings.product_save_amount -%}
                {%- if settings.product_save_type == 'dollar' -%}
                  {%- capture saved_amount -%}{{ 3599 | minus: 2999 | money_without_trailing_zeros }}{%- endcapture -%}
                {%- else -%}
                  {%- capture saved_amount -%}{{ 3599 | minus: 2999 | times: 100.0 | divided_by: 3599 | round }}%{%- endcapture -%}
                {%- endif -%}
                <span class="grid-product__price--savings">
                  {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
                </span>
              {%- endif -%}
            {%- endif -%}
          </div>
        </div>
      </div>
    </a>
  </div>
</div>