Advice and answers from the Buildify Team help center

Before you can customize Add to Cart widget, add product. You can do it in the section "Content". Just press the button "Choose product" and select a necessary item. Now you can customize the button.

Content Settings

Add to Cart

  • Alignment - set button's position on the page.
  • Width - set a width of the button.
  • Product and variant - choose product and variant of the product.
  • Button type - choose color type of the button.
  • Button text - change the inner text of the button if you need.
  • Button size - set button's size (extra large, large, medium, small, extra small).
  • Icon - select icon for the button. 
  • Icon position - set the icon before or after the text.
  • Icon spacing - set the distance between text and icon inside the button.
  • Additional products - you can allow submitting additional products with one add to cart button.

Quantity Selection

If you turn the quantity selection, a customer will be able to choose product quantity by themselves. Also, you will need to set:

  • text alignment;
  • input size;
  • width;
  • position (put the button under or inline with Add to Cart button).

Variant Selection

Allow variant selection, if you want a customer to choose the product variant by themselves if a product contains variants.

  • Position - set position of the selection section.
  • Width - set a width of the button.
  • Text alignment - set text alignment inside the button.
  • Selection size - set the size of the selection section.
  • Button unavaible - enter appropriate text.
  • Button sold out - enter appropriate text.

Style Settings

Button

for Normal position are available next settings:

  • Typography
  • Text and background color 
  • Border type and radius
  • Box shadow
  • Button padding and margin

for Hover position are available next settings:

  • Color settings - text, background, border color.
  • Animation - set the animation for the section.
  • Border type and radius.
  • Box shadow - add special effects for the button.
  • Button padding and margin.

Quantity Selection

  • Typography
  • Text and background color 
  • Border type and radius
  • Box shadow
  • Quantity padding and margin

Variant Selection

  • Typography
  • Text and background color 
  • Border type and radius
  • Box shadow
  • Switcher padding and margin 

Advanced Settings

  1. Element Style (margin, padding, entrance appearance).
  2. Background & Border (type, radius, box shadow).
  3. Responsive (hide or show it on a desktop, tablet, mobile).

 

Did this answer your question?

Contact Us
Chat