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.


  3. 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

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


NOTE

The product (item) field related to e-Con Product Configurator, called Configurator Model is available in Microsoft Dynamics AX, Microsoft Dynamics NAV, Microsoft Dynamics 365 for Finance and Operations, Microsoft Dynamics 365 Business Central.

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.

NOTE

If you change the text of the Add to cart button content element, and it is used in different places, this text will be changed everywhere it is used in the webstore.
  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.


  1. 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

NOTE

If you change the Action button colors, these colors will be applied to all action buttons.

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.