Articles on: Styling

Showcase Custom Options via a Popup or Trigger Button

In e-commerce, how you display product customization options can significantly impact the shopping experience. While some stores prefer showing all options directly on the product page, others may want a cleaner, distraction-free layout. For such cases, Tepo introduces a feature that allows custom options to appear in a popup triggered by a button click.

💡 Why Use Popups for Custom Options?



Using popups to display customization options is a smart choice for stores looking to create a more organized and professional look. Here’s why this method works:

Enhanced Visual Clarity: Popups help reduce clutter, especially if your product requires multiple customization options.
Selective Display: Ideal for optional services or add-ons that don’t need to be immediately visible on the main product page.
Focused Interaction: Customers can concentrate solely on their customizations without being distracted by other page elements.

🎁 Examples of Use



Customizable Products: For items like engraved jewellery or personalized gifts, a “Customize Now” button can open a popup where customers input their personalization details, keeping the main page clean and focused.

🚀 How to Implement This Feature



Here’s how you can enable and configure this feature in Tepo:

Access Settings: Log in to your Tepo dashboard and settings menu and navigate to StylStyle



Activate your preferred form style:

The current app version has 4 available form styles for displaying product customization options. You can find more detailed information about these styles and how to configure them in our article here.

Note that the selected Style will be applied to all option sets in your store.

If you’d like to apply specific popups or collapse/expand (accordion) styles to particular options, consider using the Option Group feature rather than applying a single style globally**Option Group**. This allows for greater flexibility in displaying customization options for different options. Learn more about this feature here

Configure Button Settings:

Add a standalone button (e.g., “Customize Now”) or modify the existing Add to Cart button to trigger the popup.



Adjust the button text to suit your store’s tone, such as “Personalize,” “Add Your Touch,” or “Select Options.” etc.
You can also customize the trigger button's text, background colour, hover background colour, text colour, hover text colour, border colour, and hover border colour.

Save and Test: Preview your product page once configured to ensure the popup behaves as expected.
in
Popup:


Expand/Collapse form:



❓ Need Help?



If you have any questions or run into any issues while adjusting widths, we’re here to assist you!

Email us at: support@tepo.app
Chat with us in the app: Open the in-app chat, and we’ll be happy to help.

Happy customizing with TEPO! 😊

Updated on: 25/02/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!