Plus (+) Minus (-) Quantity Selector on Supply Theme Using Cart Page

Excursionist
21 0 5

Hi, Jasoliya,

Which number should I change so that I can make the quantity selector's width is same as the "Add to cart" ? 

I think the change should be in the theme.scss part...but which one?批注 2020-04-20 161122.jpg

 

0 Likes
Shopify Expert
4033 562 964

Send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Excursionist
21 0 5

My store is HERE .

You will see on the desktop the quantity selector is bigger than cart button, but on the mobile the quantity selector is smaller than cart button. 

I'm confused...

0 Likes
Shopify Expert
4033 562 964

Add this css:

.qtydiv .quantity-input{width: 100px !important;}
.qtydiv{ display: block;}

In mobile it it will not look good as size of add to cart button 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Excursionist
21 0 5

Yes, it is solved. Many thanks for your help! I think it will be very helpful for others who using Minimal theme.

0 Likes
New Member
1 0 0

Hi i'm trying to figure out of to put the + and - on my products' quantity selector because the default one isn't pretty at all.

Im using Debut theme

 

Maybe you can give me the code to put to change it,

 

Thanks for your help !

0 Likes
Shopify Expert
4033 562 964

You can follow my this post for that:

https://community.shopify.com/c/Shopify-Design/Plus-Minus-Quantity-Selector-on-Supply-Theme-Using-Ca...

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Excursionist
30 0 5

Hi Jasoliya! Your code has really helped me in my Supply theme. It's just what i needed but im having trouble with what code to use and where to put it to add it into the cart as i dont see cart-template .liquid in Supply, i can only see the following in the picture. Any help would be really appreciated! cart.jpg

0 Likes
Shopify Expert
4033 562 964

You can find you cart page code under: template->cart.liquid file

but this code only for product page 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Excursionist
30 0 5

Appreciate your reply, i found the code for that but i don't know what i need to add or remove for this to work? Are you able to help please? 

My Cart Liquid code is

{% if cart.item_count > 0 %}
<form action="{{ routes.cart_url }}" method="post" class="cart-form" data-cart-form novalidate>

<h1 class="h2">{{ 'cart.general.title' | t }}</h1>

{% for item in cart.items %}
<div class="cart-row" data-line="{{ forloop.index }}">
<div class="grid">

<div class="grid-item large--one-half">
<div class="grid">

<div class="grid-item one-third large--one-quarter">
<a href="{{ item.url }}" class="cart-image">
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
</div>

<div class="grid-item two-thirds large--three-quarters">
<a href="{{ item.url }}">
{{ item.product.title }}
<span class="saso-cart-item-discount-notes" data-key="{{item.key}}"></span>
<span class="saso-cart-item-upsell-notes" data-key="{{item.key}}"></span>

</a>
{% unless item.variant.title contains 'Default' %}
<br>
<small>{{ item.variant.title }}</small>
{% endunless %}

{% if settings.product_quantity_message and item.variant.inventory_management and item.variant.inventory_quantity <= 0 and item.variant.incoming %}
{% assign date = item.variant.next_incoming_date | date: format: 'date' %}
<p><small>{{ 'products.product.will_not_ship_until' | t: date: date }}</small></p>
{% endif %}

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{%- comment -%}{% for p in item.properties %}
{% if forloop.first %}<br>{% endif %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:

{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}

<br>
{% endunless %}
{% endfor %}{%- endcomment -%}{%- for p in item.properties -%}
{%- unless p.last == blank -%}
<li class="product-details__item product-details__item--property{%if property_size == 0%} hide{% endif %}" data-cart-item-property>
<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

{%- comment -%}
Check if there was an uploaded file associated
{%- endcomment -%}
<span data-cart-item-property-value>
{%- if p.last contains "uploads" -%}
<a href="{{ p.last }}">Uploaded File</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</li>
{%- endunless -%}
{%- endfor -%}
<button type="button" class="edit_cart_option btn btn--primary button" data-product_id="{{item.product_id}}" data-key="{{item.key}}" data-variant_id="{{item.variant_id}}" data-quantity="{{item.quantity}}">Edit Options</button>
{% endif %}
</div>

</div>
</div>

<div class="grid-item large--one-half medium--two-thirds push--medium--one-third cart-pricing">
<div class="grid">

<div class="grid-item one-third text-right">
<input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}">
</div>

<div class="grid-item one-half medium-down--text-left text-right">

{%- if item.original_line_price != item.final_line_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<small><s class="cart-original-price order-discount--cart-price">
<span class='hulkapps-cart-item-line-price' data-key='{{item.key}}'>
{{ item.original_line_price | money }}
</span></s></small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart-original-price order-discount--cart-price">
<span class='hulkapps-cart-item-line-price' data-key='{{item.key}}'>
{{ item.original_line_price | money }}
</span></span>
{%- endif -%}

{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}

{%- if item.line_level_discount_allocations != blank -%}
<ul class="order-discount order-discount--list order-discount--cart-list order-discount--title" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
<span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}

</div>

<div class="grid-item one-sixth text-right">
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" data-line="{{ forloop.index }}" class="icon-fallback-text btn-secondary remove">
<span class="icon icon-x" aria-hidden="true"></span>
<span class="fallback-text">{{ 'cart.general.remove' | t }}</span>
</a>
</div>

</div>
</div>

</div>
</div>

{% endfor %}

<div class="cart-row">
<div class="grid">

{% if settings.cart_notes_enable %}
<div class="grid-item large--one-half">
<label for="cartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="cartSpecialInstructions">{{ cart.note }}</textarea>
</div>
{% endif %}

<div class="grid-item text-right{% if settings.cart_notes_enable %} large--one-half{% endif %}">

<div class="cart-subtotal{% if settings.cart_notes_enable %} cart-subtotal--notes-enabled{% endif %}">

{%- if cart.cart_level_discount_applications != blank -%}
<div class="order-discount-cart-wrapper">
{%- for discount_application in cart.cart_level_discount_applications -%}
<span class="order-discount order-discount--title">
<span class="icon icon-saletag" aria-hidden="true"></span><span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span>{{- discount_application.title -}}
</span>
<span class="order-discount order-discount--cart-price">-{{ discount_application.total_allocated_amount | money }}</span>
{%- endfor -%}
</div>
{%- endif -%}

{{ 'cart.general.subtotal' | t }}
<span class="h1 cart-subtotal--price">

<span class="saso-cart-original-total">
<span class="hulkapps-cart-original-total">
{% include 'price' with cart.total_price %}
</span>
</span>
<span class="saso-cart-total"></span>

</span>
</div>

{%- capture taxes_shipping_checkout -%}
{%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif shop.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}

<p class="cart__policies"><em>{{ taxes_shipping_checkout }}</em></p>

<input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="https://lincolnshirevapours.co.uk/policies/terms-of-service">terms and conditions</a>.
</label>
</p>

<button type="submit" name="checkout" class="btn">
<span class="icon icon-cart"></span>
{{ 'cart.general.checkout' | t }}
</button>


{% comment %}
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
{% endcomment %}

</div>

</div>
</div>

</form>

{% else %}

<div id="EmptyCart">
<h1 class="h2">{{ 'cart.general.title' | t }}</h1>
<p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<p class="cart--continue-message">{{ 'cart.general.continue_browsing_html' | t: link: routes.all_products_collection_url }}</p>
<p class="cart--cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
</div>

{% endif %}

Thank you

0 Likes