So fügen Sie Ihrer Shopify-Produktseite einen Mengenwähler hinzu

Name: Mengenrabatt
Brand: Marcel Reperich | ECOMHACKER
Availability: InStock
Rating: 4.7 (14 reviews)

Schritt-für-Schritt-Anleitung für Nicht-Programmierer

by Marcel Reperich

Updated on Aug 03, 2025 0 reading time

Beim Betrieb eines Shopify-Shops ist ein nahtloses und intuitives Einkaufserlebnis entscheidend für höhere Conversions und Kundenzufriedenheit. Eine oft übersehene Funktion ist die Mengenauswahl – ein einfaches UI-Element, mit dem Käufer die gewünschte Stückzahl eines bestimmten Artikels auswählen können, bevor sie ihn in den Warenkorb legen.

In diesem Beitrag untersuchen wir, warum ein Mengenwähler wichtig ist, wo sein Einsatz am sinnvollsten ist und wie er sich auf die Leistung Ihres Shops auswirken kann.

Warum einen Mengenwähler hinzufügen?

Eine Mengenauswahl gibt Kunden mehr Kontrolle über ihren Einkauf. Egal, ob sie mehrere Exemplare eines Produkts für sich selbst oder in großen Mengen kaufen möchten, diese kleine Funktion kann den Vorgang schneller und intuitiver gestalten. Sie ist besonders wichtig für Produkte, die:

Wird häufig in Mehrfachpackungen gekauft (z. B. Lebensmittel, Partyzubehör)
Teil von Paketen oder Kits
Angeboten zu ermäßigten Preisen für Großeinkäufe

Durch das Hinzufügen eines Mengenwählers wird sichergestellt, dass Ihr Geschäft professionell aussieht und für Kunden mit unterschiedlichen Kaufanforderungen effizient funktioniert.

So fügen Sie Ihrem Shopify-Theme einen Mengenwähler hinzu

                    <product-detail-quantities class="prd-DetailQuantities_Rows">
  <fieldset class="prd-DetailQuantities_Row" data-product-detail-quantities-el="option" data-name="menge">
    <legend class="prd-DetailQuantities_Legend">
      Menge:
      <span class="prd-DetailQuantities_Indicator" data-product-detail-quantities-el="indicator">1</span>
    </legend>

    <product-detail-progress-bar class="prd-Detail_ProgressBar" aria-hidden="false">
      <ul class="prd-ProgressBar" data-quantity="1" data-product-detail-progress-bar-el="list">
        <li class="prd-ProgressBar_Item" data-product-detail-progress-bar-el="item" data-quantity="1" aria-current="true"></li>
        <li class="prd-ProgressBar_Item" data-product-detail-progress-bar-el="item" data-quantity="2" aria-current="false">
          <div class="prd-ProgressBarItem_TextContainer">
            <span class="prd-ProgressBarItem_Text prd-ProgressBarItem_Text-active">
              🤑 du sparst 
              <span data-product-progress-discount-amount>€0,00
              </span>
            </span>
            <span class="prd-ProgressBarItem_Text prd-ProgressBarItem_Text-inactive">
              Spare
              <span data-product-progress-discount-amount>€0,00</span>
            </span>
          </div>
        </li>
        <li class="prd-ProgressBar_Item" data-product-detail-progress-bar-el="item" data-quantity="3" aria-current="false">
          <div class="prd-ProgressBarItem_TextContainer">
            <span class="prd-ProgressBarItem_Text prd-ProgressBarItem_Text-active">
              🤑 du sparst 
              <span data-product-progress-discount-amount>€0,00
              </span>
            </span>
            <span class="prd-ProgressBarItem_Text prd-ProgressBarItem_Text-inactive">
              Spare
              <span data-product-progress-discount-amount>€0,00</span>
            </span>
          </div>
        </li>
      </ul>
    </product-detail-progress-bar>

    <div class="prd-DetailQuantities_Options">
      <div class="prd-DetailQuantities_Option prd-DetailQuantities_Option-radio" data-product-quantity-option-radio>
        <input class="prd-DetailQuantities_Input" 
               type="radio" 
               id="menge-1" 
               name="menge" 
               value="1" 
               data-units="1" 
               data-discount="0" 
               data-default-discount="0" 
               data-product-detail-quantities-el="option-choice" 
               data-hide-recharge="false" 
               checked>
        <label class="prd-DetailQuantities_Button" for="menge-1">
          <span class="prd-DetailQuantities_Units">1 Stück</span>
        </label>
      </div>

      <div class="prd-DetailQuantities_Option prd-DetailQuantities_Option-radio" data-product-quantity-option-radio>
        <input class="prd-DetailQuantities_Input" 
               type="radio" 
               id="menge-2" 
               name="menge" 
               value="2" 
               data-units="" 
               data-discount="0.0" 
               data-default-discount="0.0" 
               data-product-detail-quantities-el="option-choice" 
               data-hide-recharge="false">
        <label class="prd-DetailQuantities_Button" for="menge-2">
          <span class="prd-DetailQuantities_Units"> Stück</span>
          <div class="prd-DetailQuantities_Discount" aria-hidden="false">
            <span class="prd-DetailQuantities_DiscountText">Spare</span>
            <span class="prd-DetailQuantities_DiscountPercentage" data-product-quantity-discount-percentage>
              %
            </span>
          </div>
        </label>
      </div>

      <div class="prd-DetailQuantities_Option prd-DetailQuantities_Option-radio" data-product-quantity-option-radio>
        <input class="prd-DetailQuantities_Input" 
               type="radio" 
               id="menge-3" 
               name="menge" 
               value="3" 
               data-units="" 
               data-discount="0.0" 
               data-default-discount="0.0" 
               data-product-detail-quantities-el="option-choice" 
               data-hide-recharge="false">
        <label class="prd-DetailQuantities_Button" for="menge-3">
          <span class="prd-DetailQuantities_Units"> Stück</span>
          <div class="prd-DetailQuantities_Discount" aria-hidden="false">
            <span class="prd-DetailQuantities_DiscountText">Spare</span>
            <span class="prd-DetailQuantities_DiscountPercentage" data-product-quantity-discount-percentage>
              %
            </span>
          </div>
        </label>
      </div>
    </div>
  </fieldset>
</product-detail-quantities>

<style>

.prd-DetailQuantities_Rows {
    display: block;
    margin-bottom: 20px;
    margin-top: 15px
}

.prd-DetailQuantities_Row {
    border: 0;
    margin: 0;
    padding: 0
}

.prd-DetailQuantities_RowTop {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.prd-DetailQuantities_Legend {
    grid-gap: 5px;
    align-items: baseline;
    color: #000;
    display: flex;
    gap: 5px;
    line-height: 1;
    padding-left: 0;
    padding-right: 0
}

.prd-DetailQuantities_Legend .prd-DetailQuantities_Indicator,.prd-DetailQuantities_Legend .prd-DetailQuantities_Title {
    color: var(--text-color);
    display: block;
    font-family: Gordita Bold;
    font-size: 14px
}

.prd-DetailQuantities_Options {
    grid-gap: 10px;
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3,1fr);
    margin-top: 15px;
    position: relative
}

.prd-DetailQuantities_Option {
    height: 100%
}

.prd-DetailQuantities_Option input {
    display: none
}

.prd-DetailQuantities_Button {
    grid-gap: 2px;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: .8em;
    gap: 2px;
    height: 100%;
    justify-content: center;
    min-width: 60px;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: border-color .3s ease
}

.prd-DetailQuantities_Button:hover {
    border-color: #1c1c1c
}

.prd-DetailQuantities_Button-soldOut {
    background-color: #f4f4f5;
    border: 1px solid #d8d8d8
}

.prd-DetailQuantities_Units {
    display: block;
    font-size: 11px;
    line-height: 1;
    text-transform: capitalize
}

.prd-DetailQuantities_Discount {
    grid-gap: 5px;
    display: flex;
    gap: 5px;
    line-height: 1
}

.prd-DetailQuantities_Discount[aria-hidden=true] {
    display: none
}

.prd-DetailQuantities_Discount-reversed {
    flex-direction: row-reverse
}

.prd-DetailQuantities_DiscountPercentage,.prd-DetailQuantities_DiscountText {
    color: #008B13;
    display: flex;
    font-size: 11px;
    line-height: 1;
    text-transform: capitalize
}

.prd-DetailQuantities_Input:checked+.prd-DetailQuantities_Button {
    border-color: #1c1c1c
}

.prd-DetailQuantities_Input:checked+.prd-DetailQuantities_Button:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='9' fill='%23000'/%3E%3Cpath d='M7.333 12.5 4 9.521 5.167 8.48l2.166 1.936 5.5-4.915L14 6.543 7.333 12.5Z' fill='%23fff'/%3E%3C/svg%3E");
    content: "";
    height: 18px;
    position: absolute;
    right: 0;
    top: -8px;
    width: 18px;
    z-index: 1
}

.prd-Detail_ProgressBar {
    display: block;
    margin-bottom: 15px;
    margin-top: 15px
}

.prd-Detail_ProgressBar[aria-hidden=true] {
    display: none
}

.prd-ProgressBar {
    grid-gap: 10px;
    align-items: center;
    background-color: #e8e8e8;
    border-radius: 5px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3,1fr);
    height: 4px;
    list-style: none;
    margin-top: 15px;
    position: relative
}

.prd-ProgressBar[data-quantity="1"]:after {
    width: calc(33.33333% - 8px)
}

.prd-ProgressBar[data-quantity="2"]:after {
    width: calc(66.66667% - 5px)
}

.prd-ProgressBar[data-quantity="3"]:after {
    width: 100%
}

.prd-ProgressBar:after {
    background-color: #008B12;
    border-radius: 5px;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    transition: inline-size .1s ease-in-out
}

.prd-ProgressBar_Item {
    position: relative
}

.prd-ProgressBar_Item:after,.prd-ProgressBar_Item:before {
    content: "";
    left: 50%;
    opacity: 0;
    position: absolute;
    transition: opacity .2s ease-in-out
}

.prd-ProgressBar_Item:before {
    border-bottom: 12px solid #008B13;
    bottom: 0
}

.prd-ProgressBar_Item:after,.prd-ProgressBar_Item:before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    transform: translate(-50%)
}

.prd-ProgressBar_Item:after {
    border-top: 12px solid #e8e8e8;
    top: 0
}

.prd-ProgressBar_Item[data-quantity="2"]:after,.prd-ProgressBar_Item[data-quantity="2"]:before,.prd-ProgressBar_Item[data-quantity="3"]:after,.prd-ProgressBar_Item[data-quantity="3"]:before {
    opacity: 0
}

.prd-ProgressBar_Item[data-quantity="2"][aria-current=true],.prd-ProgressBar_Item[data-quantity="2"][aria-current=true]:before,.prd-ProgressBar_Item[data-quantity="3"][aria-current=true],.prd-ProgressBar_Item[data-quantity="3"][aria-current=true]:before {
    opacity: 1
}

.prd-ProgressBar_Item[data-quantity="2"][aria-current=true]:after,.prd-ProgressBar_Item[data-quantity="3"][aria-current=true]:after {
    opacity: 0
}

[data-quantity="1"] .prd-ProgressBar_Item[data-quantity="2"],[data-quantity="1"] .prd-ProgressBar_Item[data-quantity="3"] {
    opacity: 1
}

[data-quantity="1"] .prd-ProgressBar_Item[data-quantity="2"]:before,[data-quantity="1"] .prd-ProgressBar_Item[data-quantity="3"]:before {
    opacity: 0
}

[data-quantity="1"] .prd-ProgressBar_Item[data-quantity="2"]:after,[data-quantity="1"] .prd-ProgressBar_Item[data-quantity="3"]:after,[data-quantity="2"] .prd-ProgressBar_Item[data-quantity="2"][data-quantity="3"]:after,[data-quantity="2"] .prd-ProgressBar_Item[data-quantity="3"][data-quantity="3"]:after {
    opacity: 1
}

[data-quantity="3"] .prd-ProgressBar_Item[data-quantity="2"][data-quantity="2"],[data-quantity="3"] .prd-ProgressBar_Item[data-quantity="3"][data-quantity="2"] {
    opacity: 0
}

.prd-ProgressBarItem_TextContainer {
    bottom: 32px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .2s ease-in-out;
    width: 100%
}

.prd-ProgressBarItem_TextContainer .prd-ProgressBarItem_Text {
    display: block;
    font-size: 10px;
    height: 0;
    left: 50%;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.prd-ProgressBarItem_TextContainer .prd-ProgressBarItem_Text-inactive,[aria-current=true] .prd-ProgressBarItem_TextContainer,[aria-current=true] .prd-ProgressBarItem_TextContainer .prd-ProgressBarItem_Text-active {
    opacity: 1
}

[aria-current=true] .prd-ProgressBarItem_TextContainer .prd-ProgressBarItem_Text-inactive {
    opacity: 0
}

[aria-current=false] .prd-ProgressBarItem_TextContainer {
    opacity: .5
}

</style>

<script>
// Option 1: Using DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  class ProductDetailQuantities extends HTMLElement {
    constructor() {
      super();
      this.init();
    }

    init() {
      const inputs = this.querySelectorAll('[data-product-detail-quantities-el="option-choice"]');
      const indicator = this.querySelector('[data-product-detail-quantities-el="indicator"]');
      const progressItems = this.querySelectorAll('[data-product-detail-progress-bar-el="item"]');
      const progressBar = this.querySelector('[data-product-detail-progress-bar-el="list"]');
      const form = document.querySelector('form[action="/cart/add"]');

      let quantityInput = form.querySelector('input[name="quantity"]');
      if (!quantityInput) {
        quantityInput = document.createElement('input');
        quantityInput.type = 'hidden';
        quantityInput.name = 'quantity';
        quantityInput.value = '1';
        form.appendChild(quantityInput);
      }

      inputs.forEach(input => {
        input.addEventListener('change', () => {
          if (input.checked) {

            if (indicator) {
              indicator.textContent = input.dataset.units;
            }

            if (progressBar) {
              progressBar.setAttribute('data-quantity', input.value);
            }

            progressItems.forEach(item => {
              const isCurrentItem = item.dataset.quantity === input.value;
              item.setAttribute('aria-current', isCurrentItem);
            });

            if (quantityInput) {
              quantityInput.value = input.dataset.units;
              quantityInput.dispatchEvent(new Event('change', { bubbles: true }));
            }

            document.querySelectorAll('form[action="/cart/add"]').forEach(cartForm => {
              let formQuantityInput = cartForm.querySelector('input[name="quantity"]');
              if (!formQuantityInput) {
                formQuantityInput = document.createElement('input');
                formQuantityInput.type = 'hidden';
                formQuantityInput.name = 'quantity';
                cartForm.appendChild(formQuantityInput);
              }
              formQuantityInput.value = input.dataset.units;
              formQuantityInput.dispatchEvent(new Event('change', { bubbles: true }));
            });
          }
        });
      });
    }
  }

  customElements.define('product-detail-quantities', ProductDetailQuantities);
});
</script>

Das Hinzufügen einer Mengenauswahl zu Ihrem Shopify-Shop ist eine kleine, aber sinnvolle Verbesserung, die die Benutzerfreundlichkeit verbessern und größere Bestellungen fördern kann. Mit nur wenigen Anpassungen des Designs können Sie Ihren Kunden ein reibungsloseres Einkaufserlebnis bieten und möglicherweise Ihren durchschnittlichen Bestellwert steigern.

Wenn Sie noch weiter gehen möchten, können Sie den Mengenwähler mit Upselling-Aufforderungen oder bestandsbasierten Nachrichten kombinieren, um Dringlichkeit zu erzeugen oder Großeinkäufe zu fördern.

Sprache

So fügen Sie Ihrer Shopify-Produktseite einen Mengenwähler hinzu

Warum einen Mengenwähler hinzufügen?

So fügen Sie Ihrem Shopify-Theme einen Mengenwähler hinzu

Hole dir deinen Code

Kostenlose Shopify Sections. Jede Woche. 🤩