Running the latest Revindex Storefront, styling buttons is as easy as styling any element on the page. The best approach is to locate the relevant CSS class and override the styles from your portal stylesheet under Settings > Custom CSS settings page.
By default, the buttons automatically apply the same styles as the rest of the buttons on your site achieving a consistent look-and-feel across all your pages. Revindex Storefront makes it easy for you to override the look-and-feel of a single button or all the same buttons (e.g. "Add to cart" buttons). The easiest way is to use the developer tool on your browser (typically by pressing F12 or CTRL+SHIFT+I on your browser). The developer tool allows you to select the button and inspect the CSS class name being applied.
As an example, let's try to style the "Add to cart" button.
- Browse to your product list page.
- From your IE or Chrome browser, press F12 to launch the developer tool.
- With the selector tool (usually an arrow or magnifying glass icon), click on the "Add to cart" button. The developer tool will pinpoint the corresponding HTML that is responsible for rendering the button.
<a class="btn btn-primary rvdsf-btn-addtocart" href="#">Add to cart</a>
- Note the CSS class responsible for the styling the button follows Bootstrap is called "btn btn-primary rvdsf-btn-addtocart".
- Suppose we like to change the background color of the button to green. We can override the default style of your skin from the stylesheet under Settings > Custom CSS settings page by pasting the following CSS rule below. This rule will change all the "Add to cart" buttons on your site.