Adding customization fee

[Tonecas75]

Hi, I have been trying to add a dropdown where the customer can select if they want a custom sleeve and a 12€ charge would be added. I already created a product called "Add-on: Text On Sleeve" and a dropdown with the options yes and no and tried to make it so the yes added the other product but I couldnt make it work, could anyone help me? Here is the code i tried to use:

<div class="product-form__input product-form__input--dropdown">

  <label class="form__label">Add Text On Sleeve</label>

  <div class="select">

    <select class="select__select" id="add-text-on-sleeve" name="properties[Add Text On Sleeve]" form="{{ 'product-form-' | append: section.id }}" required>

        <option value="" hidden selected>Please select</option>

        <option value="Yes+12€">Yes+12€</option>

        <option value="No">No</option>

    </select>

    <svg aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6">

      <path fill-rule="evenodd" clip-rule="evenodd" 

      d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" 

      fill="currentColor">

      </path></svg>

  </div>

</div>

<script>

  document.addEventListener("DOMContentLoaded", () => {

    const selectElement = document.querySelector('#add-text-on-sleeve');

    const addTextOnSleeveVariantId = '8549906383112';

    selectElement.addEventListener('change', () => {

      if (selectElement.value === 'Yes+12€') {

        const cartUrl = '{{ shop.url }}/cart/add.js';

        const data = {

          quantity: 1,

          id: addTextOnSleeveVariantId

        };

        fetch(cartUrl, {

          method: 'POST',

          headers: {

            'Content-Type': 'application/json'

          },

          body: JSON.stringify(data)

        })

        .then(response => {

          if (!response.ok) {

            throw new Error('Error adding product to cart');

          }

          return response.json();

        })

        .then(data => {

          console.log('Product added to cart:', data);

        })

        .catch(error => {

          console.error('Error adding product to cart:', error);

        });

      }

    });

  });

</script>

Anyone know a fix to this?

[EasifyApps]

Hi @Tonecas75,

You might want to consider using Easify Product Options app to seamlessly incorporate a custom "Text On Sleeve" option for your main product, along with a 12€ charge. It's a quick process that doesn't involve any coding. Plus, you have the flexibility to showcase this custom option using Dropdown, Checkbox, or various other display types. Take a look at this example 🤗:

• Storefront:

• App settings:

[EFOLI-Emilia7]

Hello @Tonecas75,

I’d suggest you try out a third-party Shopify app called the Inkybay - Product Personalizer app for custom pricing. Using this app’s product option feature, you will be able to create product options and show those options in a drop-down style. You will be able to add an additional custom fee to those options, and this price will be added to your base product price.

This app also offers 21 days of free trial time. So you can explore and see if this will work for your business or not. Feel free to knock me if you want to check out the sample product.

[Eli_Kickflip]

Hi @Tonecas75 ,

Have you considered creating a product customizer? It would allow your customers to see a live preview of their personalization on your product. Kickflip offers a feature-rich environment for customizing products, allowing customers to select colors, add custom text, choose fonts, and much more! This user-friendly platform empowers you to effortlessly provide simple personalizations or delve into more complex customization scenarios in no time.

If you'd like to dive deeper into how Kickflip can be integrated with your store and the specific features it offers, we can book a call with our sales team or book a free webinar.

You can also create a free account here to get started and familiarize yourself.

I hope this helps! Let me know if you have any further questions or requirements.

Happy customizing!

The Kickflip Team