Shopify cart: Enable simple partial payment subtotals on 2 Shopify cart types to boost price clarity

What is a cart type on Shopify?

A Shopify cart type is a feature available on many popular Shopify themes that changes the look and feel of the cart on your Shopify store. An example of a cart type is a cart drawer, which pulls out from the left or right side of the page when customers add products to their cart. This type of cart provides a customer with an immediate view of the contents of their cart without needing to navigate to a different page.

In this guide, we will review how to change your cart type and go over how to display a deposit subtotal when customers are partially paying for products on your Shopify store.

How to change the cart type on your theme

Changing your store's cart type varies based on theme, but this guide will show you how easy it is to change on the Dawn theme, the main theme most Shopify 2.0 themes are based on.

Steps

1. Online Store: from the Shopify admin panel click on "Online Store".

2. Themes: Click on Themes under Online Store

3. Customize: Click the "Customize" button next to your theme. This opens the theme editor for changes

3. Theme Settings: There are 3 buttons in the top left, Sections, Theme Settings, and App Embeds. Choose Theme Settings.

4. Cart Settings - Scroll until you see a dropdown menu for 'Cart'.

5. Cart Type Options: Check if there is a setting called "Cart type", "Cart Style", or something similar.

You'll see a few options that you can toggle between and preview in your store:

• Drawer: Slide-out cart drawer
• Page: Traditional separate cart page
• Popup : A popup style cart

How to add a partial payment total on a cart page

Adding partial payment totals to the Shopify cart page is simple when using Downpay's cart embed.

Steps

1. Click Online Store from your left navigation bar in Shopify Admin.\

2. Click Customize on the theme you wish to add Downpay to.

3. Navigate to the Cart page template you are using from the dropdown menu at the top center area of the editor.

4. Navigate to the embed section of the editor on the left hand side. and toggle the Downpay cart embed on.

Are the Downpay totals appearing in a strange place or not appearing at all? Modify the placement with this guide or simply contact us and we can help!

How to add a partial payment total on a cart drawer

When using a Shopify cart drawer, enabling a partial payment total can be done through a code adjust on your cart-drawer.liquid file.

Use our video our or review the steps below.

Steps

1. Click Online Store from your left navigation bar in Shopify Admin.

2. Click the ... beside your theme and open two tabs in your browser: a Preview of your theme, and the Edit code page. We recommend making a duplicate of your theme and working on the unpublished duplicate for easier testing without risking your main live template.

3. In the Preview tab of your theme: Add a Downpay deposit product to your cart and open the cart drawer. We will use this as a way to test our code.

4. In the Edit code tab: Search for the word drawer to find the Shopify cart-drawer.liquid or similar file which contains the code for the drawer. This can usually be found in snippets on 2.0 themes.

5. Scroll through or search the file for the subtotal line and then duplicate of the elements that control the title of the line and the price. Click Save.

Note: We will be making changes to them, but for now, duplicating the lines is an easy way to copy the styling before adjusting the copy and calculations.

6. We will be incapsulating our duplicate subtotal line in an if statement and adjusting the copy and the subtotal that is displayed.

• The title of your subtotal line will be "Due today" or similar. You can also use this guide to add an entry to your Locale to ensure the title is translated.
• The deposit subtotal will be {{ cart.checkout_charge_amount | money }}

Review the example below. Keep in mind that your classes may look different based on your theme's style.

{%- liquid assign items_with_plans = cart.items | where: 'selling_plan_allocation'-%}    
{% if items_with_plans.size != 0 %}   
         <div class="drawer__bottom__meta body-size-3">
           <p class="totals__total">Due today</p>
           <p class="totals__total-value">{{ cart.checkout_charge_amount | money_with_currency }}</p>
         </div>
{% endif %}

7. Click save and refresh your preview to display the Due today total.

Why are partial payment subtotals important?

There are many benefits to providing payment breakdowns on the Shopify cart before checkout.

1. Improve payment clarity and lower initial payment to improve conversion and AOV, especially products with long delays

2. Help customers plan for their upcoming payment which builds trust with your brand

3. Reduce the risk of chargebacks by setting price breakdowns, due dates and shipping timeline expectations upfront

Haven't tried partial payments on Shopify?

If you're selling products that aren't available yet, partial payments on Shopify is a winning strategy to improving your sales and AOV by improving the buying experience and enhancing affordability for your customers.