How to Upgrade Buy Button Code from Old Shopify Buy Buttons to New Shopify Buy Buttons
Introduction
Upgrading your Shopify Buy Button code ensures that your website benefits from the latest features, improved performance, and enhanced security provided by Shopify. This guide will walk you through the steps to replace the old Shopify Buy Button code with the new version on your website.
Steps to Upgrade Your Buy Button Code
Step 1: Remove the Old Buy Button Code
Locate the Old Code:
Open the HTML file(s) where the old Barcart Buy Button code is embedded.
Search for the
<script>tag or any related HTML element that contains the old Buy Button code.
Delete the Old Code:
Remove the old
<script>tag and any associated HTML elements that display the Buy Button.
Step 2: Generate New Buy Button Code in Flaviar Checkout
Log into Flaviar Checkout:
Go to your Flaviar Checkout admin panel and log in.
Navigate to your Products:
From the dashboard select 'Product' from the menu drop-down & select 'Product' once more from the sub-menu.
Create a Buy Button:
Click on the product you wish to generate new code for (if you have multiple products, you will need to do this one at a time.)
Once you're on the product detail page, select 'Checkout Button' from the list of actions at the top of the page.
Design your Button:
Select your brand name from the Store Drop Down
Customize your button's font, color, checkout text, etc., using the editor.
Generate Code:
Once you have designed your Buy Button, click on Generate Buy Button.
Copy the generated code to your clipboard.
Step 3: Add New Buy Button Code to Your Website
Access Your Website’s HTML Files:
Open the HTML file(s) where you want to place the new Flaviar Checkout Buy Button.
Paste the New Code:
Paste the new Shopify Buy Button code in the desired location within the HTML file.
Ensure any related HTML elements are correctly placed and formatted.
Very Important - Repeat for all of your products:
Steps 1, 2, and 3 from this guide must be repeated for all of your products.
Save and Test:
Save the changes to your HTML file.
Open your website in a browser to ensure the new Buy Button is displaying correctly and functioning as expected.
Step 4: Verify and Troubleshoot
Verify Functionality:
Test the new Buy Button by adding products to the cart and proceeding to checkout to ensure everything works smoothly.
Troubleshoot Issues:
If the Buy Button does not appear or function correctly, double-check the following:
Ensure the new code is correctly placed within the HTML file.
Check for any JavaScript errors in the browser’s developer console.
If you have multiple products, make sure they all have the buy button code installed.
Seek Help if Needed:
If you encounter any issues that you cannot resolve, contact our team at [email protected] for further assistance!
Conclusion
Upgrading your Shopify Buy Button code is a straightforward process that can significantly enhance your website’s functionality and user experience. By following the steps outlined in this guide, you can ensure a smooth transition from the old Buy Button code to the new one. If you have any questions or need further assistance, please don't hesitate to reach out to our support team at [email protected]