Add to Cart Button

The Add to cart button content element is used on the product details page in several scenarios.

1. You can add the Add to cart button to the product details page.
   
   
   

2. You can add the Select variants button to the product details page if you use the matrix display mode to present the product variants.

   If product variants contain up to two product dimensions, for example color and size, product variants can be shown in the web store either in the dropdown or matrix display mode, depending on the selected page layout in Sana Admin.
   
   
   

You can add different product variants to a product in the ERP system. Product variants are used to manage products which have different variations, like size, color, style etc. There may be some differences depending on the ERP system you are using. Not all ERP systems support product variants.

For more information about how to set up product variants in the ERP systems, see the articles listed below.

Microsoft Dynamics NAV: Item Variants
Microsoft Dynamics AX: Product Variants
Microsoft Dynamics 365 Business Central: Item Variants
Microsoft Dynamics 365 for Finance and Operations: Product Variants
SAP Business One: Item Variants
SAP ERP: Product Variants
SAP S/4HANA: Product Variants


3. You can add the Configure button if you configure the products directly on the product details page using the e-Con Product Configurator.
   
   
   

If a product has a Configurator Model in your ERP system, customers can configure this product on the product details page in a Sana webstore using the e-Con Product Configurator. Instead of the Add to cart button there will be the button Configure for configurable products in the Sana webstore.

When a customer clicks on the Configure button on the product details page in the Sana webstore, the e-Con Product Configurator will open. There a user will be able to configure a custom product depending on the e-Con model assigned to it.

For more information, see e-Con Product Configurator.

Change the Text of the Add to Cart Button

Many webstores name the button as Add to cart. However, you might prefer to use other words based on your needs where you want to use the Add to cart button content element.

• If you add the Add to cart button to the product details page, you might name it Add to basket, Add to bag, Book now, Buy now, or whatever text you like.

• If you are using the Add to cart button content element to add the button Select variants if product variants are presented in the matrix display mode, you might rename the button to Select color, Select size, Product variants.

You can easily change the text of the Add to cart button in the English language or any other installed webstore language. There are two ways to change the default text of the button.

1. You can use the built-in Sana tool In-site editor.

   In Sana Admin click: Setup > Page elements & messages. On the All texts tab, click the button Browse in webstore. This way you can edit the text of the button directly on the webstore.
   
   
   

2. You can find the default texts of the buttons in Sana Admin and change them. For more information, see Webstore UI Texts.

   In Sana Admin click: Setup > Page elements & messages. To find the necessary text, on the All texts tab, search for ButtonText_AddToBasket ID. Here you can change the default text of the Add to cart button.
   

   

   If you want to edit the default text of the Select variants button, search for ButtonText_SelectVariants ID.
   
   
   

Change the Color of the Add to Cart Button

You can change the color of the Add to cart button using Themes. In Sana Admin click: Design & Layout > Themes. On the Buttons tab, you can change the Action button colors.

Advanced Tab

On the Advanced tab of the Add to cart button content element, you can configure height, width, and spacing settings.

For more information about advanced settings, see Content Elements.