Adding the Crossed-Out 'Compare-At' Price in Shopify's Parallax Theme: A Journey into Code

Ah, the sweet symphony of adding a "compare-at" price to the shopping cart—a feature yearning to be adopted, yet mysteriously overlooked. Much like our cherished orange cat, Felix, who can never resist a good cardboard box, we too have found ourselves pulled into this digital puzzle. The mission? Integrate that enticing crossed-out price into the cart drawer and static page, bringing clarity and joy to our shop's visitors. Let’s embark on this odyssey together.

Step 1: Setting the Stage

Imagine this: You’re cozied up with your favorite cup of coffee, your laptop aglow with the burning desire to tweak that Parallax theme. We begin our journey in the Shopify Admin. Breathe deep—it's time to dive into the code ocean with vim and vigor.

Accessing the Theme Editor

Navigate to your Shopify Admin page, and click on 'Online Store'. From there, it’s a swift hop to 'Themes', and then a joyous skip to 'Actions'. Here, the door opens to 'Edit Code'. Cue the majestic swell of the orchestra—our adventure is truly underway.

Step 2: Venture into Code Lands

The Parallax theme, like every epic tale, has its twists and turns. Our aim is to reach the snippets and templates where price magic happens. The key players? cart.liquid and cart-drawer.liquid.

Editing the Cart Template

First stop, cart.liquid. Here we add the groundwork for the compare-at price. Find that clever line of code within the file that says something akin to:

{{ item.price | money }}

Ah, now we get to sprinkle in our magic:

{% if item.compare_at_price > item.price %}
  <span class="compare-at-price">{{ item.compare_at_price | money }}</span>
{% endif %}

Our hearts pound. With this, elegance unfolds—a crossed-out price that gleefully nests itself alongside the item price.

The Cart Drawer Dance

Next, pirouette your way to cart-drawer.liquid. This snippet, so often overlooked, is where the immediate cart view resides. As before, scurry to find the display code for the item price and weave the same script there:

{% if item.compare_at_price > item.price %}
  <span class="compare-at-price">{{ item.compare_at_price | money }}</span>
{% endif %}

Like the soft purr of Felix resting after a long day, our code aligns perfectly with our goal.

Step 3: A Style Sheet Symphony

Our journey, though nearing its end, wouldn't be complete without a flourish of style—how else would our prices wear that delightful strike-through? Float to the theme.css.liquid file. Here, a cascade of style rains down upon our creation:

.compare-at-price {
  text-decoration: line-through;
  color: #c0c0c0; /* Stylishly grey */
  margin-right: 10px;
}

Like the distinct swipe of a fine paintbrush on canvas, our styles bring the final touch.

Epilogue: The Joy of Little Changes

With that, we upload our blessings and view the fruits of our labor. The crossed-out prices now standing proudly in your cart, whispering tales of savings yet to come. Just like how Felix eventually lounges contentedly atop his newly conquered cardboard, we too bask in this accomplishment.

Isn’t it magical? A little tweak here, a CSS sprinkle there—our store feels cleaner, smarter, and more intentional. In the grand tapestry of web experiments and treasures, every small victory counts, stitching together a bigger, brighter shop tapestry for our visitors.

Here’s to crafting experiences both on-screen and off, guiding our audience through small yet meaningful visual narratives. Until next time, dear friends, may your code be clean and your sales many!