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 inside which you want the widget.
Find the Unique ID or Classname
Press CTRL+F and search for its id or Classname. Refer to this article to find the unique id/classname.
Copy the id or classname 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 Embed Position section.
Add the ID or Classname
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
Final Look:
