How We Added ‘Get Bulk Pricing’ & ‘Make an Offer’ Buttons on Our Shopify Product Page

Let's rewind the clock a bit. Picture this: we're standing in our home office, staring down at a Shopify product page that looked just like the countless others we've seen online. Buttons, images, prices—nothing truly screamed out innovation or conversion. I turned to my partner, Alex, who was juggling a cup of lukewarm coffee and a head full of brilliance, and said, "Why don't we offer something a bit more engaging, like letting customers make an offer or request bulk pricing right from the product page?" Alex, in that moment of caffeine-induced clarity, pointed to our unused whiteboard and declared, "Let's get cracking on that!”

Fast forward to today, and our Shopify store is brimming with these new, shiny buttons that not only guide our customers but also feel like a warm invitation to actively partake in our product-purchasing journey. Let’s delve into how we assembled this interactive design puzzle without going mad over codes or configurations.

The Genesis of an Idea:

We knew that prompts like "Get Bulk Pricing" and "Don't like the price? Make an offer!" were not just trendy hooks. They were potential bridges to our customers’ hearts—a way to connect, converse, and co-create value. This realization was like uncovering the quiet magic of pen pals in a digital age. So, we buckled down and laid out our grand plan.

Step 1: The Button Design

Alex was quite the visionary with his sketches. We weren’t just going to slap a button on the page—oh no. The buttons had to be as inviting as that first sip of coffee in the morning. We hunted down the essence of simplicity and appeal, making sure the design didn’t just blend in.

Here's how we recreated the magic:

Open your Shopify Admin and navigate to Online Store > Themes. Click on Actions beside your theme and choose Edit Code. Now, in the sidebar, head down to the Sections folder. Here’s where we’ll plant our masterpiece.

Locate product-template.liquid—it's like finding the secret door in an old library. Once inside, we’ll insert our HTML right after the product variant section:

<!-- Custom Buttons Begin -->
<div class="custom-buttons">
  <button id="bulkPricingBtn" class="btn">Get Bulk Pricing</button>
  <button id="makeOfferBtn" class="btn">Don't like the price? Make an Offer!</button>
</div>
<!-- Custom Buttons End -->

Seeing those buttons materialize on the page for the first time? Pure magic.

Step 2: Adding the Pop-Up Functionality:

Remember how tech ahead we felt when setting our first email? Well, this part had a similar vibe. We wanted these buttons to whisper to the customers, "Hey, click me for something cool!” But a whisper with style—hence, the pop-up.

Little Amelia (our cat) watched intently as we pieced together the JavaScript jigsaw:

Within the same product-template.liquid, just before the closing </body> tag, add:

<script>
  document.getElementById('bulkPricingBtn').onclick = function() {
    alert("Enter your details for bulk pricing!");
  };

  document.getElementById('makeOfferBtn').onclick = function() {
    alert("Enter your preferred price!");
  };
</script>

And just like that, we’d created a seamless popup experience—no need for flashy plugin downloads or wonky workflows—simple and elegant.

Step 3: Styling and Finesse

When evening hit, and our minds were a cocktail of excitement and exhaustion, we tweaked the CSS—because boy, do first impressions count. Those buttons needed to be as bold as our dream.

In assets/theme.css.liquid, pop this in, like sprinkling the galaxy with stars:

.custom-buttons .btn {
  background-color: #007acc;
  color: white;
  padding: 10px 20px;
  margin: 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.custom-buttons .btn:hover {
  background-color: #005f99;
}

We sat back and marveled at our Shopify product page, grinning devilishly over our shared pot of late-night mac and cheese. These buttons were more than just a couple of clicks and some code lines—they were our front-line warriors, our conversation starters, our silent salespeople inviting every guest to consider, converse, and convert.

And as Alex and I watched little Amelia nestle against the glowing warmth of our laptop, we knew we’d taken a giant leap towards a more interactive customer experience.

Now, dear reader, it's your turn. Grab your cuppa and dive into your Shopify setup—exciting tweaks await! Simple actions can make profound impacts, much like adding two humble buttons to an ordinary product page. Happy coding, friends!