All things Shopify and commerce
The quantity (+ and -) buttons on our cart are not high enough contrast from the background to be easily seen. How can we change this so that they are more clearly recognizable?
Site Test URL: https://native-sons-roasters-3430.myshopify.com/
Out of the Box Flex theme.
Code at Snippets/ quantity-box.liquid :
{% if settings.qty_box_style == 'stacked' %}
{% assign icon-plus = 'up-caret' %}
{% assign icon-minus = 'down-caret' %}
{% else %}
{% assign icon-plus = 'plus' %}
{% assign icon-minus = 'minus' %}
{% endif %}
{% if item.quantity %}
{% assign value = item.quantity %}
{% else %}
{% assign value = 1 %}
{% endif %}
<label class="label is-sr-only" for="quantity">
{{- 'products.product.quantity' | t -}}
</label>
<div
class="
quantity-wrapper
field
has-addons
quantity-style--{{ settings.qty_box_style }}
{{ size }}
"
>
<div class="control minus-control">
<span
class="
quantity-minus
quantity-element
button
is-inverse
"
data-update-quantity="minus"
{% if value == 1 %}
disabled
{% endif %}
>
{%
render 'icon',
name: icon-minus,
%}
</span>
</div>
<div
class="
control
quantity-input-control
{% unless show_payment_button %}
quantity-input-control--fill
{% endunless %}
"
>
<input
class="
quantity-input
quantity-element
input
"
type="number"
min="1"
size="2"
name="quantity"
value="{{ value }}"
{% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}
max="{{ variant.inventory_quantity }}"
data-max-inventory-management
{% endif %}
data-line-id="{{ forloop.index }}"
/>
</div>
<div class="control plus-control">
<span
class="
quantity-plus
quantity-element
button
is-inverse
"
data-update-quantity="plus"
{% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}
{% if variant.inventory_quantity == value %}
disabled
{% endif %}
{% endif %}
>
{%
render 'icon',
name: icon-plus,
%}
</span>
</div>
</div>
Thank you
Hello @nativesons
.ajax-cart--drawer .quantity-wrapper .icon svg{
fill : red;
}
If you require further help to optimize your store, please don’t hesitate to reach out.
This contribution will always benefit you and you will get my full help easily and you can contact me easily.
@AK_Design_Dev Where should I post this code snippet, if I post it at the end as such:
It does not work.
Thanks!
please put this css in base.css file
If you require further help to optimize your store, please don’t hesitate to reach out.
This contribution will always benefit you and you will get my full help easily and you can contact me easily.
this css is for background
.ajax-cart--drawer .quantity-minus.button[disabled]{
background-color: #0000001f;
}
If you require further help to optimize your store, please don’t hesitate to reach out.
This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Ok that worked great! Is there a way to make the + and - icons more bold? Just increase the stroke weight a bit.
I was attempting to allow the disabled to be one color and the active to be another color and it seems that the disabled stuck, but when it is active it stays the background color.
This is the result. I was able to adjust the plus icon, but it seems that the active minus icon did not stick.
I tried tagging the active as !important but it then disables the disabled tag.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025