How to Customise your Shopify Store - Cart Page

How to Customise your Shopify Store - Cart Page

Customising the cart page on your Shopify store can significantly enhance the user experience and help increase conversion rates. Here’s a step-by-step guide on how to customise your Shopify store's cart page:

Step 1: Log into Your Shopify Admin

  1. Go to Shopify Login.
  2. Enter your store’s credentials to access the admin dashboard.

Step 2: Navigate to the Themes Section

  1. In the admin dashboard, look for the Online Store section on the left-hand sidebar.
  2. Click on Themes. This will take you to the Themes management section.

Step 3: Customise Your Current Theme

  1. Find your current theme and click on Customise to open the theme editor.
  2. Use the dropdown menu at the top of the sidebar to navigate to the Cart page.

Step 4: Customise Cart Page Layout

  1. Cart Type:

    • In the theme editor, you may have options to choose between different cart types (drawer cart, page cart, or pop-up cart). Select the one that best fits your store’s design and user experience preferences.

  2. Cart Page Sections:

    • Add or remove sections to the cart page such as promotional banners, recommended products, or discount codes.
    • Arrange the sections by dragging and dropping them in the desired order.

Step 5: Customise Cart Page Content

  1. Cart Header:

    • Customise the cart header text to reflect your brand voice.
    • Add a logo or custom image to the header if desired.

  2. Product Display:

    • Customise how products are displayed in the cart (e.g., image size, product details, quantity selectors).
    • Ensure product images are clear and all necessary product information is visible.

  3. Price Display:

    • Clearly display item prices, any applied discounts, shipping costs, and the total amount.
    • Ensure that the price breakdown is easy to understand to avoid any confusion.

  4. Buttons and Links:

    • Customise the appearance of the ‘Continue Shopping’, ‘Update Cart’, and ‘Checkout’ buttons to match your store’s theme.
    • Ensure that these buttons are prominently displayed and easy to click on both desktop and mobile devices.

  5. Messages and Notifications:

    • Add custom messages or notifications to the cart page, such as free shipping thresholds, low stock warnings, or estimated delivery times.

Step 6: Customise Theme Styles for the Cart Page

  1. In the theme editor, go to Theme settings.
  2. Adjust the following settings as needed:
    • Colours: Set colours for text, backgrounds, buttons, and other elements to ensure consistency with your brand.
    • Typography: Choose fonts and sizes for headings, body text, and other text elements to ensure readability.
    • Buttons: Customise the style, shape, and colour of buttons used on the cart page to ensure they stand out.

Step 7: Add Custom Content or Code (Optional)

For advanced customisation, you can add custom HTML, CSS, or JavaScript:

  1. In the Themes page, click on Actions next to your theme.
  2. Select Edit code.
  3. Modify the appropriate files (usually cart.liquid in the Templates folder) to create custom content or styling for the cart page. This step is recommended for users with coding knowledge or with the help of a developer.

Step 8: Save and Preview

  1. Save your changes frequently to avoid losing any edits.
  2. Use the Preview option to see how your cart page looks on both desktop and mobile devices.
  3. Make sure to test all functionalities, such as updating quantities and applying discount codes, to ensure everything works correctly.

Step 9: Publish Changes

Once you are satisfied with your customisations:

  1. Click on Save to apply the changes.
  2. Your Shopify cart page will now reflect the customisations you made.

Tips for Enhancing the Cart Page

  • Consistency: Ensure a consistent design across all pages for a cohesive look.
  • Clarity: Keep the content clear, concise, and well-organised to improve usability.
  • Urgency: Use urgency tactics like countdown timers for limited offers or stock warnings to encourage faster checkouts.
  • Trust: Include trust badges or security seals to reassure customers during the checkout process.

By following these steps, you can effectively customise your Shopify store’s cart page to enhance user experience, increase trust, and improve conversion rates.

Back to blog