Buy Button FAQ
On this page
- Can I add a Buy Button to my Shopify online store?
- How do I remove the Buy Button channel from my Shopify admin?
- How do I remove a Buy Button from my webpage?
- Can I update an existing Buy Button to show a different product?
- When creating a Buy Button, what can the additional information field be used for?
- What payment gateways can I use with my Buy Button?
- How can I change the appearance of an existing Buy Button?
- Why isn't my Buy Button working with my app?
- How do I troubleshoot Buy Button issues?
- Where do I create a cart permalink?
Can I add a Buy Button to my Shopify online store?
It isn't recommended to add Buy Buttons to your Shopify online store or Shopify blog because they can cause problems with the cart for the online store. Instead, consider using permalinks to pre-load the cart.
How do I remove the Buy Button channel from my Shopify admin?
From your Shopify admin, go to Settings > Sales channels.
For the Buy Button channel, click … > Uninstall.
In the Uninstall Buy Button? dialog, select I understand the risks of uninstalling this sales channel.
Optional: Under Reason for uninstalling, select any applicable reasons from the drop-down menu, and share any feedback in the text field.
Click Uninstall.
How do I remove a Buy Button from my webpage?
Delete the embed code that you added to your webpage.
Can I update an existing Buy Button to show a different product?
Yes, by editing the embed code. You can change the id attribute in the embed code to correspond with a different product. Otherwise you must create a new Buy Button in Shopify that features the product you want, and then generate new embed code to replace the embed code for the previous Buy Button.
When creating a Buy Button, what can the additional information field be used for?
The additional information field lets you communicate a message to your customers. The message appears on the customer's cart. An example of a message might be that taxes are calculated at checkout.
What payment gateways can I use with my Buy Button?
You need to use a supported payment gateway to use Buy Button. To see a list of supported payment gateways in your country or region, refer to Payment information by country or region.
How can I change the appearance of an existing Buy Button?
The simplest way to change the appearance or settings of an existing Buy Button is to recreate it and replace the existing code with the new code. Another option is to follow this advanced tutorial to make the changes.
If you need help changing the appearance, then you can hire a Shopify Partner. Learn more about hiring a Shopify Partner.
Why isn't my Buy Button working with my app?
Buy Buttons aren't compatible with apps from the Shopify App Store. For example, if you have a product review app, then it won't work with a Buy Button.
How do I troubleshoot Buy Button issues?
If your Buy Button isn't working as expected, you can use these troubleshooting steps to identify and resolve common issues:
Check for CSS (Cascading Style Sheets) conflicts
Sometimes the CSS in your website can interfere with the Buy Button's styling. For example, if CSS sets display: hidden; for iframe elements, then the Buy Button becomes invisible.
Another common issue is when the button's height is calculated incorrectly or set to 0. If this happens, try recreating your Buy Button with different layout settings in your Shopify admin, as the built-in customization options typically resolve height issues better than custom CSS.
To review for CSS conflicts:
- Open your browser's Developer Tools (press F12 in Chrome).
- Select the Buy Button area and examine the HTML in the Elements tab.
- Review the Styles panel to see if any CSS rules are affecting the button's visibility or layout.
Review for JavaScript errors
JavaScript conflicts can prevent Buy Buttons from appearing or functioning properly. To review for JavaScript errors:
- Open your browser's Developer Tools.
- Go to the Console tab.
- Review any error messages that appear when the page loads or when you interact with the Buy Button.
Common JavaScript errors include missing script dependencies or conflicts with other scripts on your website.
Verify the product exists
If you're getting 404 errors, then the product might have been deleted and replaced. Compare the product ID in your Buy Button code with the product ID in your Shopify admin to confirm they match.
Test on a simple HTML page
To determine if the issue is with your Buy Button or your website:
- Create a simple HTML file with only your Buy Button code.
- Open the file in your browser to see if the button works correctly.
- If it works on the simple page but not on your website, then the issue is likely with your website's CSS or JavaScript.
Confirm it's a Shopify Buy Button
Sometimes buttons that look like Shopify Buy Buttons are actually third-party solutions. To verify you're using a Shopify Buy Button:
- Open Developer Tools and inspect the button.
- Review the HTML for Shopify-specific code.
- Confirm the Network tab shows calls to
buy-button-storefront.min.js.
If you can't resolve the issue using these steps, then consider hiring a Shopify Partner for assistance. Learn more about hiring a Shopify Partner.
Where do I create a cart permalink?
To create a cart permalink, you need to be on the details page for the product. Learn how to create a cart permalink.