Description
- Show product tag (non-clickable) on product detail page, under add to cart
If code doesn’t work, you can comment below, message or email me.
#1. Use this code to Custom CSS
/* Tag labels */
div.product-tag-label span {
background-color: #000;
color: #fff;
margin: 5px 2px;
padding: 0px 10px;
border-radius: 30px;
display: inline-block;
font-size: 16px;
}
#2. Use this code to Code Injection > Footer
<script>
document.addEventListener("DOMContentLoaded", function () {
const article = document.querySelector(".ProductItem");
if (article) {
const tagClasses = [...article.classList].filter(cls => cls.startsWith("tag-"));
const tagLabels = tagClasses.map(cls => cls.replace("tag-", "").replace(/-/g, " "));
const tagContainer = document.createElement("div");
tagContainer.classList.add("product-tag-label");
tagLabels.forEach(label => {
const tagSpan = document.createElement("span");
tagSpan.textContent = label;
tagContainer.appendChild(tagSpan);
});
const addToCartButton = document.querySelector(".sqs-add-to-cart-button-wrapper");
if (addToCartButton) {
addToCartButton.insertAdjacentElement("afterend", tagContainer);
}
}
});
</script>
#3. Result
#4. To change tag style, change these lines.