Branding your Ecwid store

You can use colors, fonts, and images (e.g., a logo) to make your storefront and Instant Site fit your company's brand. Consistent branding improves your website design and builds trust with your customers, which makes them more likely to buy.

Changes to the Instant Site content and design are made in the Site Editor that is accessible from the Website page in your Ecwid admin. Design changes to the storefront (the actual store where customers browse for products) may require using CSS codes.

You can always outsource to an expert to help you out with small tasks like storefront customization with CSS codes. Also, if you’re on Ecwid’s annual Business or annual Unlimited plan, you have up to 6 hours of customization from our team included.

Updating colors

You can change the color of any element in your Ecwid store and on your Instant Site: Buy buttons and button texts, product descriptions and website blocks, etc. If you are using a specific design on your website, you can look back at the colors that you have already selected and make sure that they are consistently being used on your storefront as well.

To change the colors:

From your Ecwid admin, go to Website → Edit Site (or Overview → Manage Instant Site → Edit Site).
Click on the block.
Switch to the Design tab.
Click on the element.
Click on the Color field and pick the color you need using the color chooser tool. You can also enter an existing color code into the Color field, if you already know it.
Click the Save & Publish button once you are done editing your website.

This instruction works for the New-Gen Instant site. If you're using the original version of Instant Site, you can change colors in the Typography section →

From the CSS Cookbook article, copy the code that fits your goal and modify the color number to any color you like, or configure the code yourself.
From your Ecwid admin, go to Design.
Scroll down to the Themes and in-depth customization section.
Click Create Theme.
This step varies depending on where you sell:
- If you sell on New-Gen Instant Site, you will be redirected to the 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 the Activate link on the right to apply this theme to your storefront.
Save the changes.

More reads:

Configuring design and content for New-Gen Instant Site →
Configuring Instant Site design (original version) →
Adding CSS codes to your store →
Ecwid CSS Cookbook →

Updating fonts

You can change the fonts used for any element of your Ecwid store and your Instant Site: button texts, product descriptions, breadcrumbs, etc. If you want to use a specific font, you can apply it to certain elements or to all texts in your Ecwid store or on your Instant Site.

In case you want to use different texts for buttons, links, forms, etc., in your store, you can easily change the standard text with the help of the Store Label Editor.

To change the fonts:

From your Ecwid admin, go to Website → Edit Site (or Overview → Manage Instant Site → Edit Site).
Click on the block.
Switch to the Design tab.
Click on the element.
Choose the font and font settings (e.g., size and style).
Click the Save & Publish button once you are done editing your website.

You can also set the default font for all the blocks of your site using global font settings →

This instruction works for the New-Gen Instant site. If you're using the original version of Instant Site, you can change fonts in the Typography section →

From the CSS Cookbook article, copy the “Change all fonts” code and replace the NAME_OF_FONT with an actual font name, or configure the code yourself.
From your Ecwid admin, go to Design.
Scroll down to the Themes and in-depth customization section.
Click Create Theme.
This step varies depending on where you sell:
- If you sell on New-Gen Instant Site, you will be redirected to the 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 the Activate link on the right to apply this theme to your storefront.
Save the changes.

Updating logo and favicon

You can change the logo used for your Ecwid store and Instant Site. The logo may appear in the header of your site, as well as in customer notifications, so every email that comes out from your store is branded.

You can also add a separate logo for your invoices and tax invoices (if you’re using them).

For the best results, make sure the logo image is scaled to fit properly and looks good both in the header and email.

To upload a logo:

From your Ecwid admin, go to Website → Edit Site (or Overview → Manage Instant Site → Edit Site).
Сlick on the Header block.
Click Change next to Site logo:
In the Logo type dropdown, choose Image.
Click Change Image.
Choose an image from your computer.
Click the Save & Publish button once you are done editing your website.

This instruction works for the New-Gen Instant site. If you're using the original version of Instant Site, you can upload a logo in the Store logo section →

From your Ecwid admin, go to Settings → Notifications.
Scroll down to the Logo section.
Click Upload Logo.
Choose an image from your computer.

The changes will be autosaved. The logo is set for all customer email notifications at once. It will also be used for your invoices and tax invoices if they don’t have a logo yet.

You can also add a favicon for your website. The favicon is the small image displayed in the browser tab and next to the URL in the browser's address bar. If you’re using the original version of Ecwid Instant Site, then when you upload a logo for your Instant Site, it’s automatically used as a favicon. If you are a New-Gen Instant site user, learn how to upload a favicon for your New-Gen Instant Site →

More reads:

Instant Site favicon →
Editing mail notifications →

Updating images

You can change the images used in your Ecwid store and on your Instant Site. These images include everything from your cover images to your product images and are an important part of your brand.

When you’re choosing images, try to pick a consistent image type so they all look cohesive.

You can upload images in high quality up to 20 MB. Ecwid will automatically compress images so they look nice, and your store and website load quickly.

To update images:

From your Ecwid admin, go to Website → Edit Site (or Overview → Manage Instant Site → Edit Site).
Сlick on the block that has an image in its template.
Click Change Image next to the image:
Choose an image from your computer.
Click the Save & Publish button once you are done editing your website.

You can upload images in JPG, PNG, JPEG2000, GIF, WEBP, and TIFF format.

This instruction works for the New-Gen Instant site. If you're using the original version of Instant Site, can upload a cover image in the Background options section →

From your Ecwid admin, go to Catalog → Products.
Create a new product or choose an existing product.
In the images section on the products page, either drag and drop images from your computer or click +Upload Images.
Save the changes.

You can upload images in JPG, BMP, PNG, and GIF format.

More reads:

Configuring design and content for New-Gen Instant Site →
Configuring Instant Site design (regular version) →
Product images →

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?

These instructions didn’t work
I found this article confusing or unclear
I didn’t find the answer to my question
I don’t like how the feature works
Other

2 out of 12 found this helpful