Hide a product variant in a sale collection if it is not on sale

[Malissa_Medina]

I have a sale going on. Some products have multiple variants - some of which are NOT on sale. How can I have the products in my sale collection only show the variants that are on sale once someone clicks to the product page? I need to keep allowing those variants to show up for those products pages when they are present in other collections.

[goldi07]

Hello @Malissa_Medina 

To hide non-sale variants on the product page only when accessed from the sale collection, you can use Liquid and JavaScript to check if the product is being viewed within the sale collection and then hide the variants that are not on sale.

Steps to Implement:

1. Identify Sale Variants
. Sale variants can be identified if compare_at_price is greater than price.
2. Detect Sale Collection
. Use Liquid to check if the product page is accessed from the sale collection.
3. Hide Non-Sale Variants Using JavaScript
. If the product is being viewed from the sale collection, hide the variants that are not on sale.

Solution Implementation
A. Modify the product.liquid or main-product.liquid File
Locate the product.liquid or main-product.liquid file in your theme (Sections or Templates) and wrap the variant selector logic with a condition.

B. Add the Following Code:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    let urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get("collection") === "sale") { // Check if product is viewed from the Sale collection
      document.querySelectorAll('option[data-compare-price]').forEach(option => {
        if (parseFloat(option.dataset.comparePrice) <= parseFloat(option.dataset.price)) {
          option.style.display = "none"; // Hide variants not on sale
        }
      });

      // Optionally, remove the hidden variants from the dropdown to prevent selection
      let selectElement = document.querySelector('select[name="id"]');
      if (selectElement) {
        [...selectElement.options].forEach(option => {
          if (option.style.display === "none") {
            option.remove();
          }
        });
      }
    }
  });
</script>

<select name="id">
  {% for variant in product.variants %}
    <option 
      value="{{ variant.id }}" 
      data-price="{{ variant.price | money_without_currency }}"
      data-compare-price="{{ variant.compare_at_price | money_without_currency }}">
      {{ variant.title }} - {{ variant.price | money }}
    </option>
  {% endfor %}
</select>

How It Works:
1. Checks if the product page is accessed from the sale collection using collection=sale in the URL.
2. Loops through the variants and compares compare_at_price with price.
3. Hides variants that are not on sale by setting display: none.
4. Removes non-sale variants from the dropdown to prevent user selection.

Important Notes:
.  Works dynamically using JavaScript, so no impact on other collections.
.  Ensures non-sale variants are still available when accessed from other collections.
.  If using a different variant selection method (buttons instead of dropdown), adjust the script accordingly.

Thank you😊

[Malissa_Medina]

Thanks! I’ll try this asap and let you know if it works!

[Malissa_Medina]

Hi @goldi07 I'm not quite sure where to add this code. Can you give a bit more detail? I have identified  a sections/product.liquid file as well as a sections/sections-product liquid file.

[goldi07]

In product liquid file 

[Malissa_Medina]

@goldi07 just anywhere in there? It doesn't seem to be working.