How to use the manual widget insertion method?

Learn how to place a widget manually on-site.

Aside from the automatic drag and drop widget insertion method, PickyStory also has a manual way of inserting a widget on-site, and here's how you can do it.

1. Get the class or id

First, locate the class or id of your desired location. 

To do this, you need to right-click on the page and then select 'inspect'.
Then, hover your cursor to your desired location. 

Make sure that the class or id you chose exists only one time on the page by clicking on 'ctr+f' and searching the selected selector-


Note: Widgets are automatically placed after the chosen selector. In this case, the screenshot above indicates that the widget will be placed "after" the End of Season Sale header.

2. Place the selector on the "Custom location selector."

After locating the right selector, you can go to the designer > settings > advanced > Custom location selector.


Note: When selecting 'id' as a selector, start with '#' (example: #Addtocart-bttn)
If you opt to use 'class' as the selector, start with a dot(.) and replace every space with a dot as well. (example: .add_to_cart.bttn)

3. Save

Once done, click on the 'Save Changes' button. Once all changes are good, you can then click on 'Publish' to display the changes on-site.


Try PickyStory