How can I display item count on the Dawn theme cart page?

Technical Q&A
,

Topic summary

Request to show an item count on the cart page of a Shopify store (swished.com.au) using the Dawn theme, with a screenshot referenced as the desired UI (image is central to understanding the goal).

A responder confirmed it’s feasible via adding a cart counter and asked for the cart page code to proceed.

The store owner provided the main.cart.items.liquid snippet, which includes CSS asset imports and a style block for responsive padding, plus a Shopify schema for section settings. The code is written in Shopify Liquid (Shopify’s templating language) and does not yet include logic for counting/displaying cart items.

Key technologies: Dawn theme (Shopify’s default theme), Liquid templates. Tags indicate optimization and Shopify Scripts, though no script code was shared.

Current status: Implementation guidance is pending; no solution or code changes to add the item counter have been provided yet.

Next steps: Reviewer to add/update cart counter code within the provided template, likely inserting a dynamic item count tied to the cart object.

Summarized with AI on February 4. AI used: gpt-5.
1

Hi Team,

We need your help, please.

This is our site: https://swished.com.au/ and we are using the Dawn theme.

This is what we want to implement.

EdgarPateno_0-1670298563316.png
EdgarPateno_0-1670298563316.png1349×615 42 KB

Hope someone can help. Take care

1 Like
2

@EdgarPateno

yes, its possible to make add cart counter code so please share here your cart page code so i will check and update

3

Hi @KetanKumar , thank you so much for your time.

Here is the code for main.cart.items.liquid

{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- unless settings.cart_type == 'drawer' -%}
  
{%- endunless -%}

{% schema %}
{
  "name": "t:sections.main-cart-items.name",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

Hope you can help. Take care.