Quantity selector dropdown - Product page

Leadermar
Tourist
21 0 0

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. 

0 Likes
Ninthony
Shopify Partner
1637 224 613

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?

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
21 0 0

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 

0 Likes
Ninthony
Shopify Partner
1637 224 613

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?

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
21 0 0

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

0 Likes
Ninthony
Shopify Partner
1637 224 613

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

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
21 0 0

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. 

Capture d’écran 2021-02-18 à 13.40.37.png

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. 
0 Likes
Leadermar
Tourist
21 0 0

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;
  }
}

 

 

0 Likes
Ninthony
Shopify Partner
1637 224 613

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.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Leadermar
Tourist
21 0 0

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. 

0 Likes