Buy Button Profile Overview
We've restructured the Buy Button Template into three dedicated files, ensuring a seamless and efficient integration for your brand:
Buy Button HTML File – The core snippet that embeds the Buy Button directly onto your brand’s website.
Main JS File – Manages all Shopify API interactions for smooth transactions.
Profile JS File – Stores essential styling elements, including CSS settings, your Shopify Store’s domain, and Access Token details.
Every Buy Button must be associated with a Profile. When a Buy Button is generated:
The Buy Button HTML file passes Profile details to the Main JS file.
The Main JS file dynamically loads the appropriate Profile JS file to apply the corresponding CSS styling.
Custom Styling Options
Prefer to use your own styling? No problem! Brands can override Profile JS styling by defining custom configurations directly within the Buy Button HTML snippet, which will then be processed by the Main JS file.
Below are the Custom Parameters that can be passed along with the required values from the Buy Button HTML File:
Parameter Name | Values |
data-gift-note | Boolean Values: ”true” or “false” passed as String |
data-button-text | String to be included as the Button’s Text |
data-button-width | Numeric Value: for example: “10” passed as String |
data-button-corners | Numeric Value: for example: “10” passed as String |
data-checkout-text-1 | String to be included as the Checkout Text in the Cart Window |
data-checkout-text-2 | String to be included as the Checkout Text in the Cart Window |
data-button-font-size | Numeric Value: for example: “10” passed as String |
data-button-font-type | Font Name, for example: "'Gill Sans', sans-serif” |
data-button-text-color | Hexadecimal color code of the desired color passed as String. Must be a 6-character hex code prefixed with # |
data-button-background | Hexadecimal color code of the desired color passed as String. Must be a 6-character hex code prefixed with # |
data-button-font-weight | Values that decide the thickness of the font. For example: normal, bold, bolder, lighter |
data-button-border-color | Hexadecimal color code of the desired color passed as String. Must be a 6-character hex code prefixed with # |
data-button-border-width | Numeric Value passed as String that decides the thickness of the border in pixels. |
data-button-show-quantity | Boolean Values: ”true” or “false” passed as String |
data-button-layout-vertical | By default the Buy Button is configured to be centered (Shopify’s default behaviour). This can be customized by passing specific values to this parameter: “left”, “center”, “right”. |
data-button-letter-spacing | Value to adjust the spacing between the characters of the Buy Button’s Text passed as String. Default is “0.3” |
data-button-text-transform | Changes the text-case of the Buy Button and Checkout Button Text. Default: “none”; Values: “lowercase”, “uppercase” |
data-cart-text-letter-spacing | Value to adjust the spacing between the Line-Items Text and Footer Text passed as String. Default is “0” |
data-toggle-button-background | Hexadecimal color code to set the background of Toggle. Default is Buy Button’s Background Code from Profile JS |
data-toggle-button-border-color | Hexadecimal color code to set the border color of Toggle. Default is Buy Button’s Border Color Code from Profile JS |
data-checkout-button-background | Hexadecimal color code to set the background of Checkout. Default is Buy Button’s Background Code from Profile JS |
data-checkout-button-border-color | Hexadecimal color code to set the border color of Checkout. Default is Buy Button’s Border Color Code from Profile JS |
data-checkout-button-corners | Numeric Value: for example: “10” passed as String Default is Buy Button’s Corner Value from Profile JS |
data-button-padding-top | Number Value passed as String to adjust the Buy Button Padding. Default is 17 (Shopify’s default value) |
data-button-padding-bottom | Number Value passed as String to adjust the Buy Button Padding. Default is 17 (Shopify’s default value) |
data-checkout-button-padding-top | Number Value passed as String to adjust the Checkout Button Padding. Default is 17 (Shopify’s default value) |
data-checkout-button-padding-bottom | Number Value passed as String to adjust the Checkout Button Padding. Default is 17 (Shopify’s default value) |
data-subtotal-text-transform | Changes the text-case of the “subtotal” keyword. Default: “uppercase”; Values: “lowercase”, “none” |
data-cart-title-padding-top | Number Value passed as String to adjust the “Cart” keyword Padding. Default is 0 (Shopify’s default value) |
data-cart-title-padding-bottom | Number Value passed as String to adjust the “Cart” keyword Padding. Default is 0 (Shopify’s default value) |
Customizing the Buy Button: Implementation Flow
To personalize the Buy Button experience, customization parameters should be included within the div tag inside the HTML snippet. This div tag is responsible for generating the Product Component that houses the Buy Button.
Important:
Do not alter the existing div tag data—simply add your customization attributes below it.
Follow the structured format below to ensure seamless integration.
How to Implement Customization
Within the div tag of your HTML snippet, insert the required parameters along with their values as shown below:
Existing div Tag (Before Customization)
<div id="product-component-1740907796-8318086906009"
data-product-id="8318086906009"
data-profile-id="3d7ce72ccdfb1441"
data-timestamp="1740907796">
</div>
Updated div Tag (After Adding Custom Attributes)
<div id="product-component-1740907796-8318086906009"
data-product-id="8318086906009"
data-profile-id="3d7ce72ccdfb1441"
data-timestamp="1740907796"
data-gift-note="false"
data-button-text="Purchase Now"
data-button-width="30"
data-button-corners="20"
data-checkout-text-1="ABC"
data-checkout-text-2="XYZ"
data-button-font-size="20"
data-button-font-type="'Gill Sans', sans-serif"
data-button-text-color="#ffff"
data-button-background="#FF8C00"
data-button-font-weight="bold"
data-button-border-color="#FF8C00"
data-button-border-width="5"
data-button-show-quantity="false">
</div>
This structured approach ensures that your Buy Button is tailored to match your brand’s aesthetics while maintaining functionality.
Important Note
Flaviar Checkout provides a standard designer for seamless Buy Button customization. Any modifications made outside of this designer are considered advanced customizations. We do not provide support or troubleshooting for issues arising from custom implementations, including but not limited to incorrect formatting, styling conflicts, or functionality errors. Brands customizing beyond the standard designer do so at their own discretion and responsibility.
Looking for more info on how to manage an existing Profile? See our guide here on Managing Buy Button Profiles
Questions? Please email your account manager or [email protected] for assistance.