💡 This guide provides a complete overview of Flaviar Checkout Buy Buttons, including how to create and manage Buy Button Profiles, generate embed code, and implement buttons on your website. It also covers customization options and best practices to ensure a consistent, compliant, and seamless checkout experience for your customers.
Creating Buy Button Profiles
Starting March 2025, Flaviar Checkout is launching Buy Button Profiles to simplify and enhance the creation and management of Buy Buttons.
Updated over a year ago
What is a Buy Button Profile?
A Buy Button Profile is a configuration template that defines the design and behavior of your Buy Buttons. Once created, it can be applied to multiple products, eliminating the need to recreate settings for each individual button.
How to access your Buy Button Profiles:
Log into Flaviar Checkout using your email & password
Find the menu in the top left corner > open the Product section > select Buy Button Profile from the drop down
Pro Tip: If you're already in your product page, click on the 'Manage Buy Button Profiles' Button in the top right corner of your screen
To create a new profile, click 'Add Profile'
Creating a New Profile for the first time:
Store: select your brand name from the drop down
Profile Name: Input a clear, unique name for your profile for easy referencing later
Button Text: Customize the text displayed on your button. Our default messaging is Add to cart, but you can customize this however you'd like
Font Type: Select from a robust list of fonts to match your branding
Not seeing your font on the list? Select 'Custom Font' to upload your own font file
Font size: Customize your font size here
Text color: Customize your text color here
Show Quantity Field: This allows customers to enter their desired quantity to cart. You can turn this on or off depending on your preference.
Gift Note Field: This allows customers to add a gift note to checkout. You can turn this on or off depending on your preference
Additional Customizations: You can further customize your button with other fields like button width, border width, border color, and button corner sizing.
Checkout Text 1 (optional): Add additional text to display on your cart
Checkout Text 2: This is reserved for Flaviar's compliance message. Please do not make changes to the text in this field.
Facebook Pixel ID: enter your Facebook Pixel ID here
Once you're finished customizing, please save your profile.
Now that your profile is saved, you can apply these customizations to one or more products using the steps below
Generating a Flaviar Checkout Buy Button
The buy button script generated from Flaviar Checkout allows you to integrate a customized Shopify Buy Button on your product detail pages (PDPs). This button enables customers to add products to their cart and proceed to checkout seamlessly, with checkout and fulfillment handled by third-party retailers on the Flaviar Checkout network.
Steps to Generate a Buy Button
1. Log into Flaviar Checkout
2. Navigate to the Products tab and select the product by clicking on the name
3. Once you're on the product detail page, select Checkout Button
4. On the checkout button design page, select your 'store' from the drop down
5. Select your buy button profile from the dropdown
If you'd like to create a new profile for your new button, please see the section at the top of this guide on Creating Buy Button Profiles
6. Once you've selected your store and your desired buy button profile, click 'Generate Buy Button' to get your code!
Install your Buy Button script onto your website:
The process of adding embed code to your website's source HTML is a bit different depending on how and where you want your Buy Buttons and cart to , on your publishing platform, and sometimes on the theme you're using on that platform.
This script makes it easy to integrate Shopify functionality with Flaviar Checkout, ensuring a seamless experience for your customers while maintaining your compliance and branding requirements.
Managing Buy Button Profiles
How to access your Buy Button Profiles
Log into Flaviar Checkout using your email & password
Find the menu in the top left corner > open the Product section > select Buy Button Profile from the drop down
Pro Tip: If you're already in your product page, click on the 'Manage Buy Button Profiles' Button in the top right corner of your screen
Click on the Profile name you'd like to make changes in order to open up the designer.
Customize the look & feel of your button using the customization options provided.
Hit Save Profile once you're ready for your changes to go live!
Once you save your changes, these updates will take place on your website in real time for any buttons connected to this profile. This means you do not need to regenerate your buy button code in order for these changes to go into affect.
However, if the profile is not connected to live buttons, you will need to connect the profiles with your product(s) & generate the buy button code.
You can apply these customizations to one or more products using the steps below
Find the menu in the top left corner > open the Product section > select Products from the drop down
Click on the name of the product you'd like to generate a Buy Button for
Click on 'Checkout button' in the top right corner of your page
Not seeing 'Checkout button' yet? Please reach out to your account manager or [email protected] for more info.
Select your brand name from the Store drop down
If you do not see your store name, Please reach out to your account manager or [email protected] for assistance.
Select your profile name from the Profile drop down
Generate Buy Button
Copy the code & paste it onto your site!
Customizations
We recommend using our buy button profile designer to implement your customizations.
We do not recommend customizing your buttons outside of our designer, as we cannot guarantee we will be able to troubleshoot any issues that may arise due to the customization.
If there is a customization you'd like to make that is missing from our button designer, please let our team know and we'll see how we can best support your request.
How To Use Custom Fonts
Fonts can be set by Flaviar Checkout customizer and manually in the button’s code. We've tested this with many different fonts and it supports any fonts natively supported by the browsers.
This is an font overriding example:
For advanced customizations, please refer to our detailed Buy Button Profiles: Advanced Customization guide
Questions? Please email your account manager or [email protected] for assistance.