Finding Ecwid storefront CSS selectors
When you want to make changes in your storefront that can’t be achieved with the Ecwid inbuilt design settings, you can use CSS codes. You can choose from the ready Ecwid CSS codes or create your own codes from scratch.
To create a code, you should find the right selector for the element (text, button, image, etc.) that you want to change. You can do it with the inbuilt browser developer tools. Once you get the selector, create a code and paste it into your store design theme. After you refresh the storefront page, you’ll see the changes.
Check out our video below to learn how CSS works in general:
To find a CSS selector for the storefront element:
- Open the store page where you see the element that you want to change.
- Right-click on the element that you want to change > Inspect:
You’ll see Chrome Inspector opened on the page. The element you are looking for will be highlighted.
- On the right side, copy the selector:
- Open the store page where you see the element that you want to change.
- Right-click on the element that you want to change > Inspect:
You’ll see Firefox Inspector open on the page. The element you are looking for will be highlighted.
- On the right side, copy the selector:
- Open the store page where you see the element that you want to change.
- Right-click on the element that you want to change > Inspect Element:
You’ll see Safari Web Inspector opened on the page. The element you are looking for will be highlighted.
To enable inspecting elements in Safari, go to Safari → Preferences → Advanced and select “Show Develop menu in menu bar”. - On the right side, copy the selector:
Use the found selector to create CSS codes. Then paste the ready codes to the store active CSS theme.
Example
The price on the product page has this CSS selector:
.ec-size .ec-store .details-product-price__valueA CSS code to change the price color to red will be like this:
.ec-size .ec-store .details-product-price__value {
color: red;
}Related articles:
A comprehensive guide to customizing your Ecwid store design
CSS codes for your Ecwid Store
Customizing specific pages