Customize Buy Button Sales Channel For Outside Website

[skylerv]

Hey Guys!

I am looking to see if there are any app options to create a more customized buy button.  I am planning to use the code from the buy button sales channel and put on my own website but would like more customization.  I am not loving the dropdown for variants and would like more of a selectable button style for variants.  Again, this is not the customization on the theme itself- just the buy button from the sales channel panel.  Below is what I am looking for.  Thanks in advance!

Current Option (default)	What I would like instead of the dropdown for variant options

[MandasaTech]

Hi @skylerv 

You're absolutely right — the default Buy Button from the Shopify Buy Button Sales Channel has limited customization options, especially when it comes to styling variant selectors (like replacing dropdowns with clickable buttons).

Here are a few app and code-based options to achieve a custom-styled Buy Button:

1. Use Shopify Buy Button SDK (for developers / more control)

Instead of just using the default embed code, you can use the Shopify Buy Button JS SDK, which gives you full control over the HTML/CSS and how variants are displayed.

With this SDK, you can:

• Replace dropdowns with custom radio buttons or variant swatches

• Control layout and style completely

• Customize button behavior, quantity, and more

2. Use an App like Shogun or PageFly (if using landing pages)

If you’re building a custom landing page or external site:

• Shogun or PageFly (used alongside Shopify Buy Button) lets you build more advanced layouts with custom buttons and variant pickers

• These tools may also support HTML/JS blocks where you can drop the SDK

3. Custom HTML + CSS Approach

If you’re embedding on your own website and have some dev knowledge:

• Use the Buy Button SDK

• Render your own variant buttons (radio-style or color swatches)

• Hook those into the cart logic using JavaScript

Here’s a simple idea:

<!-- Custom variant buttons -->
<button onclick="selectVariant('12345')">Small</button>
<button onclick="selectVariant('67890')">Medium</button>
<!-- Replace dropdown with this custom UI -->

Please Note:

The regular Buy Button embed code is great for quick use, but if you're aiming for a seamless, branded experience — the Buy Button SDK is your best bet.

Let me know if you have any questions!

[Moeed]

Hey @skylerv 

If by default, changing the variant button style from dropdown to a list of button isn't supported by your theme then you will have to make some code changes within your theme files. 

This will require good coding knowledge so if you're not familiar with coding then I would highly recommend you to hire a Shopify developer who can help out with that. Feel free to connect with me and I would be more than to give a helping hand.

Best,

Moeed