< Back to the docs

How to setup the app?

ByteTag Discount Text & Label helps you visually highlight discounts by displaying badges and dynamic text on your product and cart pages. This makes savings more visible, builds trust, and encourages purchases.

Important:

This app does not create or manage discounts. You must create discounts through the Shopify Admin → Discounts section.

The app only displays discount information (like sale prices or savings) on the storefront.

1. Enable App Embed

  • In your Shopify admin, go to Online Store → Customize (Theme Editor).

  • Under App Embeds, toggle “Discount Badge Settings” to “On”.

2. Configure Product Tags

  • Still in App Embed settings, enter the product tags you want to use for discount badges (e.g., winter-sale, outlet).

  • Only products with these tags will show badges or discount text.

3. Choose Where Labels Appear

There are two ways to determine where the label will be injected:

a) Theme Preset (recommended for standard themes)

  • In the Theme Settings tab, select your theme from the “Theme Preset” dropdown.

  • This ensures the app targets the correct elements (product cards, images, titles) automatically.

b) Custom CSS Selector (for custom themes or advanced placement)

  • If your theme isn’t listed or you want precise control, use the Custom CSS Selector option.

  • Input the selector (e.g., .product-grid-item .price or .cart-item__title) where the label should appear.

4. Add App Block (for product pages)

  • In the theme editor, go to your product template and click “Add Block”.

  • Select “Byte Discount Text” and position it where you want the discount message shown.

5. Advanced Integration (Optional)

If your store uses:

  • Pagination or infinite scroll

  • Product recommendations

  • A catalog with 50+ products

Then you’ll need to manually inject a

<script type="text/template" class="byte-product-data">

block into specific theme files (such as product-card.liquid, product-grid-item.liquid, or product-recommendations.liquid).

This script ensures the app can detect and display accurate discount information—such as pricing, compare-at price, and product tags—even when products are loaded dynamically.

⚠️ Important:

The full script can vary based on your store setup. Please copy the latest version from the “Installation” page inside the app.

Using outdated or incomplete code may result in missing or incorrect discount data.

‹ Label Styling Looks Broken or Misaligned

Set Up Conditional Labels Based on Active Discounts and Cart Behavior ›