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
You can edit the text on an Add to Cart button by:
Clicking on the Button element
In the right side menu under the Button tab click on the Button Text field
Customize the wording
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.
You can edit the Add to Cart buttons style by:
Clicking on the Button element
In the right side menu under the Button tab click on the Default Style
Customize the styling
You can also adjust the Add to Cart buttons Hover and Active Styles in the same way.
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.
To locate these options click on the Add to Cart button and then the Unavailable & Sold Out tab in the right side menu:
Setting the Click Behavior of Your Button
There are three options for what occurs when a customer clicks a Shogun Add to Cart button and opens the Button tab.
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.
"Go directly to checkout" will take the visitor directly to the store's checkout page with the product preloaded.
Note: If your store's theme has an AJAX cart you may not find that "Stay on Page" updates the cart counter, however, you can find code workarounds to that issue here.
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.
FAQs
How do I modify the function of Shogun's Add to Cart to pass custom attributes?
We maintain the selected attribute IDs in the frontend framework on which Shogun is built. It is not pure Javascript. We can tell you that there are two types of add-to-cart flows: URL-based and form-based.
Depending on the store's flow, we either put the variant ID into the URL or provide it as a form value. When the user clicks the add-to-cart button, we either redirect the page to the URL or submit the add-to-cart form. In either case, the current variant ID is included.
This is as much guidance as we are able to provide on designing custom code to work around this feature.