Show product tag on Product Detail Page

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.

1 Like