Product badges are an effective way to draw a visitor’s attention to specific products. This tutorial will demonstrate how to create ‘NEW’ and ‘HOT’ product badges using Metafields, and how to customize the ‘Sale’ and ‘Sold Out’ badges within the Minimal theme.
- From your Shopify admin, navigate to Online Store > Themes.
- Locate the Minimal theme and select Actions > Duplicate to create a backup of your theme.
- Locate the duplicated theme titled Copy of Minimal and select Actions > Edit Code.
- In the left navigation panel, locate the Assets folder and add the following CSS code to the “theme.scss.liquid” file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.d-flex-important {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
position: absolute;
top: 30px;
width: 100%;
}
.label {
color: #ffffff;
font-size: 12px;
font-weight: 500;
padding: 1px 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 2px 0;
z-index: 9999;
}
.badge--sold-out {
background-color: #1b1b1c;
}
.badge--sale {
background-color: #f54337;
}
.badge--hot {
background-color: #ff7143;
}
.badge--new {
background-color: #00aced;
}
|
Step 5: In the left navigation panel, locate the Snippets folder and open the “product-grid-item.liquid” file.
Step 6: Within the “product-grid-item.liquid” file, replace the existing code with the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
{% comment %}
Custom code implementation for product badges
{% endcomment %}
<span class="grid-link__image grid-link__image--loading{% if settings.show_sold_out_badge %} grid-link__image-sold-out{% endif %} grid-link__image--product" data-image-wrapper>
{%- assign show_label_new = show_label_new | default: settings.product_collection_show_label_new -%}
{%- assign show_label_hot = show_label_hot | default: settings.product_collection_show_label_hot -%}
{%- if show_label_new or show_label_hot or on_sale or sold_out -%}
{%- assign label_present = true -%}
{%- else -%}
{%- assign label_present = false -%}
{%- endif -%}
<div class="d-flex-important">
{%- if label_present -%}
{% if on_sale %}
{% if settings.show_sale_badge %}
<span class="label badge--sale">
<span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
</span>
{% endif %}
{% if settings.show_percentage_badge %}
<span class="label badge--sale">
<span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">-{{ product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | times: 100.0 | divided_by: product.selected_or_first_available_variant.compare_at_price | money_without_currency | replace: ',', '.' | times: 100 | remove: '.0'}}%</span>
</span>
{% endif %}
{% endif %}
{% if sold_out and settings.show_sold_out_badge %}
<span class="label badge--sold-out">
<span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
</span>
{% endif %}
{%- if show_label_hot -%}
{%- if product.metafields.labels.hot == 'true' -%}
<span class="label badge--hot">
<span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">HOT</span>
</span>
{%- endif -%}
{%- endif -%}
{%- if show_label_new -%}
{%- if product.metafields.labels.new == 'true' -%}
<span class="label badge--new">
<span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">NEW</span>
</span>
{%- endif -%}
{%- endif -%}
{%- endif -%}
</div>
<span class="grid-link__image-centered">
{% if featured.title != '' %}
{% unless featured.featured_image == blank %}
{% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
{%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
alt="{{ featured.featured_image.alt | escape }}"
class="product__img lazyload"
data-src="{{ img_url }}"
data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</div>
</div>
{% else %}
<img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
{% endunless %}
<noscript>
<img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
</noscript>
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</span>
</span>
|
Step 7: Replace the code block that appears between lines 26-68 in your code editor with the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
<a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
<span class="grid-link__image grid-link__image--loading{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product" data-image-wrapper>
{% if on_sale and section.settings.show_sale_circle %}
<span class="badge badge--sale">
<span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
</span>
{% endif %}
{% if sold_out and section.settings.show_sold_out_circle %}
<span class="badge badge--sold-out">
<span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
</span>
{% endif %}
<span class="grid-link__image-centered">
{% if featured.title != '' %}
{% unless featured.featured_image == blank %}
{% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
{%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
alt="{{ featured.featured_image.alt | escape }}"
class="product__img lazyload"
data-src="{{ img_url }}"
data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</div>
</div>
{% else %}
<img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
{% endunless %}
<noscript>
<img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
</noscript>
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</span>
</span>
<p class="grid-link__title">{{ product_title }}</p>
{% if section.settings.vendor_enable %}
<p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
{% endif %}
{% if featured.title != '' %}
<p class="grid-link__meta">
{%- assign price = featured.price | money -%}
{% if on_sale %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
{% endif %}
{% if featured.price_varies %}
{{ 'products.general.from_html' | t: price: price }}
{% else %}
{% if on_sale %}
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endif %}
{{ price }}
{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}
{% endif %}
</p>
{% endif %}
</a>
</div>
|
Step 8: Navigate to the Config folder in the left navigation panel and open the “settings_schema.json” file.
Step 9: Add the following configuration code to the “settings_schema.json” file. Ensure proper JSON syntax by including commas as needed for integration with existing content:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
{
"name": "Products Badges",
"settings": [
{
"type": "header",
"content": "Product Badges"
},
{
"type": "checkbox",
"id": "show_sale_badge",
"label": "Show 'Sale' badge"
},
{
"type": "checkbox",
"id": "show_percentage_badge",
"label": "Show Percentage badge"
},
{
"type": "checkbox",
"id": "show_sold_out_badge",
"label": "Show 'Sold out' badge"
},
{
"type": "checkbox",
"id": "product_collection_show_label_hot",
"label": "Show 'HOT' badge"
},
{
"type": "checkbox",
"id": "product_collection_show_label_new",
"label": "Show 'NEW' badge"
}
]
}
|
Step 10: To implement custom “HOT” and “NEW” badges, you will need to install a metafields management application such as Metafields Guru.
Step 11: After installing the application, navigate to Products & Variants and select the product to which you want to add a badge.
Step 12: Select the product and click the Create Metafield button.
Step 13: Complete the metafield creation form:
- In the “Key” field, enter new for a NEW badge or hot for a HOT badge
- In the “Namespace” field, enter labels
- In the value field, enter true
Step 14: Save the metafield configuration to apply the badge to your product.
Upon completion of these steps, your product badges will be properly implemented and customized. This enhancement will effectively highlight special products and improve customer engagement on your Shopify store.
For additional support, feel free to reach out via the contact form.
