Skip to main content

Cart

The shopping cart (accessible via /cart) is the final step before a customer checks out. On this page, visitors see an overview of the chosen products, can adjust quantities, and the total costs are calculated.

The page is divided into two parts: the left column with the products, and the right column with the total cost overview and the order button. You build the right column modularly using blocks.

General Layout & Design​

Through the main settings of the shopping cart section, you manage the general display and the left column with products:

  • Color schemes: You can set the background color of the entire page (General color scheme) and the color of the individual product cards separately from each other.
  • Introduction: Determine the title at the top of the page (e.g., "Your Shopping Cart"), adjust the font size and weight, and optionally add an extra introductory text.
  • Product display: Set the size (in pixels) of the product image and determine how large and bold the product titles should be displayed.
  • Empty Cart: Determine what visitors see when they haven't added any products yet. You can set a special title, an accompanying text, and the text for the "Continue shopping" button.

The Order Summary (Blocks)​

You build the right column of the shopping cart (the overview with the checkout button) using various blocks. You can determine the order of these yourself by dragging them.

Proceed to checkout​

This is the most important block. It contains the total price, any discounts, and the large button to go to the checkout.

  • Design: Choose a specific color scheme for this card and a separate color scheme for the checkout button itself.
  • Terms and Conditions: Check whether customers are required to agree to the terms and conditions first before they can check out. You can also set whether this checkbox is ticked by default.
  • Notes (Cart note): Enable an open text field where customers can leave a note or special instruction with their order (e.g., "Leave the package at the back door").

Title​

A simple block to add extra headings in your right column, for example, "Shipping & Service" right above your USPs.

  • Text formatting: Enter your text and determine whether it should be normal or bold.
  • Bottom margin: Remove the whitespace at the bottom if you want the text to sit tightly above the next element.

USP (Unique Selling Proposition)​

Build extra trust right before the customer checks out.

  • Icon & Color: Choose a FontAwesome icon (e.g., a checkmark or a truck) and determine in which theme color this icon should be shown (e.g., 'success' for green).
  • Text: Enter your benefit, such as "Ordered before 23:00, delivered tomorrow".
  • Bottom margin: Remove the margin to group multiple USPs tightly below each other.

App Blocks​

Use this block to load functionalities from external Shopify apps into your shopping cart overview, such as special discount apps or upsell widgets.