How We Tamed the Unbranded Checkout Button on Shopify’s Product Page

So, picture this: It's a lazy Sunday morning, and we’re lounging around with cups of steaming coffee. You know, that perfect state when the world is still waking up and you’re free to ponder life’s great mysteries. Today’s puzzler? Why doesn’t Shopify let us have that simple, unassuming "Buy it now" button on our product pages without all the branded frippery? Our friend Marianna had voiced her frustration about this on the Shopify forums, and we just had to dive in.

The quest for the “Buy it now” button, free of cult logos, was a noble one. It’s like craving a plain bagel among a sea of everything bagels at breakfast time. Simple can often be a beautiful thing. Our challenge: to bring this minimalist dream to life—and to keep the purchasing world open for every checkout method under the sun.

The Lightbulb Moment

In the shadow of this digital conundrum, we had a eureka moment - yes, like something out of a quirky sitcom. A code-related epiphany, if you will, where our scattered thoughts aligned like jovial ducks in a row. We realized that achieving our goal was possible with a little bit of coding magic. So, gather round, friends. Here’s how to transform that Shopify product page with some nifty code tinkering—which might sound swanky but, trust us, is as straightforward as a walk in the park on a sunny day.

Step 1: Crafting the Perfect HTML

First, we dived into theme customization. Imagine it like rummaging through a closet to find that one ideal outfit. Head to the Edit code section of your Shopify theme. Navigate your way to the Sections folder and open product-template.liquid—this file is the stage for our HTML adventure.

In this file, you'll locate the spot where you want your new "Buy it now" button to appear. It's usually right near the beginnings of the staring contest between your eyes and the array of code lines associated with product buttons. Here, we insert a humble HTML button. A simple presence, yet mighty in purpose:

<button id="unbranded-buy-now" class="btn">Buy it now</button>

Step 2: Harnessing JavaScript for Dynamic Actions

Of course, a button without action is just a shiny bauble. It needs to speak the language of wizardry—JavaScript. Picture a trusty sidekick navigating the quirky challenges of a medieval quest.

Jump into the Assets directory amidst your Shopify theme files. Either add your own custom.js file or work within an existing one, and then insert the following script:

document.getElementById('unbranded-buy-now').addEventListener('click', function () {
  const form = document.querySelector('form[action="/cart/add"]')
  if (form) {
    const formData = new FormData(form)
    fetch('/cart/add.js', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        window.location.href = '/checkout'
      })
      .catch((error) => console.error('Error:', error))
  }
})

This snippet of JavaScript is your ticket to a seamless journey from button-click to checkout initiation—a journey devoid of logos, proudly owning its unbranded identity.

Step 3: Adding a Touch of Style with CSS

We could leave our button bare, but where’s the joy in that? It's like leaving ice cream without sprinkles. Adding some CSS flair can make it pop without screaming for attention—ah, the sweet balance of life. To do this, locate your theme's CSS file, usually found in the Assets folder under a name like theme.css.

Sprinkle in some style:

#unbranded-buy-now {
  background-color: #000; /* Or whatever color compliments your theme */
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

Embracing the New Simplicity

With a skip in our step - and a gratifying sense of conquest - our product page now boasted a "Buy it now" button, unbranded and proud, quietly whispering promises of ease and choice without the overpowering personalities of their branded cousins. And there we had it—a delightful button transformation that’s as impactful as a quiet hero in a bustling market.

Of course, as with all journeys of discovery, pragmatism accompanied us. We made sure to test our changes across various browsers and devices—because life, much like web development, adores its quirks and surprises.

So here’s to Marianna and to every other Shopify sojourner seeking simplicity. We’ve found our solution, and with it, a little piece of tranquility in the ever-evolving tapestry of e-commerce. That’s definitely worth savoring, alongside a good cup of coffee, as we reflect on our Sunday musings. Cheers to simple, joyful solutions!