Variant Badges

Want to draw instant attention to best-selling colors, new arrivals, or low-stock items right on your product page swatches? With Aris Color Swatch, you can display automatic dynamic badges (like Sold out, Low stock, New, and Sale) as well as custom manual badges (like Best Seller, Hot, or Eco) directly over your swatches.

Follow this quick guide to set up and customize your variant badges in minutes!

From your Dashboard or left sidebar menu, click Variant Badges to open the badge management screen.

In the Automatic Badges section, you can enable 4 smart badges that update automatically based on your real-time Shopify inventory, pricing, and publish dates:

• Auto Sold-out (Enabled by default): Automatically appears when a variant's inventory is 0 (and Continue selling when out of stock is disabled).

• Auto New: Appears on products published within your specified timeframe (Show when item is published < X days, default: 3 days).

• Auto Low stock: Appears when a variant's stock is greater than 0 and at or below your threshold (Show when stock is <= X units, default: 3 units).

• Auto Sale: Appears when a variant's Compare-at price is higher than its current Price.

For each automatic badge, you can:

1. Toggle the Status switch ON or OFF.

2. Adjust the threshold (days or units) and select the badge Position (Top left, Top right, Bottom left, or Bottom right) directly in the table.

3. Click the Customize (pencil) icon on the right to personalize its text, icon, colors, font size, and padding.

Want to highlight specific option values like a limited-edition color or eco-friendly fabric?

1. Scroll down to the Manual Badges card and click + Create badge.
   
   

   

2. (Optional) Under Start from a pre-made badge, click one of the 6 ready-made templates (Hot, Eco, Best Seller, Trending, Limited offer, or Back in stock) to auto-fill a curated design, then tweak any field you like.

3. In the Setting card, configure your badge appearance:

   • Badge name: Enter an internal name to identify this badge in your admin list (e.g., Summer Best Seller).

   • Badge text & Icon: Enter the customer-facing text shown on the swatch (up to 20 characters). Click the icon button next to the text field to pick from 13 built-in icons or upload a custom icon from your Shopify Media.

   • Position: Choose Top left, Top right, Bottom left, or Bottom right.

   • Color: Set custom HEX codes for Text, Background, and Border.

   • Typography & Spacing: Fine-tune Font size (8–24 px), Font weight, Letter Case (None, Uppercase, Lowercase), Padding, Corner radius, and Border thickness while checking the live Preview card on the right.

1. In the Assign to option values card (below the Setting card), use the search bar to find the Shopify option values you want to highlight (e.g., Red (Color) or Organic Cotton (Material)).

2. Check the boxes next to one or more option values. Each row shows how many products contain that value (Found in N products).

3. Click Save in the top-right corner.

Your badge will now automatically display on that option value's swatch across every matching product in your store - including any new products you add with that option value in the future!

To keep your swatches clean and easy to read on the Product Page:

• Maximum 2 Badges per Swatch: Up to 2 badges can appear on a single swatch at the same time.

• Priority Order: If more than 2 badges qualify for the same swatch, the app displays the top 2 in this order: Manual Badge > Auto Sold-out > Auto Low stock > Auto New > Auto Sale

• Smart Conflict Handling: Auto Sold-out and Auto Low stock never appear together on the same swatch—when stock hits 0, only Sold out is shown.

Pro Tip: Variant badges are designed exclusively for Product Page swatches so your Collection Page product cards stay compact and fast. Make sure the option's Product Page swatch toggle is turned ON in the Options menu for badges to appear.

Need Help? Want help styling badges to match your theme? Click Chat with us at the bottom right. Our support team is always happy to help!