How to Change Price and Sale Badge Colors in Shopify

Are you looking to customize the appearance of your Shopify store? One common request from store owners is to change the color of product prices and sale badges on collection pages. This can help draw attention to special offers and create a cohesive look for your online store. In this comprehensive guide, we’ll walk you through the process of changing these colors and provide some additional tips for customizing your Shopify theme.

Understanding Shopify Theme Customization

Before we dive into the specific steps, it’s important to understand how Shopify themes work and why changing certain elements can be tricky.

Theme Structure

Shopify themes are built using a combination of HTML, CSS, and Liquid (Shopify’s templating language). The appearance of various elements, including product prices and sale badges, is controlled by CSS rules defined in the theme’s stylesheet.

Global vs. Specific Styling

Many themes use global styling for text elements, which means changing the color of one element (like product prices) might inadvertently affect other parts of your store (such as text in the cart). This is why it’s crucial to target specific elements when making color changes.

Theme Versions

Different Shopify themes may have slightly different structures and class names. The solutions provided here should work for most themes, but you may need to adjust the CSS selectors based on your specific theme.

Changing Product Price Color

Let’s start with the main question: how to change the color of product prices on collection pages without affecting other text elements.

Step-by-Step Guide

1. Go to your Shopify admin panel and navigate to “Online Store” > “Themes”.
2. Find your current theme and click on “Actions” > “Edit code”.
3. In the left sidebar, locate and click on the “Assets” folder.
4. Find the file named “theme.scss.liquid” (or a similar name depending on your theme).
5. Scroll to the bottom of this file and add the following CSS code:

.price {
  color: #ff0000; /* Replace with your desired color */
}

6. Save the changes.

Customizing the Code

You can replace #ff0000 with any color code you prefer. For example:

• #00ff00 for green
• #0000ff for blue
• rgb(255, 165, 0) for orange

Targeting Specific Price Elements

If you need more precise control, you can target specific price elements:

.product-item__price {
  color: #ff0000;
}

.product-item__price--compare {
  color: #999999; /* Color for compare-at price */
}

Changing Sale Badge Color

Now, let’s address how to change the color of the sale badge on your products.

Modifying Badge Background

To change the background color of the sale badge, add this CSS:

.product-item__label--on-sale {
  background-color: #ff0000; /* Replace with your desired color */
}

Changing Badge Text Color

If you also want to change the text color of the sale badge:

.product-item__label--on-sale {
  background-color: #ff0000;
  color: #ffffff; /* Replace with your desired text color */
}

Adjusting Badge Size and Shape

You can further customize the sale badge by modifying its size and shape:

.product-item__label--on-sale {
  background-color: #ff0000;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 3px; /* Adjust for rounded corners */
}

Advanced Customization Tips

While changing colors is a great start, there are other ways to enhance your product displays and sale badges.

Using Custom Fonts

To make your prices or sale badges stand out even more, consider using a custom font:

.price {
  font-family: 'Your Custom Font', sans-serif;
  font-weight: bold;
}

Adding Hover Effects

Create interactive elements by adding hover effects to your prices:

.product-item__price:hover {
  color: #00ff00;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

Responsive Design Considerations

Ensure your customizations look good on all devices by using media queries:

@media screen and (max-width: 768px) {
  .product-item__label--on-sale {
    font-size: 10px;
    padding: 3px 6px;
  }
}

Troubleshooting Common Issues

If you’re experiencing problems with your customizations, here are some tips:

CSS Not Applying

• Make sure you’ve saved your changes in the theme editor.
• Clear your browser cache and refresh the page.
• Check if your CSS selectors are specific enough to override existing styles.

Unexpected Changes

• Use browser developer tools to inspect elements and see which CSS rules are being applied.
• Add !important to your CSS rules if needed, but use sparingly.

Theme Updates

Be aware that theme updates may overwrite your custom CSS. Always back up your customizations before updating your theme.

By following these guidelines, you should be able to successfully change the color of your product prices and sale badges in Shopify. Remember to test your changes across different pages and devices to ensure a consistent look throughout your store. With a little CSS knowledge and creativity, you can create a unique and eye-catching design that sets your Shopify store apart from the competition.