# How to show a quantity selector on the wishlist page?

### Enable Quantity Selector

In **Swish → Settings → Code Editor → Custom CSS**, add:

```css
wishlist-page .wk-page .wk-form .wk-quantity {
  display: inline-flex;
}
```

<figure><img src="https://1937747638-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnXXi1yNhTBzSF0GRtx54%2Fuploads%2FBQ6cjp0vMbsfuWV8daAN%2Fimage.png?alt=media&#x26;token=d13c85ea-786d-4328-a5a3-55b2e2d99f4f" alt=""><figcaption></figcaption></figure>

## Show quantity selector with horizontal counter

<figure><img src="https://1937747638-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnXXi1yNhTBzSF0GRtx54%2Fuploads%2FK9xuoCuYgem6O7TxBdsT%2Fimage.png?alt=media&#x26;token=20c691ea-af68-48a1-943a-db040725a174" alt=""><figcaption></figcaption></figure>

### Update the Quantity Markup

In **Swish → Settings → Code Editor → Custom Product Card**, update the .wk-quantity block from:

```javascript
<div class="wk-quantity">
  <label class="wk-quantity-label">
    ${this.getTranslation("wishlist_product.quantity")}
  </label>
  <input
    class="wk-quantity-input"
    type="number"
    name="quantity"
    value="1"
    min="1"
  />
</div>
```

to:

```javascript
<div class="wk-quantity">
  <button type="button" class="wk-qty-btn wk-qty-minus">−</button>
  <input
    class="wk-quantity-input"
    type="number"
    name="quantity"
    value="1"
    min="1"
  />
  <button type="button" class="wk-qty-btn wk-qty-plus">+</button>
</div>
```

### Add Quantity Counter Logic

In **Swish → Settings → Code Editor → Custom Product Card**, add the following to your component’s JavaScript:

```javascript
updated() {
  const input = this.renderRoot.querySelector(".wk-quantity-input");
  const minus = this.renderRoot.querySelector(".wk-qty-minus");
  const plus = this.renderRoot.querySelector(".wk-qty-plus");

  if (input && minus && plus) {
    minus.addEventListener("click", () => {
      let value = parseInt(input.value) || 1;
      if (value > 1) input.value = value - 1;
    });

    plus.addEventListener("click", () => {
      let value = parseInt(input.value) || 1;
      input.value = value + 1;
    });
  }
}
```

### Style the Counter Buttons

In **Swish → Settings → Code Editor → Custom CSS** (example CSS)

```css
wishlist-page .wk-page .wk-form .wk-quantity {
  display: inline-flex;
  margin: 0;
  width: 50%;
  height: 45px;
  flex-wrap: nowrap;
  flex-direction: row;
  border: 1px solid #00000063;
}

.wk-qty-btn {
  height: 100%;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

```