How We Added Custom Option Buttons to Our Shopify Product Pages Without an App

You know how sometimes you can't help but feel like a mad scientist huddled over a concoction of crazy ideas? That was me last Saturday, fueled with caffeine and ambition, trying to figure out how we could add custom option buttons to our Shopify product pages. Apps are nifty, sure, but we wanted to go rogue—no apps, just like the renegades of e-commerce. Simple buttons. Pure functionality.

So picture this: It's just after midnight, and I’m there with my best friend, Google. We’re determined, nay, stubborn, in our pursuit of button simplicity. Now, let me take you on the wild ride of making these dream buttons come true, step by step, like Einstein with a keyboard.

The Dream Button Blueprint

Imagine those sleek, no-nonsense buttons, just sitting on a product page, inviting customers—nay, daring them—to add a charm, a necklace, or maybe a bracelet. The kind of buttons that speak for themselves, no flashy images, just pure unadulterated options. Who needs an app when you’ve got a trusty bunch of code and a burning desire for customization?

Alright, enough imaginative preamble. Here's how we cracked the code:

Step 1: Preparing the Theme Editor

First things first, you’ll want to make sure you're on friendly terms with your theme’s code. Trust me, it’s less scary than it sounds. Start by navigating over to your Shopify admin and find the ‘Online Store’ section. Once there, choose the ‘Themes’ option and click on ‘Customize.’ Before you ask your theme to dance a little differently, it’s only polite to make a backup copy of it—just in case things go awry and your digital world implodes.

Step 2: Embracing Liquid and HTML

Here’s where the magic happens. We’re going to sprinkle a mix of Liquid and HTML directly into the product template. Locate the file named product-template.liquid or possibly product.liquid within the ‘Sections’ or ‘Templates’ directory. This is like your canvas, your digital Sistine Chapel ceiling—minus the paint and profound sense of history.

Now, let's give this product page some pizzazz. Between the <form> tags, input a beautiful hunk of HTML to create those tantalizing buttons. Looks something like this:

<div class="custom-options">
  <button type="button" onclick="addToCart('charm')">Add Charm</button>
  <button type="button" onclick="addToCart('necklace')">Add Necklace</button>
  <button type="button" onclick="addToCart('bracelet')">Add Bracelet</button>
</div>

Step 3: Adding a Dash of JavaScript

But wait—buttons need a brain, hence, JavaScript. Now, we need to make sure our buttons do something when they’re clicked—that’s imperative. To sprinkle in functionality, we whip up a modest script within the same file. You’re a coder now, Harry!

Pop this JavaScript snippet below your HTML:

<script>
  function addToCart(item) {
    var addItem = {
      items: [{
        id: item,
        quantity: 1
      }]
    };
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(addItem)
    })
    .then(response => response.json())
    .catch(error => console.error('Error:', error));
  }
</script>

With this code, when a customer’s adventurous spirit leads them to click on a button, the product ID will be captured and added to their cart. No fuss.

Step 4: Styling with a Flare of CSS

Now those dazzling buttons need to look the part. A touch of CSS is all you need to give them some style oomph. Find your theme’s theme.scss.liquid or equivalent file and toss in some creative styles:

.custom-options button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin-right: 5px;
}

.custom-options button:hover {
  background-color: #0056b3;
}

Step 5: Testing the Digital Symphony

After all that effort, it’s time to test whether our handiwork stands true to its promise. Check your product page, click those delightfully simple buttons, and watch the magic unfold. Cheers to no-strings-attached customization!

In our shared expedition, we've crafted something beautiful and efficient—a few lines of code, a spark of inspiration, and the audacity to do it our way. Until the next stroke of genius strikes, here's to those midnight moments of digital creation. Drink up the knowledge, keep tinkering, and always embrace the quirky side of code.