Articles on: Getting Started (Shopify)

How to Create an Embedded Widget

Creating an Embedded Widget on your website can elevate your users' experience, offering them personalized content, unique offers, or bespoke recommendations. But, before you start, it's essential to know exactly what you want this widget to achieve. Will it highlight a special product? Provide an exclusive discount? Or maybe deliver tailored content?

In this tutorial, we'll walk you through each step of setting up an Embedded Widget using Personizely on your website. Follow these instructions closely to unlock the full potential of this feature for your site and your customers.

Navigate to the Widgets tab and locate the "Create a widget" button, situated in the upper-right corner of your screen.

Create a Widget

Decide on your approach to widget creation. For a quicker and streamlined process, we recommend opting for the Pre-built Templates.

Select the Widget build

Determine the widget type that aligns with your needs and choose a pre-built template that best fits your website aesthetic and function.

Select Widget Type

Configure the Trigger for your widget. This setting determines when and how your widget will be displayed to users.

Select Trigger

Assign a name to your widget. For consistency and clarity, we suggest adopting the following structure: Function - [Device(platform)/Trigger/Target] - (Version).

Naming Structure

Utilize the customization options to tailor the widget to your requirements, and then extract the embedded code ID only.

Embeddable code

Next, navigate to your Shopify Store, go to Online Store -> Themes -> Customize.

Customize your Theme

Click "Add section" and select the Personizely widget on your page to display the Embedded Widget.

Embedding your Widget on your Store

Input the widget ID and click save. Your widget will now appear on the selected page.

Save the embedded widget

Congratulations! You have successfully completed the setup process. Your custom Embedded Widget is now seamlessly integrated and visible on your chosen page.

For further assistance, we've provided a supplementary video tutorial. This step-by-step walk-through will guide you visually in creating an Embedded Widget:

Updated on: 14/06/2023

Was this article helpful?

Share your feedback


Thank you!