Adding CSS codes to your store
You can change the design and layout of your storefront using CSS codes. CSS codes are used to define how HTML elements should display on a page. To apply CSS codes to your storefront, you should add them to a CSS theme in your Ecwid admin.
See the video below to learn how CSS works in general:
Check our collection of the most commonly used CSS codes. You can use them as is or modify them for your store. Keep in mind that editing CSS codes requires good knowledge of CSS. If you aren’t comfortable with editing codes, consider hiring the Ecwid Custom Development team.
To add a CSS code to your Ecwid store:
- If you haven’t added any CSS codes to your Ecwid store before, go to the Design page in your Ecwid admin.
- Scroll down to the Themes and in-depth customization section.
- Click Create Theme:
- This step may vary depending on where you sell.
- If you sell on New-Gen Instant Site, you will be redirected to the Instant Site Editor. Paste your code to the Custom CSS Code field.
- If you sell on the original version of Ecwid Instant Site, WordPress, Wix, or any other custom website, on the opened page, click Add new CSS theme and paste your CSS code to the field. Click Activate link on the right to apply this theme to your storefront.
- Click Save.
- If you already have an existing theme with CSS codes and want to add more codes, go to the Design page in your Ecwid admin.
- This step may vary depending on where you sell.
- If you sell on New-Gen Instant Site, scroll down the page and click Create Theme. You will be redirected to the Instant Site Editor where you can edit current theme or add a new one.
- If you sell on the original version of Ecwid Instant Site, WordPress, Wix, or other custom site, click Edit Theme next to your current theme:
Add new CSS codes to your existing theme. Add new codes below existing codes:
- Save the changes.
The codes added to your active CSS theme will apply to your Ecwid storefront. Refresh your storefront page to see the changes. There can be only one active CSS theme at the same time. Add all the codes that you want to apply to your storefront to your currently active theme.
If you're using New-Gen Instant Site, then the codes applied to your storefront (the actual store where customers browse for products) will not affect the store blocks on the front page of your website. If you need to set up the look of the store blocks, you can do that individually, e.g., using design settings in the Site Editor.
Related articles