Hello,
I am using the Palo Alto template and at the moment on my product page, customers have to fill in manually the quantity they would like to purchase.
Is there an easy way to replace this by a dropdown menu with quantity 1, 2,3…,10?
Here is a preview link (my website is not live yet): https://2doazzf6qo31kedi-48968269976.shopifypreview.com/products_preview
Thank you in advance for your help.
Regards,
Lea.
I think it would personally be better and probably a little easier if you had a - and + button on either side of the quantity and allowed the user to increment. It’s a little heavier on the editing side but I can provide this for you if you want. I’d need to request access to your theme. Is that something you’re comfortable with?
Hello,
Thank you for your answer.
Ideally we would like to have a drop down but having a - and + button is better that we have at the moment 
I can copy you my product form and theme css code in here maybe?
Thanks,
Lea
Unfortunately that wouldn’t work, I wouldnt be able to see what I was doing and I would need to have the store functionality to make sure what I was doing was working. What I would do is just duplicate your theme so that nothing happens to the original and work on the unpublished theme. I’m sure I could swap it out for a dropdown, do you have set amounts you want as options?
Sure, I understand - let me know your email address in order for me to give you access.
I sent you a direct message as I’d rather not post it on the forum
Hi Ninthony,
Apologise but I am not able to provide you access to our store.
I managed to add the + and - on the quantity selector but nothing happen when I click on it.
I believe this has something to do with java script? Here is the code I am using at the moment in my product form.liquid:
And here is our theme java script code :
Would really need your help here
Thank you.
Regards,
Lea.
Sorry just noticed that I copied twice the same code.
Please find below my theme java script.
Thanks,
Lea
/*============================================================================
Table of Contents
#General Variables
#Sass Mixins
#Base Styles
#Media Queries
#Print Styles
#Keyframe Animations
==============================================================================*/
/*============================================================================
#General Variables
==============================================================================*/
// Timber Colors
$colorBgBody: #fafafa;
$colorBorder: #ccc;
// Gift Card Colors
$colorGiftText: {{settings.color_body_text}}; // note, this is always on a white background
$colorGiftBorder: #ccc;
// Sizes
$gutter: 30px;
/*============================================================================
#Sass Mixins
- Copied from timber.scss.liquid
==============================================================================*/
.clearfix {
&:after {
content: "";
display: table;
clear: both; }
*zoom: 1;
}
@mixin clearfix() {
&:after {
content: "";
display: table;
clear: both; }
*zoom: 1;
}
@mixin prefix($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}
/*============================================================================
#Base Styles
==============================================================================*/
header, nav, section, article, aside, footer {
display:block;
}
.template-giftcard,
.template-giftcard body {
background: $colorBgBody;
a {
text-decoration: none;
}
}
.template-giftcard .wrapper {
max-width: 588px;
img, object, iframe {
max-width: 100%;
}
}
.giftcard-header {
padding: ($gutter * 2) 0;
font-size: 1em;
text-align: center;
-webkit-animation: fadein 0.5s ease-in-out both 0.4s;
animation: fadein 0.5s ease-in-out both 0.4s;
}
.shop-url {
display: none;
}
.giftcard {
-webkit-animation: slideup 0.8s ease-in-out;
animation: slideup 0.8s ease-in-out
}
.giftcard__border {
padding: 1em;
-webkit-animation: container-slide 0.8s ease-in-out;
animation: container-slide 0.8s ease-in-out
}
.giftcard__content {
@include clearfix;
background-color: #fff;
color: $colorGiftText;
border: 1px solid darken($colorGiftBorder, 5%);
-webkit-animation: cardslide 0.8s ease-in-out;
animation: cardslide 0.8s ease-in-out;
}
.giftcard__header {
@include clearfix;
border-bottom: 1px solid $colorBorder;
padding: $gutter / 2;
}
.giftcard__header img {
margin-left: auto;
margin-right: auto;
display: block;
padding-bottom: 10px;
}
.giftcard__title {
margin-bottom: 0;
color: #555;
}
.giftcard__tag {
display: block;
float: right;
background-color: lighten($colorGiftText, 10%);
border: 1px solid transparent;
color: #fff;
padding: $gutter / 3;
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: .05em;
line-height: 1;
}
.giftcard__tag--active {
background: transparent;
color: $colorGiftText;
border: 1px solid lighten($colorGiftText, 20%);
}
.giftcard__wrap {
position: relative;
margin: ($gutter / 2) ($gutter / 2) $gutter;
img {
position: relative;
display: block;
z-index: 2;
}
&:before,
&:after {
content: "";
position: absolute;
width: 47px;
height: 47px;
z-index: 3;
}
&:before {
top: -1px;
left: -1px;
}
&:after {
bottom: -1px;
right: -1px;
}
.lt-ie9 &:before,
.lt-ie9 &:after {
display: none;
}
}
.giftcard__code {
position: absolute;
bottom: $gutter;
text-align: center;
width: 100%;
z-index: 50;
}
.giftcard__code--medium {
font-size: .875em;
}
.giftcard__code--small {
font-size: .75em;
}
.giftcard__code__inner {
display: inline-block;
vertical-align: baseline;
background-color: #fff;
padding: .5em;
max-width: 450px;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
.giftcard__code--small & {
overflow: auto;
}
}
.giftcard__code__text {
font-weight: 400;
font-size: 1.875em;
text-transform: uppercase;
padding: .4em .5em;
display: inline-block;
vertical-align: baseline;
color: #777;
line-height: 1;
.disabled & {
color: #999;
text-decoration: line-through;
}
}
.giftcard__amount {
position: absolute;
top: 0;
right: 0;
color: #fff;
font-size: 2.75em;
line-height: 1.2;
padding: 10px;
z-index: 50;
strong {
display: block;
text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
}
.giftcard__amount--medium {
font-size: 2em;
}
.tooltip {
display: block;
position: absolute;
top: -50%;
right: 50%;
margin-top: 16px;
z-index: 3;
color: #fff;
text-align: center;
white-space: nowrap;
-webkit-animation: popup 0.5s ease-in-out both 0.7s;
animation: popup 0.5s ease-in-out both 0.7s;
&:before {
content: "";
display: block;
position: absolute;
left: 100%;
bottom: 0;
width: 0;
height: 0;
margin-left: -5px;
margin-bottom: -5px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 5px solid #333;
border-top: 5px solid rgba(51,51,51,0.9);
}
}
.tooltip__label {
display: block;
position: relative;
right: -50%;
border: none;
background: #333;
background: rgba(51,51,51,0.9);
min-height: 14px;
font-weight: 400;
font-size: 12px;
text-decoration: none;
line-height: 16px;
text-shadow: none;
padding: .5em .75em;
margin-left: .25em;
small {
text-transform: uppercase;
letter-spacing: .1em;
color: #b3b3b3;
font-size: .875em;
}
}
.giftcard__instructions {
text-align: center;
font-size: 12px;
margin: 0 ($gutter / 2) $gutter;
}
.giftcard__actions {
position: relative;
border-top: 1px solid $colorBorder;
padding: $gutter ($gutter / 2);
text-align: center;
overflow: hidden;
}
.action-link {
position: absolute;
left: $gutter / 2;
top: 50%;
font-size: 0.875em;
font-weight: bold;
display: block;
text-transform: uppercase;
letter-spacing: .2em;
color: lighten($colorGiftText, 10%);
margin-top: -10px;
&:hover,
&:focus {
color: $colorGiftText;
}
}
.action-link__print {
display: inline-block;
vertical-align: baseline;
width: 17px;
height: 17px;
vertical-align: middle;
margin-right: 5px;
opacity: 0.25;
background: {
image: url('//cdn.shopify.com/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png');
repeat: no-repeat;
position: 0 0;
}
.svg & {
background-image: url('//cdn.shopify.com/s/assets/gift-card/icon-print-6a10b2fb86d223b8c783c9696eaf4c31.svg');
}
.action-link:hover & {
opacity: 0.4;
}
}
.giftcard__footer {
text-align: center;
padding: ($gutter * 2) 0;
-webkit-animation: fadein 0.5s ease-in-out both 0.4s;
animation: fadein 0.5s ease-in-out both 0.4s
}
.giftcard__icon {
display: none;
.svg & {
display: inline-block;
vertical-align: baseline;
}
}
#QrCode {
img {
margin: 0 auto $gutter;
}
}
#apple-wallet-badge {
display: block;
margin: 0 auto 20px;
}
/*============================================================================
#Media Queries
==============================================================================*/
/*================ Medium-down width ================*/
@media screen and (max-width: 580px) {
.giftcard {
font-size: 12px;
}
.giftcard-header {
padding: $gutter 0;
}
.header-logo {
font-size: 2em;
}
.giftcard__border {
padding: $gutter / 2;
}
.giftcard__actions {
padding: $gutter / 2;
}
.giftcard__actions .btn {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.action-link {
display: none;
}
.wrapper {padding:0px;}
.giftcard__amount {font-size:2.5em}
}
/*================ Small width ================*/
@media screen and (max-width: 400px) {
.giftcard__amount strong {
text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
.giftcard__wrap:before,
.giftcard__wrap:after {
display: none;
}
.giftcard__code {
font-size: .75em;
}
.giftcard__code--medium {
font-size: .65em;
}
.giftcard__code--small {
font-size: .55em;
}
}
/*================ Small height ================*/
@media screen and (max-height: 800px) {
.header-logo img {
max-height: 90px;
}
}
/*============================================================================
#Print Styles
==============================================================================*/
@media print {
{
margin: 0.5cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
html, body {
background-color: #fff;
}
.giftcard-header {
padding: 10px 0;
}
.giftcard__content,
.giftcard__border {
border: 0 none;
}
.giftcard__actions,
.giftcard__wrap:before,
.giftcard__wrap:after,
.tooltip {
display: none;
}
.giftcard__title {
float: none;
text-align: center;
}
.giftcard__code__text {
color: #555;
}
.shop-url {
display: block;
}
.logo {
color: #58686F;
}
}
That’s CSS lol. It doesnt matter, can you post another preview link? I may be able to help now that you already have the buttons in there.
I copied the code of the gift card instead, sorry about that… Would be simple with a preview link indeed.
Here it is: https://ojz9ff295edmq1tw-48968269976.shopifypreview.com/products/saladier-en-ceramique-bazile
Thank you for your help!
Lea.
So here is the code you will need to change the quantity, you can put it at the end of your theme.js file in your assets folder:
$(document).ready(function(){
let decrement = document.querySelector('.custom-icon-minus');
let increment = document.querySelector('.custom-icon-plus');
increment.addEventListener('click', adjustQuantity)
decrement.addEventListener('click', adjustQuantity)
function adjustQuantity(){
let quantitySelector = document.getElementById('quantity');
let quantity = parseInt(quantitySelector.getAttribute('value'));
if(this.classList.contains('custom-icon-minus') && quantity > 1){
quantity = quantity - 1;
quantitySelector.setAttribute('value', quantity);
}else if(this.classList.contains('custom-icon-plus') && quantity >= 1) {
quantity = quantity + 1;
quantitySelector.setAttribute('value', quantity);
}
}
})
However, for whatever reason, your add to cart button is still only adding 1 item to the cart. I don’t know how that functions, so I couldn’t tell you why without digging a little deeper into your code, I went through your entire theme.js file and did not see where the add to cart action is taking place – so I’m not sure where it is happening. Possibly product.liquid in script tags. Did you perhaps change anything about your quantity selector other than adding the plus an minus? It may have relied on an id or class name if they are different now.
Ah yes almost there ! Thank you so much for your help
Here is my product form.liquid code :
{%- assign variants_count = product.variants.size -%}
{%- assign enable_quickview_payment_button = settings.enable_payment_button -%}
{%- assign product_description_content = product.description -%}
{%- if enable_tabs_h6 -%}
{%- assign product_description_content = product_description_content | split: '###### ' | first -%}
{%- endif -%}
{%- comment -%}
Check if the product is on sale and set a variable to be used below.
{%- endcomment -%}
{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
{%- assign on_sale = true -%}
{%- endif -%}
{%- comment -%}
Check if the product is sold out and set a variable to be used below.
{%- endcomment -%}
{%- assign sold_out = true -%}
{%- if product.available -%}
{%- assign sold_out = false -%}
{%- endif -%}
{%- comment -%}
#addToCartForm is a selector for the Ajax Cart plugin
{%- endcomment -%}
{%- assign productFormID = "AddToCartForm--" | append: section.id -%}
{%- form 'product', product, class: "product-form product-form--is-loading", id: productFormID, data-swatches: enable_swatches, data-enable-button: enable_payment_button, data-enable-quickview-button: enable_quickview_payment_button -%}
{%- comment -%} id
Show product title only as Featured product
{%- endcomment -%}
{%- if template == 'index' -%}
#
{{ product.title | truncate: 50 }}
{%- if enable_reviews or settings.enable_yotpo and settings.yotpo_ID != '' -%}
{%- if settings.enable_yotpo and settings.yotpo_ID != '' -%}
{%- elsif enable_reviews -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- comment -%}
Prices
{%- endcomment -%}
##
{{ current_variant.price | money }}
{%- if current_variant.compare_at_price -%}
~~{{ current_variant.compare_at_price | money }}~~
{%- endif -%}
{%- if current_variant.unit_price_measurement -%}
{{ current_variant.unit_price | money }}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{- current_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- comment -%}
Variants
{%- endcomment -%}
{%- if variants_count > 1 -%}
{%- if enable_swatches -%}
{%- render 'swatch' with 'Color', product: product -%}
{%- endif -%}
{%- else -%}
{%- endif -%}
{%- comment -%}
Buttons
{%- endcomment -%}
{%- if enable_payment_button or enable_quickview_payment_button -%}
{{ form | payment_button }}
{%- endif -%}
{%- comment -%}
Product Description and product tabs
{%- endcomment -%}
{{ product_description_content }}
{%- if template != 'index' -%}
{%- render 'product-tabs',
product: product, enable_reviews: enable_reviews, enable_tabs_h6: enable_tabs_h6,
tab_1: tab_1, tab_2: tab_2, tab_3: tab_3 -%}
{%- endif -%}
{%- comment -%}
Social Icons
{%- endcomment -%}
{%- if section.settings.enable_social_sharing_products -%}
{%- render 'social-sharing', product: product -%}
{%- endif -%}
{%- endform -%}
And here is the previous code I replaced :
{%- unless section.settings.hide_quantity -%}
{%- comment -%}
Quantity Selector
{%- endcomment -%}
{%- else -%}
{%- endunless -%}
I would put that input text area for your quantity back to the way it was before. Then you would have to change my code to:
$(document).ready(function(){
let decrement = document.querySelector('.custom-icon-minus');
let increment = document.querySelector('.custom-icon-plus');
increment.addEventListener('click', adjustQuantity)
decrement.addEventListener('click', adjustQuantity)
function adjustQuantity(){
let quantitySelector = document.getElementById('Quantity');
let quantity = parseInt(quantitySelector.getAttribute('value'));
if(this.classList.contains('custom-icon-minus') && quantity > 1){
quantity = quantity - 1;
quantitySelector.setAttribute('value', quantity);
}else if(this.classList.contains('custom-icon-plus') && quantity >= 1) {
quantity = quantity + 1;
quantitySelector.setAttribute('value', quantity);
}
}
})
The only change in my code is the ID of your previous quantity selector was “Quantity” and the new one is “quantity” – that could very well be the problem.
Hi Ninthony,
Thank you so much for your help - it’s working now! The only thing is when the product is sold out, I can’t add more quantity on my basket which is fine but I no longer have the error message saying that the item is out of stock.
Also, is there an easy way to set up a max amount of product you can add to your basket (10 for examples?).
Thank you,
Lea.
I can probably write in some more functionality to do an Ajax call and check the amount of available products for the product and set a max limit on the input to that amount. I won’t be on till tomorrow morning, but could you send a preview link tomorrow morning (Monday) when you get on? I’ll see what I can do.
Hi Ninthony,
Hope you had a lovely week-end
Here is the preview link:
Thank you so much,
Lea.
Sorry the link is expired again, can you send another one? This is why it would be better to give me access to your theme ~_^
So with javascript I cannot see the inventory level, that feature has been depreciated by Shopify. I can access that through liquid, but I would need access to your site for this, I don’t want to keep playing tag back and fourth to see if something works or not because when coding you kind of code as you go. So I’m going to need to constantly write something > check it > correct it if wrong > continue > repeat. If you just want them to only be able to add 10 products you can change my code to this, but ideally the max-number should be the available amount of product if it’s less than 10:
$(document).ready(function(){
let decrement = document.querySelector('.custom-icon-minus');
let increment = document.querySelector('.custom-icon-plus');
increment.addEventListener('click', adjustQuantity)
decrement.addEventListener('click', adjustQuantity)
function adjustQuantity(){
let quantitySelector = document.getElementById('Quantity');
let quantity = parseInt(quantitySelector.getAttribute('value'));
if(this.classList.contains('custom-icon-minus') && quantity > 1){
quantity = quantity - 1;
quantitySelector.setAttribute('value', quantity);
}else if(this.classList.contains('custom-icon-plus') && quantity >= 1 && quantity < 10) {
quantity = quantity + 1;
quantitySelector.setAttribute('value', quantity);
}
}
})
Hi Ninthony,
Thank you for that
I believe there is something wrong going on in my product form liquid -
{%- assign variants_count = product.variants.size -%}
{%- assign enable_quickview_payment_button = settings.enable_payment_button -%}
{%- assign product_description_content = product.description -%}
{%- if enable_tabs_h6 -%}
{%- assign product_description_content = product_description_content | split: '###### ' | first -%}
{%- endif -%}
{%- comment -%}
Check if the product is on sale and set a variable to be used below.
{%- endcomment -%}
{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
{%- assign on_sale = true -%}
{%- endif -%}
{%- comment -%}
Check if the product is sold out and set a variable to be used below.
{%- endcomment -%}
{%- assign sold_out = true -%}
{%- if product.available -%}
{%- assign sold_out = false -%}
{%- endif -%}
{%- comment -%}
#addToCartForm is a selector for the Ajax Cart plugin
{%- endcomment -%}
{%- assign productFormID = "AddToCartForm--" | append: section.id -%}
{%- form 'product', product, class: "product-form product-form--is-loading", id: productFormID, data-swatches: enable_swatches, data-enable-button: enable_payment_button, data-enable-quickview-button: enable_quickview_payment_button -%}
{%- comment -%} id
Show product title only as Featured product
{%- endcomment -%}
{%- if template == 'index' -%}
#
{{ product.title | truncate: 50 }}
{%- if enable_reviews or settings.enable_yotpo and settings.yotpo_ID != '' -%}
{%- if settings.enable_yotpo and settings.yotpo_ID != '' -%}
{%- elsif enable_reviews -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- comment -%}
Prices
{%- endcomment -%}
##
{{ current_variant.price | money }}
{%- if current_variant.compare_at_price -%}
~~{{ current_variant.compare_at_price | money }}~~
{%- endif -%}
{%- if current_variant.unit_price_measurement -%}
{{ current_variant.unit_price | money }}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{- current_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- comment -%}
Variants
{%- endcomment -%}
{%- if variants_count > 1 -%}
{%- if enable_swatches -%}
{%- render 'swatch' with 'Color', product: product -%}
{%- endif -%}
{%- else -%}
{%- endif -%}
{%- comment -%}
Buttons
{%- endcomment -%}
{%- if enable_payment_button or enable_quickview_payment_button -%}
{{ form | payment_button }}
{%- endif -%}
{%- comment -%}
Product Description and product tabs
{%- endcomment -%}
{{ product_description_content }}
{%- if template != 'index' -%}
{%- render 'product-tabs',
product: product, enable_reviews: enable_reviews, enable_tabs_h6: enable_tabs_h6,
tab_1: tab_1, tab_2: tab_2, tab_3: tab_3 -%}
{%- endif -%}
{%- comment -%}
Social Icons
{%- endcomment -%}
{%- if section.settings.enable_social_sharing_products -%}
{%- render 'social-sharing', product: product -%}
{%- endif -%}
{%- endform -%}
After
<span class=“icon icon-minus custom-icon-plus” aria-hidden=“true”">
Every <> are in red which I guess have an impact of the error message when the product is out of stock.
