Customizing Ajax cart

Ajax cart is a feature powered by Boost Commerce that allows customers to add products to their cart without any page reloads.

This feature is only available with the new front-end lib V3 from Boost Commerce and works with both free and paid themes from Shopify's theme.

On this page

Access Ajax cart settings

To access the Ajax cart settings, please follow these steps:

  1. From the app's admin, go to Theme > Find [Target Theme] > Select Edit Visual Design.

  1. On the left panel, select Product item to expand and choose Ajax cart in the drop-down list. Once you have chosen the Ajax cart section, the detailed settings for Ajax cart will appear on the right panel.

Ajax cart configuration

  • Note: when customizing any attribute on the right sidebar ⇒ the preview pop up show the corresponding changes.
  • Enable Ajax cart: display Ajax cart on your storefront
  • Select type of cart display:
    • Side cart
    • Pop up cart
    • None

Button overall

These settings will be applied for both View cart and Checkout button in the Ajax cart feature.

  • Button shape: you can select between the Rectangle and Rounded rectangle shapes.
  • Font
    • Font family: choose a font family for the two buttons
    • Font style: choose the preferred font style from the selected font family
    • Font size: use the slider or input your preferred size in pixels (range from 10 - 30)

View cart button

This settings section applied specifically to View cart button in the Ajax cart feature.

  • View cart text: Edit the text fields to modify the label for the “View cart” ****button
  • Color
    • Text color: pick a color for the text of the button
    • Text color on hover: pick a color for the text when hovering on the button
    • Background color: pick a color for the button’s background
    • Background color on hover: pick a color for the button's background when hovering.
    • Border color: pick a color for the border of the button
    • Border color on hover: pick a color for the button's border when hovering.
  • Text
    • Text transform: transform the text button to be:
      • none  leaves the text’s case and capitalization exactly as it was entered.
      • lowercase  makes all of the letters in the selected text lowercase.
      • uppercase  makes all of the letters in the selected text uppercase.
      • capitalize  capitalizes the first letter of each word in the selected text.

Checkout button

This settings section applied specifically to Checkout button in the Ajax cart feature.

  • Checkout text: Edit the text fields to modify the label for the “Checkout” ****button
  • Color
    • Text color: pick a color for the text of the button
    • Text color on hover: pick a color for the text when hovering on the button
    • Background color: pick a color for the button’s background
    • Background color on hover: pick a color for the button's background when hovering.
    • Border color: pick a color for the border of the button
    • Border color on hover: pick a color for the button's border when hovering.
  • Text
    • Text transform: transform the text button to be:
      • none  leaves the text’s case and capitalization exactly as it was entered.
      • lowercase  makes all of the letters in the selected text lowercase.
      • uppercase  makes all of the letters in the selected text uppercase.
      • capitalize  capitalizes the first letter of each word in the selected text.

Click Save button to save all changes you have made.