CSS selectors allow you to place Fera widgets, like product reviews and ratings, on specific parts of your website. This guide provides simple instructions, examples, and troubleshooting tips to help you get started.
Steps to Use CSS Selectors with Fera
1. Accessing Widget Settings
Go to Configuration > Widgets in the Fera app and open your widget editor.
Select CSS Selector as the installation method.
2. Identifying a CSS Selector on Your Website
Open your site in a browser and right-click on the area where you want the widget, then select Inspect (or press F12).
Highlight the element and locate its CSS selector (e.g.,
.product-title).
3. Adding the CSS Selector in Fera
Copy the CSS selector from your website.
Paste it into the "CSS Selector" field in the widget settings. Save your changes.
4. Preview and Adjust
Preview the widget to ensure it displays correctly.
If the widget doesn’t appear as expected, double-check the CSS selector or try a more specific selector.
Showing Product Reviews
Showing Product Reviews
Easily attach Fera’s product review widget to specific sections of your site using CSS selectors.
Troubleshooting Tips
Widget Not Displaying?
Ensure the CSS selector is formatted correctly. Use a.before the name for classes (e.g.,.product-title) and a#for IDs (e.g.,#review-section).
Using Dynamic Classes?
If your site uses classes that change frequently, switch to a more stable identifier like an ID to ensure the widget works reliably.Misaligned Widget?
Test different selectors to find the best position for the widget.Still Not Working?
Contact Fera support for help.