Articles on: Product Options Personalizer

Install and Setup the Product Options Personalizer App

The Product Options Personalizer app helps you create customizable products that customers can personalize directly on your store.

With this app, customers can add text, images, logos, colors, and designs and see changes in real time. You can create interactive design areas for different product sides like front, back, or multiple surfaces.


This guideline helps you set up and manage product customization step by step.


✨ Key Features

  • Multiple Product Sides — Design front, back, or multiple areas
  • Option Sets — Reuse options like colors, fonts, or styles
  • Conditions — Show/hide options based on selections
  • Required Fields — Ensure important inputs are filled
  • Additional Charges — Add pricing for premium options
  • Design Controls — Control element behavior on canvas




Steps:


  1. Install the App: Visit the Product Options Personalizer app listing on the Shopify app store and click the Install button.



  1. Enable the App embed block: Go to the Shopify Admin ➜ Click on the App ➜ Click on Enable Theme Block





  1. Toggle the Switch : Redirected to the Theme Editor page ➜ find the Custom Product Options App ➜ toggle the switch on ➜ click Save.




  1. Enable App : Locate the Enable app on your storefront option → You will see the app status set to Disabled → Click the Enable button → Once enabled, the app will become active on your storefront.




  1. Product Configuration: Navigate to Assign Template to Product → Click the Manage Products button




  1. Selection of Product: Click on the Add product button ➜ select the product ➜ Click on the Add button



  1. Create Or Select Template : Templates define how customers can customize a product in the Product Options Personalizer app. You can either create a new template by clicking Create New Template or select an existing template (for example, Custom T-Shirt Design or Personalized Mug).


**To learn how to create a new template, refer to this guide. : https://setubridge.crisp.help/en-in/article/template-setup-guide-product-options-personalizer-11o8s8u/**


A template can include:

  • Product views (front, back, side)
  • Text elements for personalized messages
  • Image upload for customer designs
  • Clipart or graphics
  • Defined design areas for customization



  1. Add Elements: Create a template → Add customization elements → click to ADD → Customers can personalize those products on the storefront.



  • Text – Add a Text Element to allow customers to personalize the product with their own text (such as names or messages). You can configure label, default text, font style, font size, alignment, colors, and character limits.


  • Multiline Text – Add a Multiline Text Element to allow customers to enter longer messages (such as notes or detailed instructions). You can configure label, default text, font settings, alignment, colors, and character limits.


  • Image Upload – Add an Image Upload Element to allow customers to upload their own image or logo for product personalization. You can configure settings like label, cart label, default image, and maximum width/height to control the image size on the canvas.


  • Clipart / Image Choice – Add a Clipart Element to allow customers to choose graphics or icons from a predefined clipart library. You can configure settings like label, default image, image sets, and maximum width/height to control how the clipart appears on the canvas.


  • Canvas Controls: These options allow interaction with the label on the canvas. Depending on which options are enabled, customers can move, resize, rotate, or delete the label. If all controls are disabled, the label will remain visible but cannot be modified.


  • Dropdown – Allows customers to select one option from a list (e.g., size, material, or style). It keeps the interface clean when you have multiple choices.


  • Button – Displays options as clickable buttons. Customers can quickly select an option with a more visual and interactive experience.


  • Checkbox – Allows customers to select multiple options (e.g., add-ons like gift wrap, accessories, or extra features).


All three elements use Option Sets, where you can define:

  • List of choices
  • Default selection
  • Optional pricing for each option


Tip: Use Dropdown for simple selections, Buttons for better visual interaction, and Checkboxes when multiple selections are needed.




  • Additional Settings – Text, Image Upload & Clipart

The following settings are available for Text, Image Upload, and Clipart elements:


• Required Field – Enable to make this field mandatory before customers can add the product to cart.


 Additional Charge – Enable to add an extra cost for this element. Enter the amount in the Price field (use 0 for no charge).


 No Preview – No Preview – Enable this option to hide the element from appearing on the design canvas. For a better understanding, please refer to this [guideline](No Preview – Enable this option to hide the element from appearing on the design canvas. For a better understanding, please refer to this guideline.).


 Use for design only (not editable) – Enable to make the element visible on the canvas but prevent customers from modifying it.




  1. Configure Product Side & Background: Template Editor → Click ⋮ (three-dot menu) next to Front → Select Edit Side → Enter Side Name → Choose Background Type (Product Images or Blank Canvas) → Select or upload Background Image using Change Image / Choose from Media → Click Save.



  • Blank Canvas : Blank Canvas creates an empty design area without a product image. You can set the canvas width and height (pixels) and choose a background color to define the design space where customers can add text, images, or clipart.


Note: Blank Canvas creates an empty design area without a product image. This is useful when you want customers to design freely or when the product preview image is not required.




  • Product Images: Product Images use the product’s existing images as the canvas background. This helps customers see how their text, images, or clipart will appear directly on the product. You can change the background image, select one from the media library, or choose from the product’s available images to display on the canvas.



  1. Configure and Save the Product : Add the required elements → Drag and resize them within the design area → Configure their settings from the Element Settings panel on the right → Click Preview to check how the customization will appear → Click Save to finalize the template. Once saved, the template will be ready to use for product personalization on the storefront.





Result:


  1. Pop-up Presonalization :- Go to your online store → Open the product page of the product you assigned in the app → You will see the Customize button → Click Customize to start personalizing the product.





On page Personalization :-





Final Step: Check Cart

Add the product to the cart and confirm that the selected customization options (like Label/Text and Clipart) appear correctly in the cart.

If the details appear as shown, the app has been installed successfully.


You're All Set!

Your product personalization setup is now complete. Customers can easily customize the product by adding text, images, or clipart and preview their design before placing the order.

This feature helps you offer a more interactive shopping experience and allows customers to create unique, personalized products directly from your store



Found this helpful? ✅ Leave a Review


Need Help?


If you need help setting up translations or want assistance tailoring them for your store, feel free to contact our support team at **support@setubridgeapps.com **or on

explainsWhatsApp: +91 8511963839. We’re happy to help 😊


Updated on: 27/03/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!