With the Change Commerce app, you have three options for widget placement for your product, cart, and checkout pages when using the Store Donation on Purchase campaign— theme section, automatic placement, and manual placement. If you are using the automatic placement option, you have the ability to utilize our custom CSS Selector to change the location of the donation widget.
By default, the product page widget will search and insert itself to the “add to cart” button, and the cart page widget will search and insert itself to the “checkout” button.If you would like to change the location of the widget you can use our custom CSS selector which can be found within the Change Commerce app under Campaigns > select your campaign > select the Widget Settings tab > and scroll to the Widget Location section.
Please note that you will only have the option to use the custom CSS Selector if you have chosen to use the automatic placement option for your Widget Placement settings.
***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 desired 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 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. Navigate to the Campaigns drop-down menu and select Store Donation on Purchase, then select the Widget Settings tab. Find the Widget Location section and copy and paste the element into the Target CSS Selector field.
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 Global Settings and open 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.