Show Unit Price on the Collection Page with the Symmetry Theme: A How-To Adventure

Once upon a time, in the bustling world of e-commerce, there was a humble wholesaler. Let's call them Wholesome Wholesaler Co. Now, Wholesome Wholesaler had a challenge—a quest, if you will—to display unit prices alongside pack prices on the collection pages of their Shopify store using the Symmetry theme. Enter our story, where we set out on a culinary coding journey to solve this conundrum. Grab your cup of ambition, and let's dive in!

Unveiling the Mystical Code

As any code sage will tell you, the solution often hides in plain sight, shrouded in lines of code. Wholesome Wholesaler had already crafted a nifty piece of code that danced gracefully on the product page, revealing the coveted unit price. But alas, on the collection page, where the code could not freely roam, it remained hidden. Still, do not fret! We'll take this code and coax it into action on the collection page, like a maestro coaxing a symphony from chaos.

Here's the original spell of code crafted by the artisans at Wholesome Wholesaler:

{% assign variant = current_variant | default: product.variants.first %}
{% assign price = variant.price | default: 1999 %}
{% assign size_value = variant.options[1] %}
{% assign total_units = 0 %}
{% if size_value == "S-M-L-XL(2-2-2-2)" %}
  {% assign total_units = 8 %}
{% elsif size_value == "S-M-L(2-2-2)" %}
  {% assign total_units = 6 %}
{% endif %}

<div class="custom-price-section">
  <div class="price__default">
    <span class="price__label">Unit Price:</span>
    <span class="price__current">
      {% if total_units > 0 %}
        {% assign unit_price = price | divided_by: total_units %}
        {% if show_currency_code %}
          {{ unit_price | money_with_currency }}
        {% else %}
          {{ unit_price | money }}
        {% endif %}
      {% else %}
        {% if show_currency_code %}
          {{ price | money_with_currency }}
        {% else %}
          {{ price | money }}
        {% endif %}
      {% endif %}
    </span>
  </div>
</div>

Notice how it bends to the whims of sizes and prices, calculating and displaying with elegance? But the collection pages? Ah, they need a different kind of magic.

The Symphony of Themes and Templates

Okay, on to the nitty-gritty—let’s remix that code for the collection pages of the Symmetry theme. Imagine us now as digital sculptors, chiseling away at lines of Liquid.

Step 1: Plan Our Attack

Let’s access our Shopify admin panel. Channel your inner programmer and navigate to Online Store > Themes > Actions > Edit Code. Feel the energy course through your veins.

Step 2: Locate the Arena

Seek out collection-template.liquid within the sections or templates folder. Imagine it like finding a needle in a haystack with laser precision.

Step 3: Pour the Magic Potion

We can't directly paste Liquid on the collection page as we did on the product page. Instead, let's craft a snippet (think of it as a versatile sidekick). Create a new snippet—name it something epic, like unit-price-display.

Step 4: Transmute Code

In the snippet you just birthed, fashion it after your noble product page code, with a twist. We must inform relevant components. Instead of current_variant, you'll use a loop to iterate over each product.

Here's how it might look:

{% for product in collection.products %}
  {% for variant in product.variants %}
    {% assign price = variant.price %}
    {% assign size_value = variant.options[1] %}
    {% assign total_units = 0 %}

    {% if size_value == "S-M-L-XL(2-2-2-2)" %}
      {% assign total_units = 8 %}
    {% endif %}

    <div class="custom-price-section">
      <span class="price__label">Unit Price:</span>
      {% if total_units > 0 %}
        {% assign unit_price = price | divided_by: total_units %}
        {{ unit_price | money }}
      {% endif %}
    </div>
  {% endfor %}
{% endfor %}

Step 5: Summon the Snippet

With snippet done, return to collection-template.liquid and invoke your creation like a digital incantation: {% include 'unit-price-display' %} somewhere strategic, after listing product names or images.

Revel in Glory

Ah, there we have it—unit prices displayed gallantly alongside pack prices on your collection page, bringing forth order from chaos. With this new-found wizardry, we've not only enhanced Wholesome Wholesaler’s site but also created a tale of triumph and camaraderie in the wild, wild world of e-commerce. Go forth and conquer, code monger. 🌟