Knowledge base
Video tutorials
Try searching for:
Recently viewed articles:

Table of contents

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:

Creating CSS codes will require advanced knowledge of CSS. Ecwid Experts can help you with this task and design a theme for your store.

To find a CSS selector for the storefront element:

  1. Open the store page where you see the element that you want to change.
  2. 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.

  3. 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.


The price on the product page has this CSS selector:

.ec-size .ec-store .details-product-price__value

A CSS code to change the price color to red will be like this:

 .ec-size .ec-store .details-product-price__value {
              color: red;
There are a lot of online resources where you can learn how to create CSS codes. For example, check this one:

Related articles:

A comprehensive guide to customizing your Ecwid store design
CSS codes for your Ecwid Store
Customizing specific pages

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
3 out of 5 found this helpful
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline