By default, the product page widget will search and insert itself to the “add to cart” button. If you would like to change the location of the product page widget or your page does not have an “add to cart” button, you can use our custom CSS selector. It can be found within your manager under Settings > Widget > and scroll down to the section labeled “Product Page Widget Location”.
***Disclaimer: doing this requires very basic developmental understanding. We suggest finding a front end developer for help or utilize a member of our sales team. We are not responsible for anything they end up breaking.
In order to place the widget in a custom location, some basic understanding of CSS is required. If you have the developmental knowledge of what a CSS selector is and how it works, you can skip this next section and go straight into the “Using the CSS Selector” section.
What is a CSS Selector:
CSS selectors are used to select the content you want to style. CSS selectors select HTML elements according to its ID, class, type, attribute, etc.
For a better understanding of what a CSS selector is, visit these resources.
Using the CSS Selector
Step 1. Find a unique element (div, class, label, attributes, or value) that you wish to target and copy the name of the class or ID into the CSS Selector Field.
To do this, open a tab with your product page > right click your mouse and open the web development tool. E.G. select “Browser Developer” for Safari or “Inspect” for Chrome > and open the “Elements” tab.
From here, you can click the icon of the box with the arrow inside (top left corner of inspect window). You can now hover over different elements on the product page (add to cart button, product image, etc.) and various elements will be highlighted.
Step 2. Click on the element that you want to target and identify the CSS class or ID that you would like the widget to attach to, either above or below.
Note, make sure you target an element that is consistent and will be shown across all product pages. You should also be aware of the placement of the widget as the screen resizes from desktop to mobile devices. For this reason, we suggest placing the widget before the call to action element (add to cart button, buy now button, etc.) to ensure that the donation widget will show on all eligible product pages.
Step 3. Copy and paste the element into the Target CSS Selector field from the Product Page Widget Location section in your widget manager.
Note, if you are targeting a CSS class you must put a decimal (.) before the class name and if it’s an ID you must put a hash (#) before the name.
Step 4. Save your changes, preview your updates, and clear your cache. If you are not activated yet, make sure you visit your Manager and activate Preview Mode (located above the “Start Giving” button).
You should clear your cache and refresh every time you change the location of the custom CSS widget selector and save this change.