How to add Product Personalization Option ( Shopify Madrid Theme )

[dreamtechzone_5]

Hello Everyone!

I am using the Shopify Madrid theme. I want to add options like the 2 images below on the product page. How do I add it? Please help me. Thanks in advance.

Store: https://urbanglowingstore.myshopify.com/
Password: Admin

Ref: https://studionoos.com/nl/collections/personalized/products/brown-noos-mini-chunky-backpack

[Small_Task_Help]

Hi,

Hope this will help

• Open the product you want people to personalize. Add a tag called personalized (we’ll use it to show fields only when you want).

• Add the personalization boxes

Theme Customizer → Product page → Product information → Add block → Custom liquid

Code example

{%- if product.tags contains 'personalized' -%}
  {%- assign product_form_id = 'product-form-' | append: section.id -%}

  <div class="rounded-xl border p-4 my-4" style="gap:12px;display:flex;flex-direction:column">
    <h3 style="margin:0">Make it yours</h3>

    <label for="engrave-name">Name (max 12 letters)</label>
    <input id="engrave-name" form="{{ product_form_id }}" type="text" name="properties[Name]" maxlength="12" required>

    <div role="group" aria-labelledby="thread-label">
      <div id="thread-label" style="margin:8px 0 4px">Thread color</div>
      <label><input form="{{ product_form_id }}" type="radio" name="properties[Thread color]" value="White" required> White</label>
      <label><input form="{{ product_form_id }}" type="radio" name="properties[Thread color]" value="Black"> Black</label>
      <label><input form="{{ product_form_id }}" type="radio" name="properties[Thread color]" value="Gold"> Gold</label>
    </div>

    <label for="font-style">Font</label>
    <select id="font-style" form="{{ product_form_id }}" name="properties[Font]">
      <option>Classic</option>
      <option>Script</option>
      <option>Bold</option>
    </select>

    <label for="notes">Notes (optional)</label>
    <textarea id="notes" form="{{ product_form_id }}" name="properties[Notes]" rows="2" placeholder="Any special request?"></textarea>

    <!-- Optional image upload (may not preview in all carts) -->
    <label for="ref-image">Upload reference image (optional)</label>
    <input id="ref-image" form="{{ product_form_id }}" type="file" name="properties[Reference image]" accept="image/*">
  </div>

  <script>
    // tiny UX guard: disable Add to cart until name is filled
    document.addEventListener('DOMContentLoaded', function () {
      const nameField = document.getElementById('engrave-name');
      const btn = document.querySelector(`#${CSS.escape('{{ product_form_id }}')} [type="submit"]`);
      if (nameField && btn) {
        const toggle = () => btn.disabled = nameField.value.trim() === '';
        nameField.addEventListener('input', toggle); toggle();
      }
    });
  </script>
{%- endif -%}

• Show notes in the cart

[Easify-Jennifer]

Hi @dreamtechzone_5

You can effortlessly customize your products like yours with Easify Product Options, adding text boxes, buttons, checkboxes, and a wide variety of other input fields to suit your needs. Here’s how it works:

• This is the result:

• This is the app setting:

The app supports Conditional Logic, so you can set it to only show options after customers click “Add personalization.”

To set a price, in the “Price” section (the add-on price), enter your desired amount — and you’re all done!

This app provides an easy and hassle-free way to customize your products. Feel free to reach out to Easify anytime for support!