Customize Shopify Dawn Theme Product Badges

Are you using Shopify’s Dawn theme and want to customize how product badges display on your store? Many shop owners want to remove the “Sale” tag while keeping the “Sold Out” tag visible. This guide will walk you through the process step-by-step, providing multiple solutions to achieve the desired result.

Understanding Product Badges in Dawn Theme

What are Product Badges?

Product badges in Shopify themes are visual indicators that provide quick information about a product’s status. Common badges include “Sale” and “Sold Out” tags.

Why Customize Product Badges?

Customizing product badges allows you to:

1. Control the information displayed to customers
2. Maintain a clean and professional look for your store
3. Focus customer attention on specific product statuses

Default Badge Behavior in Dawn Theme

By default, the Dawn theme displays both “Sale” and “Sold Out” badges when applicable. This may not always align with your store’s aesthetic or marketing strategy.

Removing the Sale Tag

Method 1: CSS Modification (Recommended)

The most straightforward and widely applicable method to remove the sale tag is by modifying the CSS. This approach keeps the “Sold Out” tag intact.

Steps:

1. Go to your Shopify admin panel
2. Navigate to Online Store > Themes
3. Click “Edit code” on your active theme
4. In the Assets folder, locate and open the file component-card.css
5. Add the following code at the bottom of the file:

.card__badge {display: none;}

6. Save the changes

This code will hide all badge elements, including the sale tag, across your store.

Method 2: Liquid Template Modification

For more granular control, you can modify the Liquid templates directly.

Steps:

1. In your theme editor, open the price.liquid file
2. Locate the following code block:

{%- if show_badges -%}
  <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
    {{ 'products.product.on_sale' | t }}
  </span>
  <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
    {{ 'products.product.sold_out' | t }}
  </span>
{%- endif -%}

3. Comment out or remove the “Sale” badge section:

{%- if show_badges -%}
  {% comment %}
  <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
    {{ 'products.product.on_sale' | t }}
  </span>
  {% endcomment %}
  <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
    {{ 'products.product.sold_out' | t }}
  </span>
{%- endif -%}

4. Save the changes

This method allows you to keep the “Sold Out” badge while removing the “Sale” badge.

Keeping the Sold Out Tag

Ensuring Sold Out Visibility

When removing the sale tag, it’s crucial to ensure that the “Sold Out” tag remains visible. The methods described above should maintain the visibility of the “Sold Out” tag.

Troubleshooting Sold Out Tag Issues

If you find that the “Sold Out” tag has disappeared along with the sale tag, try the following:

1. Review your CSS changes to ensure they’re not overly broad
2. Check the Liquid template modifications to confirm the “Sold Out” section wasn’t accidentally removed
3. Clear your theme cache and refresh your store to see if the changes take effect

Advanced Customization Options

Modifying Badge Appearance

Beyond removing the sale tag, you can further customize the appearance of your badges:

1. Change badge colors by modifying the color scheme settings in your theme editor
2. Adjust badge positioning using CSS
3. Modify badge text using Liquid translations

Creating Custom Badges

For more advanced users, creating custom badges is possible by:

1. Adding new Liquid conditionals in your product templates
2. Designing new CSS classes for badge styling
3. Implementing JavaScript for dynamic badge behavior

Best Practices for Product Badge Management

Consistency Across Your Store

Ensure that your badge modifications are applied consistently across all relevant pages, including:

1. Product pages
2. Collection pages
3. Featured product sections on the homepage

Mobile Responsiveness

Always test your badge modifications on mobile devices to ensure they display correctly on smaller screens.

Performance Considerations

When adding custom code or styles, be mindful of potential impacts on your store’s loading speed. Minimize the use of complex JavaScript and large image files for badges.

By following this guide, you should be able to successfully remove the sale tag while keeping the sold out tag in your Shopify Dawn theme. Remember to always backup your theme before making changes and test thoroughly across different devices and browsers to ensure a consistent shopping experience for your customers.