Cart And Buy Buttons
Updated 21 days agoThe Cart and Buy Buttons section controls how your primary purchase actions appear, allowing users to either add products to their cart or proceed directly to checkout. You can use it to guide users toward completing a purchase, offer flexibility between browsing (Add to Cart) and instant buying (Buy Now), and optimize how and where users take action.
These buttons play a key role in driving conversions, so it’s important to style them clearly and make them easy to interact with.
Add to Cart
Use the eye icon to enable or disable the Add to Cart button. This button allows users to add products to their cart for later checkout.
Text Style
You can customize:
-
Font – Choose a font that matches your brand
-
Size/Weight – Adjust how bold or subtle the text appears
-
Line Height – Control spacing between lines
-
Letter Spacing – Fine tune spacing between characters
-
Text Color – Choose a readable color
-
Alignment – Position the text within the button
-
Capitalization – Set how the text appears
Border
-
Color – Choose border color
-
Width – Adjust thickness
Icons (Left & Right)
-
Choose or Upload Icon – Add icons to enhance visual clarity
-
Icon Color – Customize the icon color to match your design
Buy Now
Use the eye icon to enable or disable the Buy Now button. This button allows users to skip the cart and proceed directly to checkout.
Text Style
You can customize:
-
Text – Add the button label
-
Font – Choose a font style
-
Size/Weight – Adjust size and boldness
-
Line Height – Control spacing
-
Letter Spacing – Adjust spacing between characters
-
Text Color – Choose a readable color
-
Alignment – Position the text inside the button
-
Capitalization – Set how the text appears
-
Background Color – Set the button background color to make it stand out
Border
-
Color – Choose border color
-
Width – Adjust thickness
Icons (Left & Right)
-
Choose or Upload Icon – Select or upload icons
-
Icon Color – Customize the icon color
Button Settings
Fine-tune the layout and positioning of the button.
-
Radius – Adjust corner roundness
-
Padding – Control inner spacing
-
Relation – Define spacing between text and icons
-
Arrangement – Decide how elements are placed inside the button
-
Position – Set whether the button appears sticky or is scrollable
Background and Spacing
This controls the layout of the entire button section.
Background:
-
Color – Set the section background color
-
Radius – Adjust corner roundness
-
Padding – Control spacing inside the section
-
Margin – Manage spacing outside the section
Border:
-
Color – Choose border color
-
Width – Adjust thickness
-
Sides – Select which sides should display the border
Benefits:
-
Directly impacts conversion rates and revenue
-
Reduces friction in the buying journey
-
Supports both browsing and instant purchase behavior
-
Improves visibility and accessibility with sticky positioning
Related Articles
