Shopify themes, liquid, logos, and UX
Hello-
I want to remove the quantity label and the quantity button from my cart, highlighted in yellow. I want customers to still be able to remove items from the cart. I'm using the Dawn theme. I've tried a couple of the suggestions for doing this, but none have worked for me. Can someone tell me how to do this? Thank you!!!
cart
Solved! Go to the solution
This is an accepted solution.
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
.cart-item__quantity .quantity {
display: none;
}
th.cart-items__heading--wide.small-hide.caption-with-letter-spacing {
font-size: 0;
}
Kindly DM me
This is an accepted solution.
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
.cart-item__quantity .quantity {
display: none;
}
th.cart-items__heading--wide.small-hide.caption-with-letter-spacing {
font-size: 0;
}
its my pleasure to help us
Is there a way to do this on the product page of the Dawn theme? I want to remove the quantity box from the product listing. I am selling digital downloads and no one would purchase more than one. It's confusing. Thank!
can you please share store url so i will check and guide you.
Sure...here is my store link:
http://hygge-prints.myshopify.com password: igleed
All of my products are digital and I don't think they would buy more than one.
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
.cart-item__quantity .quantity {
display: none;
}
th.cart-items__heading--wide.small-hide.caption-with-letter-spacing {
font-size: 0;
}
Thank you!
Hi KetanKumar,
i tried this in my dawn theme but it did not work the quantity selector inthe cart page still there
thanks
can you please share store url
oh sorry your store password protect
thanks can you please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
td.cart-item__quantity {display: none !important;}
@KetanKumar thanks a lot for your reply,
i put the code as it is in the base.css but still the quantity selector in cart page,
can you please send cart item code so i will update
@KetanKumar do you mean component-cart-items.css ?
.cart-items td,
.cart-items th {
padding: 0;
border: none;
}
.cart-items th {
text-align: left;
padding-bottom: 1.8rem;
opacity: 0.85;
font-weight: normal;
}
.cart-item__quantity-wrapper {
display: flex;
}
.cart-item__totals {
position: relative;
}
.cart-items *.right {
text-align: right;
}
.cart-item__image-container {
display: inline-flex;
align-items: flex-start;
}
.cart-item__image-container:after {
content: none;
}
.cart-item__image {
height: auto;
max-width: calc(10rem / var(--font-body-scale));
}
@media screen and (min-width: 750px) {
.cart-item__image {
max-width: 100%;
}
}
.cart-item__details {
font-size: 1.6rem;
line-height: calc(1 + 0.4 / var(--font-body-scale));
}
.cart-item__details > * {
margin: 0;
max-width: 30rem;
}
.cart-item__details > * + * {
margin-top: 0.6rem;
}
.cart-item__media {
position: relative;
}
.cart-item__link {
display: block;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
}
.cart-item__name {
color: rgb(var(--color-foreground));
text-decoration: none;
display: block;
}
.cart-item__name:hover {
text-decoration: underline;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.2rem;
}
.cart-item__price-wrapper > * {
display: block;
margin: 0;
padding: 0;
}
.cart-item__discounted-prices dd {
margin: 0;
}
.cart-item__discounted-prices .cart-item__old-price {
font-size: 1.4rem;
}
.cart-item__old-price {
opacity: 0.7;
}
.cart-item__final-price {
font-weight: 400;
}
.product-option {
font-size: 1.4rem;
word-break: break-all;
line-height: calc(1 + 0.5 / var(--font-body-scale));
}
.cart-item cart-remove-button {
display: flex;
margin-left: 1rem;
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.cart-item cart-remove-button {
width: 4.5rem;
height: 4.5rem;
}
}
cart-remove-button .button {
min-width: calc(4.5rem / var(--font-body-scale));
min-height: 4.5rem;
padding: 0;
margin: 0 0.1rem 0.1rem 0;
}
cart-remove-button .button:before,
cart-remove-button .button:after {
content: none;
}
cart-remove-button .button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}
@media screen and (min-width: 750px) {
cart-remove-button .button {
min-width: 3.5rem;
min-height: 3.5rem;
}
}
cart-remove-button .icon-remove {
height: 1.5rem;
width: 1.5rem;
}
.cart-item .loading-overlay {
top: 0;
left: auto;
right: auto;
bottom: 0;
padding: 0;
}
@media screen and (min-width: 750px) {
.cart-item .loading-overlay {
right: 0;
padding-top: 4.5rem;
bottom: auto;
}
}
.cart-item .loading-overlay:not(.hidden) ~ * {
visibility: hidden;
}
.cart-item__error {
display: flex;
align-items: flex-start;
margin-top: 1rem;
}
.cart-item__error-text {
font-size: 1.2rem;
order: 1;
}
.cart-item__error-text + svg {
flex-shrink: 0;
width: 1.2rem;
margin-right: 0.7rem;
}
.cart-item__error-text:empty + svg {
display: none;
}
.product-option {
color: rgba(var(--color-foreground), 0.7);
}
.product-option + .product-option {
margin-top: 0.4rem;
}
.product-option * {
display: inline;
margin: 0;
}
.cart-items thead th {
text-transform: uppercase;
}
@media screen and (max-width: 749px) {
.cart-items,
.cart-items thead,
.cart-items tbody {
display: block;
width: 100%;
}
.cart-items thead tr {
display: flex;
justify-content: space-between;
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
margin-bottom: 4rem;
}
.cart-item {
display: grid;
grid-template: repeat(2, auto) / repeat(4, 1fr);
gap: 1.5rem;
margin-bottom: 3.5rem;
}
.cart-item:last-child {
margin-bottom: 0;
}
.cart-item__media {
grid-row: 1 / 3;
}
.cart-item__details {
grid-column: 2 / 4;
}
.cart-item__quantity {
grid-column: 2 / 5;
}
.cart-item__quantity-wrapper {
flex-wrap: wrap;
}
.cart-item__totals {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
}
.cart-item__error-text + svg {
margin-top: 0.4rem;
}
@media screen and (min-width: 750px) {
.cart-items {
border-spacing: 0;
border-collapse: separate;
box-shadow: none;
width: 100%;
display: table;
}
.cart-items th {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
.cart-items thead th:first-child {
width: 50%;
}
.cart-items th + th {
padding-left: 4rem;
}
.cart-items td {
vertical-align: top;
padding-top: 4rem;
}
.cart-item {
display: table-row;
}
.cart-item > td + td {
padding-left: 4rem;
}
.cart-item__details {
width: 35rem;
}
.cart-item__media {
width: 10rem;
}
.cart-item cart-remove-button {
margin: 0.5rem 0 0 1.5rem;
}
.cart-item__price-wrapper > *:only-child:not(.cart-item__discounted-prices) {
margin-top: 1rem;
}
}
@media screen and (min-width: 990px) {
.cart-item .cart-item__quantity,
.cart-items .cart-items__heading--wide {
padding-left: 6rem;
}
.cart-item__details {
width: 50rem;
}
.cart-items thead th:first-child {
width: 60%;
}
}
oh no sorry i need cart item snippets file
@KetanKumar im so sorry if im bothering you im totally new to this kind of coding do you mean the below snippets i put in base.css
.cart-item__quantity .quantity {
display: none !important;
}
th.cart-items__heading--wide.small-hide.caption-with-letter-spacing {
font-size: 0;
}
see attachment just comment code
<td class="cart-item__quantity">
<div class="cart-item__quantity-wrapper">
<label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
{{ 'products.product.quantity.label' | t }}
</label>
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input"
type="number"
name="updates[]"
value="{{ item.quantity }}"
min="0"
aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
id="Quantity-{{ item.index | plus: 1 }}"
data-index="{{ item.index | plus: 1 }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<cart-remove-button id="Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<a href="{{ item.url_to_remove }}" class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
{% render 'icon-remove' %}
</a>
</cart-remove-button>
</div>
<div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
<small class="cart-item__error-text"></small>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
</div>
</td>
yes remove this code or comment
Can you help us remove quantity (but keep delete/garbage) from dawn theme too? We want it gone from product page and cart.
site is here: shop.learnlife.com
Thank you!
@KetanKumar and this is the whole code in main-cart-item.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 -%}
<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
<cart-items class="page-width{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
<div class="title-wrapper-with-link">
<h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
<a href="/" class="underlined-link">{{ 'general.continue_shopping' | t }}</a>
</div>
<div class="cart__warnings">
<h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
<a href="/" class="button">
{{ 'general.continue_shopping' | t }}
</a>
{%- if shop.customer_accounts_enabled and customer == nil -%}
<h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
<p class="cart__login-paragraph">
{{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
</p>
{%- endif -%}
</div>
<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
<div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
<div class="js-contents">
{%- if cart != empty -%}
<table class="cart-items">
<thead>
<tr>
<th class="caption-with-letter-spacing" colspan="2" scope="col">{{ 'sections.cart.headings.product' | t }}</th>
<th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.total' | t }}</th>
<th class="cart-items__heading--wide small-hide caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.quantity' | t }}</th>
<th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.total' | t }}</th>
</tr>
</thead>
<tbody>
{%- for item in cart.items -%}
<tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
<td class="cart-item__media">
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
<div class="cart-item__image-container gradient global-media-settings">
<img src="{{ item.image | image_url: width: 300 }}"
class="cart-item__image"
alt="{{ item.image.alt | escape }}"
loading="lazy"
width="150"
height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
>
</div>
{% endif %}
</td>
<td class="cart-item__details">
{%- if section.settings.show_vendor -%}
<p class="caption-with-letter-spacing light">{{ item.product.vendor }}</p>
{%- endif -%}
<a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
{%- if item.original_price != item.final_price -%}
<div class="cart-item__discounted-prices">
<span class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</span>
<s class="cart-item__old-price product-option">
<span class="bcpo-cart-item-original-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_price'>{{ item.original_price | money }}</span></span>
</s>
<span class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</span>
<strong class="cart-item__final-price product-option">
<span class="bcpo-cart-item-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_price'>{{ item.final_price | money }}</span></span>
</strong>
</div>
{%- else -%}
<div class="product-option">
<span class="bcpo-cart-item-original-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_price'>{{ item.original_price | money }}</span></span>
</div>
{%- endif -%}
{%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
<dl>
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
<div class="product-option">
<dt>{{ option.name }}: </dt>
<dd>{{ option.value }}</dd>
</div>
{%- endfor -%}
{%- endif -%}
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
</dl>
<p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}
<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount in item.discounts -%}
<li class="discounts__discount">
{%- render 'icon-discount' -%}
{{ discount.title }}
</li>
{%- endfor -%}
</ul>
</td>
<td class="cart-item__totals right medium-hide large-up-hide">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<dl class="cart-item__discounted-prices">
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</dt>
<dd>
<s class="cart-item__old-price price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</s>
</dd>
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</dt>
<dd class="price price--end">
<span class="bcpo-cart-item-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_line_price'>{{ item.final_line_price | money }}</span></span>
</dd>
</dl>
{%- else -%}
<span class="price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</span>
{%- endif -%}
{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden"><span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.unit_price' | t }}</span></span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>
<td class="cart-item__quantity">
<div class="cart-item__quantity-wrapper">
<label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
{{ 'products.product.quantity.label' | t }}
</label>
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input"
type="number"
name="updates[]"
value="{{ item.quantity }}"
min="0"
aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
id="Quantity-{{ item.index | plus: 1 }}"
data-index="{{ item.index | plus: 1 }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<cart-remove-button id="Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<a href="{{ item.url_to_remove }}" class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
{% render 'icon-remove' %}
</a>
</cart-remove-button>
</div>
<div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
<small class="cart-item__error-text"></small>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
</div>
</td>
<td class="cart-item__totals right small-hide">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<dl class="cart-item__discounted-prices">
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</dt>
<dd>
<s class="cart-item__old-price price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</s>
</dd>
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</dt>
<dd class="price price--end">
<span class="bcpo-cart-item-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_line_price'>{{ item.final_line_price | money }}</span></span>
</dd>
</dl>
{%- else -%}
<span class="price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</span>
{%- endif -%}
{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden"><span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.unit_price' | t }}</span></span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
{%- endif -%}
</div>
</div>
<p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
<p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
</form>
</cart-items>
{% schema %}
{
"name": "t:sections.main-cart-items.name",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-cart-items.settings.show_vendor.label"
},
{
"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 %}
<!-- bcpo done -->{% comment %}<!-- ymq option done -->{% endcomment %}
{{ '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 -%}
<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
<cart-items class="page-width{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
<div class="title-wrapper-with-link">
<h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
<a href="/" class="underlined-link">{{ 'general.continue_shopping' | t }}</a>
</div>
<div class="cart__warnings">
<h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
<a href="/" class="button">
{{ 'general.continue_shopping' | t }}
</a>
{%- if shop.customer_accounts_enabled and customer == nil -%}
<h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
<p class="cart__login-paragraph">
{{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
</p>
{%- endif -%}
</div>
<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
<div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
<div class="js-contents">
{%- if cart != empty -%}
<table class="cart-items">
<thead>
<tr>
<th class="caption-with-letter-spacing" colspan="2" scope="col">{{ 'sections.cart.headings.product' | t }}</th>
<th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.total' | t }}</th>
<th class="cart-items__heading--wide small-hide caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.quantity' | t }}</th>
<th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.total' | t }}</th>
</tr>
</thead>
<tbody>
{%- for item in cart.items -%}
<tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
<td class="cart-item__media">
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
<div class="cart-item__image-container gradient global-media-settings">
<img src="{{ item.image | image_url: width: 300 }}"
class="cart-item__image"
alt="{{ item.image.alt | escape }}"
loading="lazy"
width="150"
height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
>
</div>
{% endif %}
</td>
<td class="cart-item__details">
{%- if section.settings.show_vendor -%}
<p class="caption-with-letter-spacing light">{{ item.product.vendor }}</p>
{%- endif -%}
<a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
{%- if item.original_price != item.final_price -%}
<div class="cart-item__discounted-prices">
<span class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</span>
<s class="cart-item__old-price product-option">
<span class="bcpo-cart-item-original-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_price'>{{ item.original_price | money }}</span></span>
</s>
<span class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</span>
<strong class="cart-item__final-price product-option">
<span class="bcpo-cart-item-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_price'>{{ item.final_price | money }}</span></span>
</strong>
</div>
{%- else -%}
<div class="product-option">
<span class="bcpo-cart-item-original-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_price'>{{ item.original_price | money }}</span></span>
</div>
{%- endif -%}
{%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
<dl>
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
<div class="product-option">
<dt>{{ option.name }}: </dt>
<dd>{{ option.value }}</dd>
</div>
{%- endfor -%}
{%- endif -%}
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
</dl>
<p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}
<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount in item.discounts -%}
<li class="discounts__discount">
{%- render 'icon-discount' -%}
{{ discount.title }}
</li>
{%- endfor -%}
</ul>
</td>
<td class="cart-item__totals right medium-hide large-up-hide">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<dl class="cart-item__discounted-prices">
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</dt>
<dd>
<s class="cart-item__old-price price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</s>
</dd>
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</dt>
<dd class="price price--end">
<span class="bcpo-cart-item-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_line_price'>{{ item.final_line_price | money }}</span></span>
</dd>
</dl>
{%- else -%}
<span class="price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</span>
{%- endif -%}
{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden"><span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.unit_price' | t }}</span></span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>
{% comment %}
<td class="cart-item__quantity">
<div class="cart-item__quantity-wrapper">
<label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
{{ 'products.product.quantity.label' | t }}
</label>
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input"
type="number"
name="updates[]"
value="{{ item.quantity }}"
min="0"
aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
id="Quantity-{{ item.index | plus: 1 }}"
data-index="{{ item.index | plus: 1 }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<cart-remove-button id="Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<a href="{{ item.url_to_remove }}" class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
{% render 'icon-remove' %}
</a>
</cart-remove-button>
</div>
<div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
<small class="cart-item__error-text"></small>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
</div>
</td>
{% endcomment %}
<td class="cart-item__totals right small-hide">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<dl class="cart-item__discounted-prices">
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</dt>
<dd>
<s class="cart-item__old-price price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</s>
</dd>
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</dt>
<dd class="price price--end">
<span class="bcpo-cart-item-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_line_price'>{{ item.final_line_price | money }}</span></span>
</dd>
</dl>
{%- else -%}
<span class="price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</span>
{%- endif -%}
{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden"><span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.unit_price' | t }}</span></span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
{%- endif -%}
</div>
</div>
<p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
<p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
</form>
</cart-items>
{% schema %}
{
"name": "t:sections.main-cart-items.name",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-cart-items.settings.show_vendor.label"
},
{
"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 %}
<!-- bcpo done -->{% comment %}<!-- ymq option done -->{% endcomment %}
thanks can you please update this code
Hi KetanKumar,
I tried both of these solutions on the dawn theme and neither worked. Can you help me remove the Quantity Counting Button. I just want it to be 'Add to Cart' since we are selling one of a kind items.
Website is AuthenticLuxuries.com
Thank you!
Thank you very much!
In my Crave theme it has also worked perfectly.
I am not seeing the base.css in my assets? I am using the Dawn Template. Thanks!
Please, check first line
Also, I want to remove quantity from the whole store. We are selling one of a kind items. Thanks!
Hello, I did this to Refresh theme, the quantity selector is removed, but still have this button here, any solutions, please?
can you please send store url
Thank you !!
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025