The Ezz Cart Count extension allows you to display product and variant quantities in your cart directly on your product page. This guide will walk you through how to add the extension to your Liquid templates, customize the display messages, and style the cart count widget.

1. Product Count Extension To display the cart count for a product, you need to add the following code to your product.liquid or any template that renders product information:

<ezz-cart-count
  source-type="product"
  source-id="{{ product.id }}"
  hide-when-zero
  style="--ezz-margin: {{ margin_value }}; --ezz-padding: {{ padding_value }}; --ezz-font-size: {{ font_size }}px; --ezz-text-color: {{ text_color }}; --ezz-bg-color: {{ background_color }}; --ezz-border-radius: {{ border_radius }}px"
>
  <span data-ezz-cart-count-singular>
    {{ '[[COUNT]] item in your cart' | replace: '[[COUNT]]', '<span data-ezz-cart-count></span>' }}
  </span>
  <span data-ezz-cart-count-plural>
    {{ '[[COUNT]] items in your cart' | replace: '[[COUNT]]', '<span data-ezz-cart-count></span>' }}
  </span>
</ezz-cart-count>

Explanation of the Code:

• source-type="product": This tells the widget to display the cart count for a product .

• source-id="{{ product.id }}": This links the cart count to the current product by its ID.

• hide-when-zero: This hides the cart count if the product quantity in the cart is zero. Remove this attribute if you want the cart count to always appear.

• style: Customizes the appearance of the cart count. You can adjust the following:

  • --ezz-margin: Adjusts the space around the cart count.
  • --ezz-padding: Adjusts the space inside the cart count.
  • --ezz-font-size: Controls the size of the text in the cart count.
  • --ezz-text-color: Sets the color of the text.
  • --ezz-bg-color: Sets the background color of the cart count widget.
  • --ezz-border-radius: Controls how rounded the corners of the cart count widget are.

• message_singular : This is the message shown when only one item of the product is in the cart. Replace the text [[COUNT]] item in your cart with your own custom message, and the [[COUNT]] placeholder will be replaced by the actual count (inside a <span data-ezz-cart-count></span> tag). For example:

  {{ '[[COUNT]] item in your cart' | replace: '[[COUNT]]', '<span data-ezz-cart-count></span>' }}
  

• message_plural : This is the message shown when more than one item of the product is in the cart. Replace the text [[COUNT]] items in your cart with your own custom message. For example:

  {{ '[[COUNT]] items in your cart' | replace: '[[COUNT]]', '<span data-ezz-cart-count></span>' }}
  

Variant Count Extension To display the cart count for a specific variant of a product, add the following code in your product.liquid template or any template that shows variant information:

<ezz-cart-count
  source-type="variant"
  product-id="{{ product.id }}"
  source-id="{{ product.selected_or_first_available_variant.id }}"
  {% if hide_on_zero %}
    hide-when-zero
  {% endif %}
  style="--ezz-margin: {{ margin_value }}; --ezz-padding: {{ padding_value }}; --ezz-font-size: {{ font_size }}px; --ezz-text-color: {{ text_color }}; --ezz-bg-color: {{ background_color }}; --ezz-border-radius: {{ border_radius }}px"
>
  <span data-ezz-cart-count-singular>
    {{ '[[COUNT]] item in your cart' | replace: '[[COUNT]]', '<span data-ezz-cart-count></span>' }}
  </span>
  <span data-ezz-cart-count-plural>
    {{ '[[COUNT]] items in your cart' | replace: '[[COUNT]]', '<span data-ezz-cart-count></span>' }}
  </span>
</ezz-cart-count>

Explanation of the Code:

• source-type="product": This tells the widget to display the cart count for a product .
• source-id="{{ product.id }}": This links the cart count to the current product by its ID.
• hide-when-zero: This hides the cart count if the product quantity in the cart is zero. Remove this attribute if you want the cart count to always appear.
• style: Customizes the appearance of the cart count. You can adjust the following:
  • --ezz-margin: Adjusts the space around the cart count.
  • --ezz-padding: Adjusts the space inside the cart count.
  • --ezz-font-size: Controls the size of the text in the cart count.
  • --ezz-text-color: Sets the color of the text.
  • --ezz-bg-color: Sets the background color of the cart count widget.
  • --ezz-border-radius: Controls how rounded the corners of the cart count widget are.