How to show discount tag in shopify product page

[Inherited]

Does anyone know how to add tags as shown below. For decoration and announcement purposes only. Please guide me, I am using debutify theme.

[BSS-Commerce]

Hi @Inherited

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[debutifysupport]

Hey @Inherited ,

Please follow the steps below to achieve a similar customization.

First, you will have to enable the theme’s product tags by going to the product page inside the theme editor and clicking on the product page section. Various options will appear, you can check only “Show product tags”.

On Shopify’s product settings, don’t forget to add the tags to the products that are available for the discounts provided.

Now back to the theme editor, go to the theme settings > custom style/script, and paste the code below to the style input.

.product-tags ul{
  margin-bottom:16px;
}
.product-tags ul.inline-list li {
  height: 30px;
  position: relative;
  background: red;
  padding: 2px;
}

.product-tags ul.inline-list li:before,
.product-tags ul.inline-list li:after {
  content:"";
  position: absolute;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  background-color: #fff;
}

.product-tags ul.inline-list li:before {
  border: 2px solid red;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
  left: -4px;
}

.product-tags ul.inline-list li:after {
  border: 2px solid red;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(135deg);
  right: -4px;
}

.product-tags ul.inline-list li a{
  width: 100%;
  height: 100%;
  font-size:12px;
  color:red;
  display:flex;
  padding:11px;
  align-items:center;
  justify-content:center;
  position: relative;
  background: #FFCCCB;
  border-radius: 2px;
}
.tickets{
  display:flex;
  justify-content:space-between;
  width:240px;
}

This will already customize the tags, however, they will appear below the add-to-cart button, therefore you will need to click on the three dots next to the theme name and go to “Edit code”.

In the Snippets folder, search for the file “product-template.liquid”. When the file is opened, you can click on CTRL + F and search for “section.settings.show_product_tags”.

Delete the first

and copy the rest.

After the code was copied (right click on mouse > copy OR CRTL+C), search for “products.general.unit_price” and go down two divs, that’s where you can copy the code.

If everything is done correctly, it will look like this.

[Inherited]

It’s working, thank you