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 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:

Inspect Ecwid storefront in Chrome

You’ll see Chrome Inspector opened on the page. The element you are looking for will be highlighted.

  1. On the right side, copy the selector:

Copy CSS selector

  1. From the copied selector, remove this part: html#ecwid_html body#ecwid_body.

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__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: https://www.w3schools.com/

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!

Sorry about that! We are here to assist you by email or chat.

Contact support