Fixing Sale Price Display Issues on Shopify Product Pages

In the world of e-commerce, displaying accurate pricing information is crucial for customer trust and conversion rates. Shopify store owners sometimes encounter issues where sale prices appear correctly on collection pages but fail to show up on individual product pages. This can be particularly frustrating when using popular themes like Brooklyn. In this blog post, we’ll explore various solutions to ensure your sale prices are displayed correctly across your entire Shopify store.

Understanding the Sale Price Display Problem

The Symptoms

Many Shopify merchants have reported a common issue: sale prices are visible on collection pages but mysteriously absent on individual product pages. This discrepancy can lead to confusion for customers and potentially lost sales.

Why It Matters

Proper display of sale prices is essential for:

1. Transparency in pricing
2. Encouraging purchases by highlighting savings
3. Maintaining consistency across your store

Common Causes

Several factors can contribute to this issue:

1. Theme settings misconfiguration
2. CSS styling conflicts
3. Liquid code inconsistencies

The Quick Fix: Check Your Theme Settings

Accessing Theme Settings

Before diving into code modifications, it’s crucial to check your theme settings. This is often the quickest and easiest solution to resolve sale price display issues.

Locating Sale Price Settings

1. Navigate to your Shopify admin panel
2. Go to “Online Store” > “Themes”
3. Click “Customize” on your active theme
4. Look for settings related to “Sale Tags” or “Sale Price Display”

Adjusting Color Settings

The most likely culprit is often a transparency setting for sale prices. Look for a color setting that might be set to transparent (e.g., rgba(0,0,0,0)). Changing this to a visible color should make your sale prices appear.

Advanced Solutions: Modifying Theme Code

If adjusting theme settings doesn’t resolve the issue, you may need to delve into your theme’s code.

Editing the Theme’s SCSS File

Step 1: Access Theme Files

1. In your Shopify admin, go to “Online Store” > “Themes”
2. Click “Actions” > “Edit code” on your current theme

Step 2: Locate the SCSS File

Find the theme.scss file in the “Assets” folder.

Step 3: Add Custom CSS

Add the following code to the bottom of your theme.scss file:

.price__sale {
  display: inline-block !important;
  color: #ff0000; // Adjust color as needed
}

This code ensures that sale prices are always displayed and sets them to a distinct color (red in this example).

Modifying the Product Template

If the SCSS modification doesn’t work, the issue might be in the product template itself.

Step 1: Locate the Product Template

In your theme files, find the product-template.liquid file under the “Sections” folder.

Step 2: Review and Adjust the Price Display Code

Look for a code block similar to this:

{% if product.compare_at_price > product.price %}
  <span class="price__sale">
    {{ product.price | money }}
  </span>
  <s class="price__compare">
    {{ product.compare_at_price | money }}
  </s>
{% else %}
  <span class="price__regular">
    {{ product.price | money }}
  </span>
{% endif %}

Ensure that this code is present and correctly formatted. If it’s missing or incorrect, add or adjust it accordingly.

Troubleshooting Common Issues

Sale Prices Not Updating

If you’ve made changes but don’t see them reflected:

1. Clear your browser cache
2. Use Shopify’s theme preview mode to check changes
3. Ensure you’ve saved all modifications

Inconsistent Display Across Devices

If sale prices appear on some devices but not others:

1. Check responsive design settings in your theme
2. Test on multiple browsers and devices
3. Consider using media queries in your custom CSS

Conflicts with Apps or Custom Code

Sometimes, third-party apps or custom code can interfere with price displays:

1. Temporarily disable apps to isolate the issue
2. Review any custom code snippets you’ve added
3. Consult with app developers if conflicts persist

Best Practices for Maintaining Proper Price Displays

Regular Theme Updates

Keep your Shopify theme updated to benefit from bug fixes and improvements that may address pricing display issues.

Consistent Testing

Regularly test your store on various devices and browsers to catch any display inconsistencies early.

Documentation of Changes

Maintain a log of any code changes or custom CSS additions to make troubleshooting easier in the future.

By following these steps and best practices, you should be able to resolve issues with sale price displays on your Shopify product pages. Remember, the most likely solution is often found in your theme settings, so always start there before making code modifications. With proper attention to detail and consistent maintenance, you can ensure that your customers always see accurate and attractive pricing information throughout your store.