Quantity selector dropdown - Product page

[Leadermar]

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. 

[Ninthony]

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?

[Leadermar]

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 

[Ninthony]

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?

[Leadermar]

Sure, I understand - let me know your email address in order for me to give you access. 

[Ninthony]

I sent you a direct message as I'd rather not post it on the forum

[Leadermar]

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: 

            <div class="qtydiv">                

              <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>

              <button type="button" class="js-qty__adjust--minus icon-fallback-text">

              <span class="icon icon-minus custom-icon-minus" aria-hidden="true"></span>

              <span class="fallback-text">&minus;</span>

              </button>

              <input type="text" id="quantity" value="1" min="1" pattern="[0-9]*" aria-label="quantity" class="quantity-selector quantity-input" readonly="">

              <button type="button" class="js-qty__adjust--plus icon-fallback-text">

              <span class="icon icon-minus custom-icon-plus" aria-hidden="true" data-line="{{line}}" data-qty="{{itemAdd}}"></span>

              <span class="fallback-text">&plus;</span>

              </button>

      </div>

And here is our theme java script code : 

            <div class="qtydiv">                

              <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>

              <button type="button" class="js-qty__adjust--minus icon-fallback-text">

              <span class="icon icon-minus custom-icon-minus" aria-hidden="true"></span>

              <span class="fallback-text">&minus;</span>

              </button>

              <input type="text" id="quantity" value="1" min="1" pattern="[0-9]*" aria-label="quantity" class="quantity-selector quantity-input" readonly="">

              <button type="button" class="js-qty__adjust--plus icon-fallback-text">

              <span class="icon icon-minus custom-icon-plus" aria-hidden="true" data-line="{{line}}" data-qty="{{itemAdd}}"></span>

              <span class="fallback-text">&plus;</span>

              </button> </div>

Would really need your help here  

Thank you. 

Regards, 
Lea. 

[Leadermar]

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 {
  @Page {
    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;
  }
}

[Ninthony]

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.

[Leadermar]

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.