How to Add the Instant Search Icon Widget to Your theme

Follow the steps below:

1. Go to the Widgets page

Click the icon marked with a red arrow on the left side of the screen.

2. Scroll through the page

Locate the Instant Search Icon widget.

3. Click the "Add to my theme" button

This button is indicated with a red arrow.

4. A tutorial video will appear

Then, click the "Add widget to my theme" button, also marked with a red arrow.

5. A new tab will open automatically

Wait for the new tab to fully load.

6. Click the list header marked with a red arrow

This will expand the widget list.

7. Select Instant Search Icon

Clicking it will open the settings panel for the widget.

8. Enter the CSS code

In the field marked with a red arrow. (Note: A basic understanding of HTML/CSS is recommended for this step.)

9. How to get the code class.

To get the class of the element, right-click and inspect the element in the area marked with a red arrow.

10. Once the inspection panel opens, hover your mouse over the section marked with a red arrow at the bottom. This will highlight the target element, which is located in the top-right corner of the page.

11. Adjust the target position settings according to your needs

12. For example, if you want to place it in the first position, configure the target position as shown below:

Before:

After: