Does anyone know how to add tags as shown below. For decoration and announcement purposes only. Please guide me, I am using debutify theme.
Topic summary
A user seeks guidance on adding decorative discount tags to Shopify product pages, similar to a reference image they provided.
Solution Provided:
A support representative from Debutify outlined a multi-step process:
- Enable product tags: Navigate to the theme editor’s product page section and activate “Show product tags”
- Add tags in Shopify: Assign discount-related tags to products in Shopify’s product settings
- Apply custom CSS: Insert provided CSS code into Theme Settings > Custom Style/Script to style tags with a red background and decorative circular elements
- Adjust tag placement (optional): To position tags above the add-to-cart button instead of below, edit the
product-template.liquidfile in the Snippets folder by searching for specific code strings and relocating the tag display code
Outcome:
The original poster confirmed the solution works successfully. The approach uses Shopify’s native tagging system combined with custom styling to create visually distinct discount indicators on product pages.
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.
1 Like
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
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.
2 Likes
It’s working, thank you
1 Like