Button element – Settings and how to config it

Button element help you to create attractive and eye-catching with multiple color and styling options.

It becomes most powerful when playing function as an “Add To Cart” button. From Settings panel you can easily turn on this function.

Shop Builder Kit Button Element
Shop Builder Kit Button Element

Function and Explanation

Settings
Field Function Notice
Button Text Type your button text here
Select A Font (From Google Font)  Select font for your Buttons.  Fonts are currently supported only Google Fonts.
Use As Product Add To Cart Enable this to make this button become an “Add to cart” button.
Choose Product Or Pick A Product Here  Pick a product which you want “Add to cart” function trigger into.  Tick to Use As Product Add To Cart to enable this field
Add Custom Form ID (Use For Ajax Add To Cart)  As explanation, this option will help you add an custom ID to form. Shopify Ajaxcart often trigger via form id so you may need this.  Need hit SAVE by yourself.
Add Custom Form Class  Custom form class
Show Icon?  Enable icon in button
Choose Your Icon  Choose button icon to use  This field only shown when you tick the above box.
Icon Position Change icon from Left to Right  This field only shown when you tick the above box.
On Click  Enter your javascript function you want this button trigger when customer hit on it.
Custom Button ID  Custom button ID
Add Your Custom Class Here Add class to button element. This used for custom css styles.
Add Your Custom Wrap Class Here  Add class to button element wrapper. This used for custom css styles.
Design Options
The very basic Settings for text, including: Text color, Font size, Line height, Font style, Font weight, Text transform, Text align and Letter Spacing…..