All Collections
Element Tutorials
A Guide to the Add to Cart Button
A Guide to the Add to Cart Button
The Add to Cart (ATC) Button lets customers shop your products from any Shogun page.
Written by Edward Savoy
Updated over a week ago

The Add to Cart Button is an essential call-to-action for any sales page. It allows your customers to add products to the cart, then proceed with the purchasing of your product.

How to Insert an Add to Cart Button

Adding an Add to Cart Button into your Shogun page is a breeze. 

  • First, drag a Product Box element into the location on the page where you'd like the button to appear.

  • Select which product and variant you'd like to sell.

  • Finally, drag the Product Add to Cart button into the Product Box.

Once the button is on the page, you can continue to configure its style and setting options as you see fit.

Setting the Add to Cart Button Text

The "Button text" field can be used to customize the wording that appears inside the button.

Styling Your Add to Cart Button Text

The style of the button's text can be customized with options to set the font's type, size, and color.

Customizing Sold Out & Unavailable Text

Alternate text will appear in your Add to Cart button based on the product's status. With these options, you can customize the wording and styles that display when a product is unavailable or sold out.

Setting the Click Behavior of Your Button

There are two options for what occurs when a customer clicks a Shogun Add to Cart button. The "Go to Cart" option will redirect customers to your store's cart page upon adding the product. With the "Stay on Page" option, the product will be added to the cart while the customer remains on the current page. This is useful when selling multiple products from the same page.

Note: If your store's theme has an AJAX cart, using the "Go to Cart" option is recommended.

Customizing the Success Message

If you choose the "Stay on Page" option for your button, a success message will appear when customers add a product to the cart. Options are available to customize the wording, size, color and font of that message.

Changing the Width of the Button

The "Stretch" option lets you change the width of the button. When the option is toggled off, the button will be as wide as the text within it. When the option is toggled on, the button with expand to be the full width of its containing element.

Did this answer your question?