Navigate back to the homepage

Customize product badges and add NEW badge & HOT badge

Driss Oudmine
October 17th, 2020 · 1 min read

There are many ways to attach visitor’s attention to a product. One of the most popular ways is by adding a small badge, usually on the top left or right corner of the product image. In this article I’m going to show you how to create a simple NEW and HOT icon badge for a product with the help of Metafields and also how to customize the Sale & Soldout badge in the Minimal theme, so let’s get started!

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Minimal theme, and then click Actions > Duplicate.
  3. Find the theme that called Copy of Minimal then click Actions > Edit Code.
  4. On the left bar, search for a folder called Assets then add the following code inside the “theme.scss.liquid” file
1.d-flex-important {
2 display: flex !important;
3 flex-direction: column !important;
4 align-items: flex-start !important;
5 position: absolute;
6 top: 30px;
7 width: 100%;
8}
9.label {
10 color: #FFFFFF;
11 font-size: 12px;
12 font-weight: 500;
13 padding: 1px 6px;
14 text-transform: uppercase;
15 letter-spacing: 0.05em;
16 margin: 2px 0;
17 z-index: 9999;
18}
19
20.badge--sold-out {
21 background-color: #1b1b1c;
22}
23
24.badge--sale {
25 background-color: #f54337;
26}
27
28.badge--hot {
29 background-color: #ff7143;
30}
31
32.badge--new {
33 background-color: #00aced;
34}

5. Again on the left bar, search for a folder called Snippets then search for the “product-grid-item.liquid” file.

6. Inside the “product-grid-item.liquid” file, replace the following code

1{% comment %}
2 Custom
3 Code
4 by
5 https://www.doudmine.com/
6{% endcomment %}
7<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>
8 {%- assign show_label_new = show_label_new | default: settings.product_collection_show_label_new -%}
9 {%- assign show_label_hot = show_label_hot | default: settings.product_collection_show_label_hot -%}
10
11 {%- if show_label_new or show_label_hot or on_sale or sold_out -%}
12 {%- assign label_present = true -%}
13 {%- else -%}
14 {%- assign label_present = false -%}
15 {%- endif -%}
16 <div class="d-flex-important">
17 {%- if label_present -%}
18 {% if on_sale %}
19 {% if settings.show_sale_badge %}
20 <span class="label badge--sale">
21 <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
22 </span>
23 {% endif %}
24 {% if settings.show_percentage_badge %}
25 <span class="label badge--sale">
26 <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>
27 </span>
28 {% endif %}
29 {% endif %}
30
31 {% if sold_out and settings.show_sold_out_badge %}
32 <span class="label badge--sold-out">
33 <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
34 </span>
35 {% endif %}
36
37 {%- if show_label_hot -%}
38 {%- if product.metafields.labels.hot == 'true' -%}
39 <span class="label badge--hot">
40 <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">HOT</span>
41 </span>
42 {%- endif -%}
43 {%- endif -%}
44
45 {%- if show_label_new -%}
46 {%- if product.metafields.labels.new == 'true' -%}
47 <span class="label badge--new">
48 <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">NEW</span>
49 </span>
50 {%- endif -%}
51 {%- endif -%}
52
53 {%- endif -%}
54 </div>
55
56 <span class="grid-link__image-centered">
57 {% if featured.title != '' %}
58 {% unless featured.featured_image == blank %}
59 {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
60 {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
61 {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
62
63 {% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
64 <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
65 <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
66 <img id="{{ img_id }}"
67 alt="{{ featured.featured_image.alt | escape }}"
68 class="product__img lazyload"
69 data-src="{{ img_url }}"
70 data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
71 data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
72 data-sizes="auto"
73 data-image>
74 </div>
75 </div>
76 {% else %}
77 <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
78 {% endunless %}
79 <noscript>
80 <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
81 </noscript>
82 {% else %}
83 {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
84 {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
85 {% endif %}
86 </span>
87 </span>

7. with the one is highlighted below. That highlighted code is between line 26-68 in your code editor

1<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
2 <a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
3 <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>
4 {% if on_sale and section.settings.show_sale_circle %}
5 <span class="badge badge--sale">
6 <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
7 </span>
8 {% endif %}
9 {% if sold_out and section.settings.show_sold_out_circle %}
10 <span class="badge badge--sold-out">
11 <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
12 </span>
13 {% endif %}
14 <span class="grid-link__image-centered">
15 {% if featured.title != '' %}
16 {% unless featured.featured_image == blank %}
17 {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
18 {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
19 {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
20
21 {% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
22 <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
23 <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
24 <img id="{{ img_id }}"
25 alt="{{ featured.featured_image.alt | escape }}"
26 class="product__img lazyload"
27 data-src="{{ img_url }}"
28 data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
29 data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
30 data-sizes="auto"
31 data-image>
32 </div>
33 </div>
34 {% else %}
35 <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
36 {% endunless %}
37 <noscript>
38 <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
39 </noscript>
40 {% else %}
41 {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
42 {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
43 {% endif %}
44 </span>
45 </span>
46 <p class="grid-link__title">{{ product_title }}</p>
47 {% if section.settings.vendor_enable %}
48 <p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
49 {% endif %}
50 {% if featured.title != '' %}
51 <p class="grid-link__meta">
52 {%- assign price = featured.price | money -%}
53
54 {% if on_sale %}
55 <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
56 <s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
57 {% endif %}
58 {% if featured.price_varies %}
59 {{ 'products.general.from_html' | t: price: price }}
60 {% else %}
61 {% if on_sale %}
62 <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
63 {% else %}
64 <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
65 {% endif %}
66 {{ price }}
67
68 {%- assign variant = featured.selected_or_first_available_variant -%}
69 {%- if variant.available and variant.unit_price_measurement -%}
70 {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
71 {%- endif -%}
72 {% endif %}
73 </p>
74 {% endif %}
75 </a>
76</div>

8. On the left bar, search for a folder called Confi then click on the “settings_schema.json” file.

9. Copy and paste the following code inside the “settings_schema.json” file. Don’t forget “Comma” at the end when you paste the code!

1{
2 "name": "Products Badges",
3 "settings": [
4 {
5 "type": "header",
6 "content": "Product Badges"
7 },
8 {
9 "type": "checkbox",
10 "id": "show_sale_badge",
11 "label": "Show 'Sale' badge"
12 },
13 {
14 "type": "checkbox",
15 "id": "show_percentage_badge",
16 "label": "Show Percentage badge"
17 },
18 {
19 "type": "checkbox",
20 "id": "show_sold_out_badge",
21 "label": "Show 'Sold out' badge"
22 },
23 {
24 "type": "checkbox",
25 "id": "product_collection_show_label_hot",
26 "label": "Show 'HOT' badge"
27 },
28 {
29 "type": "checkbox",
30 "id": "product_collection_show_label_new",
31 "label": "Show 'NEW' badge"
32 }
33 ]
34}

10. Now, we are going to need custom fields in order to make “HOT” & “NEW” badges! so in this case we will need to install an app called Metafields Guru

11. After you install the app, select Products & Variants then choose one of your products that you want to add a badge to it.

12. After you choose the product, click on Create Metafield button.

13. Now you can see a Form appeared after you click on Create Metafield, inside the input with name of “Key” start writing new if you want NEW badge and hot if you want HOT badge and inside the input with the name of “Namespace” start writing labels. Next, write true inside the last input which is the tallest one!

14. After you finish creating the metafields of the product, click on Save button.

Now you’re good to go! I hope this artile is helpful for you, see you in another tutorial :)

Hey, if you have any issues implementing the Badges into your Shopify Store. DM me on Instagram so I can help

More articles from doudmine

Products carousel slider for Shopify

I´m going to show you step by step how to implement Product slider within the Minimal theme.

September 19th, 2020 · 1 min read

Displaying custom author names using custom fields

In this Article I'm going to show you how to feature a guest blogger who you would like to credit as the author.

September 7th, 2020 · 1 min read
© 2020–2021 doudmine
Link to $https://www.instagram.com/doudmine/Link to $https://www.youtube.com/channel/UCYF73P2A2NdVr6c9aONH22w