Building a Cart

Best practices for building your cart using blocks

Introduction

Nyla’s no-code tooling and deep integration with Shopify makes building and updating product detail pages easy.

This document walks you through:

How to build Cart in Nyla according to best practices
The blocks and templates available for you

Building a Cart

1. Navigate to the Section ‘Cart’ (available on every page of your site). In order to edit your cart, you need to be on a normal page, and not a page template.

There are 3 main sections of a cart in Nyla:

1. Cart header: Often used for free shipping messages and a close cart icon
2. Cart body: Cart items, Upsell, and Gift with purchase upsell
3. Cart footer: Show customers the subtotal, checkout button, shipping messages, and payment deferment methods. Your footer should be visible at all times.

Carts also have a cart empty state, which will be active when there are no items in your cart.

2. Use pre-made Blocks to replace parts of your design.

Nyla’s pre-configured cart blocks come with best practices and UX out of the box so that you can simply drop them into the relevant section of the cart in order to adapt your design to your needs.

Cart blocks enable you to drop in or replace UI commonly used on product detail page layouts. See the list of blocks below.
App & feature blocks for cart enable you to drop on features or app UI directly out of the box depending on your needs. See here for a list of product app blocks available.

3. Map your product data to Nyla

Once you have added the layout and features that you want, you should map the data that you use on your products to the Nyla fields.

Each site has different data needs and existing setups. Using metafields and properties within source product, you can make sure that your data stored on your product pages is surfaced on your product pages.

Cart specific considerations:

Metafields
Line item properties (hidden or visible)
Bundles, Free products, and upsells

4. Update your styling

Now that you have the layout and the features added to your page in the way you want them you can update the design settings of the section in order to apply the design customizations that you want for your site.

Common things to update on the template at this stage include:

Spacing
Alignment
Background colours
Setting Image Ratios
Adjusting column widths
Slider settings
Animations and transition

Blocks: Summary

Below is a quick summary of the blocks available for use on the Cart

Cart header

Cart header layout
Automatic discount messaging

Cart body

Cart item layout
Gift with purchase
Upsell in cart

Cart footer:

Cart footer layout
Cart payment: Afterpay
Cart payment: Shop pay

Blocks and Templates

In order to make building the cart in Nyla faster and easier, you have the following blocks as starting points:

Build your Cart Header:

Blocks Available:

Cart header layout: To add this block to your cart, you should add it inside of the cart header. Adds a layout for the cart header containing the cart count & free shipping features. The feature details are as follows:

Cart Count: shows the number of items in the cart
Free Shipping: shows the Free Shipping progress bar and the amount required to avail of free shipping. This feature is only available when an item is added to the cart

You also have a block named Automatic discount messaging that adds messages that are shown on a variety of conditions.

Build your Cart Body:

Blocks Available:

Cart items layout: To add this block to your cart, you should add it inside of the cart body. It adds a Source Cart with a grid layout for your cart line items that comes with best practices built in. For example:

Price and Compare at price included
Product variant name appears
- 2 approaches to variant info:
  - Show variant title, i.e. 10ml / Red
    - This approach shows the exact variant title of a product in a single line. This typically includes all selected options for the product separated by a forward slash “/”
  - Show name and title for each (need a grid) : Size: 10ml, Color: Red
    - This approach shows the selected options of a product in different lines. It is laid out so it shows the option name first followed by the selected value
The image and the title of the cart items are linked to the PDP via the variant handle property
Quantity selector
Remove from cart
Includes an empty state that contains a continue shopping button to close the cart that shows when the cart is empty

Once you have added the Cart Items layout, you can then add additional apps inside such as:

Cart item: Product: Add to a grid within Source Cart items for a default cart item layout

Cart item: Free product: Add to a grid within Source Cart items for a default free product layout.

Cart item: Bundle: Add to a grid within Source Cart items for a default bundle cart item layout

Cart Footer Layout:

Cart footer layout: To add this block to your cart, you should add it inside of the cart footer. Adds a layout for your cart footer that allows for more complex features to be added in. The base features of this block are:

Subtotal price
Taxes and Shipping messaging
Checkout button

Once you have added the Cart Footer layout, you can then add additional apps inside such as:

Discount codes
Gift notes
Payment apps:
- Cart payment: Afterpay: Adds a block letting a customer know that Afterpay can be used on checkout
- Cart payment: Shop pay: Adds a block letting a customer know that Shop Pay can be used on checkout