Open Your Store URL
Start by opening your Shopify store in a web browser.
Navigate to the page where you want to embed the widget.
Open Developer Tools
Right-click anywhere on the page and select Inspect to open the Developer Tools.
Locate the element you want to use as a trigger. This is the element that, when clicked, will open the widget.
Find the Unique ID or Classname
In the Developer Tools, hover over the element to highlight its HTML code.
Press CTRL+F and search for its id or Classname.
If the element has an id, it is unique and can be used directly.
If the element does not have a unique classname, try combining multiple class names to ensure uniqueness.
Copy the ID or Classname
Once you identify a unique ID or Classname, copy it for later use.
Customize the Widget
Now, open the widget that you want to embed and customize it as per your requirements
Open Display Condition Settings
Navigate to the Display Condition settings of your widget.
Go to the Trigger Settings section.
Add the ID or Classname
Locate the On Click Settings or On Hover Settings option.
Paste the id/classname
If you copied an id, use
#id_name(e.g.,#header-button).If you copied a classname, use
.class_name(e.g.,.shop-button).
Save and Publish
Once you've added the correct selector, save the settings and publish the widget. Now, whenever the selected element is clicked, the widget will appear.
Final Look:
In this example, we have added an "On Click" trigger on the Contact element of the nav-bar list, which will open the Book Appointment Widget. Similarly, you can add "On Hover" Trigger as well
