You can customize your PowerReviews content to better fit your brand. It's important to carefully read and follow the guidelines below, as any changes you make could impact the following:
- PowerReviews' ability to support your customizations
- PowerReviews' ability to guarantee WCAG 2.1 AA Section 508 compliance of the PowerReviews components (for more information, see ADA Compliance)
- PowerReviews updates could potentially break your installation
If you still wish to customize your content, you can access a CSS theme template here. Using the selectors included in the template, you can create a high-level theme for your platform by defining things like typography, button colors, and rating/star icons.
Note: Programmatically manipulating PowerReviews content creates significant risk. If there is behavior that you want to implement, but can't accomplish through the render() method, contact PowerReviews Technical Support.
This article contains the following sections:
CSS Overrides
It's a requirement to only use CSS overrides to customize your content, rather than modifying the HTML content that the PowerReviews JavaScript creates. If you modify the HTML content to customize your content, your content has the potential to not be compatible with PowerReviews updates going forward. This would result in your platform components erroring and rendering incorrectly.
You should only use CSS class selectors to target and customize PowerReviews content. Targeting elements using class selectors guarantees that your customizations are forward compatible with product updates. Class names used in PowerReviews content are typically prefixed with pr-. For example, pr-snapshot-container.
Examples of selectors to avoid using include:
- Child selectors (for example: first-child)
- Selectors that target other HTML element attributes (for example: the data-reactid-powerreviews attribute)
- Element selectors (for example: div, form, p, and span)
If you use these selectors in your CSS overrides, the CSS can break due to markup changes (while markup can change, PowerReviews class names don't change).
Hosting Your Own Custom CSS
You should host custom CSS on your infrastructure. When you do this, ensure you provide your style sheet URL to the Content Engine via the style_sheet parameter within the Product Configuration object.
To provide the URL to your style sheet to the Content Engine, host the CSS on your site. For example, http://www.example.com/yourcssfile.css. When you initialize PowerReviews, pass your style_sheet parameter.
Example:
<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>;
<div id="pr-reviewsnippet"></div>
<div id="pr-reviewdisplay"></div>
<script>
window.pwr = window.pwr || function () {
(pwr.q = pwr.q || []).push(arguments);
};
pwr("render", {
api_key: '<API Key>',
locale: '<locale>',
merchant_group_id: '<MGID>',
merchant_id: '<Merchant ID>',
page_id: '<PageID>',
review_wrapper_url:'http://yoursite.com/write-a-review/?pr_page_id=__PAGE_ID__',
style_sheet: 'http://www.example.com/yourcssfile.css',
components: {
ReviewSnippet: 'pr-reviewsnippet',
ReviewDisplay: 'pr-reviewdisplay'
}
});
</script>
PowerReviews CSS Online App
After you review the above guidelines, reference the PowerReviews CSS Online App below. With this app, you can highlight various components of the Review Snapshot, Review Snippet, Review List, and Write-a-Review Form and determine which elements you want to style.
To begin:
1. Click through to view the PowerReviews CSS Online App.
2. Click on the feature you want to style at the top, such as Snapshot.
3. Click on each style class in the left-hand navigation. The app only displays the element you select on the right-hand side of the screen.
4. Make note of the style class you want to style, and apply CSS to this element in your hosted CSS.