How can I add a pop-up option like the one below?

Hi everyone, I wanted to ask you about a problem I’m having with product options.
I want to run a name embroidery service on clothes as shown in the picture and want to add the same popup options functionality but I don’t know how to do it, do I need a separate app?

Kind regards,
Zenir

There are several ways to do this, below is some code you can place inside main-product.liquid where you want to box to display on the product page. It uses a metafield to ensure it only displays on the products you need it to, so go to Settings, Custom Data, Products and click Add definition. The namespace and key should be c**ustom.name_field and under Select Type pick True or False. Now you will see an option to toggle this on under Metafields in product pages.

{% if product.metafields.custom.name_field %}
   
    
      

        
      

  

{% endif %}

Depending on the theme you’re using the form element may be different, but that ensures the data is visible at checkout and contained within the order on the backend.

Hope this helps

Hi @zenir_official :raising_hands:

I can recommend you the Easify Product Options app. Regarding the popup for the name embroidery option, it is still possible to set up a popup trigger for customers to enter information (location, name, font color, font…) when choosing the personalization service. However, if you do it this way, there will be no live preview, meaning the buyer will not see the text displayed directly on the product image when they type.

Therefore, you can consider two deployment directions:

  1. Use a separate popup to collect name embroidery information — cleaner interface (but no live preview).

Here’s an example I’ve created so you can see how it works:

  • This is the result:

  • This is the app setting:

If you want to enable trigger pop up, just go to Advanced Setting and enable “Show option in Popup - triggered by button click”:

  1. Instead of using popups, display options directly on the product page — this allows for a live preview, providing a more intuitive experience for customers.

You just need to go to Advanced Setting and turn off “Show option in Popup - triggered by button click”:

  • This is the result:

Depending on your goals and the level of complexity you want, both approaches are viable. If you prioritize user experience and live preview, then approach 1 is better; but if you want a simple, manageable interface, approach 2 is more suitable.

It’s incredibly easy to use and performs perfectly when it comes to product personalization. Easify’s support team is just a message away if you ever have questions.:blush: