Branding your Ecwid store

You can use colors, fonts, and images 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 12 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:

  1. From your Ecwid admin, go to WebsiteEdit Site (or Overview → Manage Instant SiteEdit Site).
  2. Click on the block.
  3. Switch to the Design tab.
  4. Click on the element.
  5. 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.
  6. 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 old version of Instant Site, you can change colors in the Typography section →

More reads:

Configuring design and content for New-gen Instant Site →
Configuring Instant Site design (old 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:

  1. From your Ecwid admin, go to WebsiteEdit Site (or Overview → Manage Instant SiteEdit Site).
  2. Click on the block.
  3. Switch to the Design tab.
  4. Click on the element.
  5. Choose the font and font settings (e.g., size and style).
  6. 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 old version of Instant Site, you can change fonts in the Typography section →

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:

  1. From your Ecwid admin, go to WebsiteEdit Site (or Overview → Manage Instant SiteEdit Site).
  2. Сlick on the Header block.
  3. Click Change next to Site logo:

    Branding___2_.png

  4. In the Logo type dropdown, choose Image.
  5. Click Change Image.
  6. Choose an image from your computer.
  7. 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 old version of Instant Site, you can upload a logo in the Store logo section →

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

  1. From your Ecwid admin, go to WebsiteEdit Site (or Overview → Manage Instant SiteEdit Site).
  2. Сlick on the block that has an image in its template.
  3. Click Change Image next to the image:

    Branding___1_.png

  4. Choose an image from your computer.
  5. 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 old version of Instant Site, can upload a cover image in the Background options section →

More reads:

Configuring design and content for New-gen Instant Site →
Configuring Instant Site design (old version) →
Product images →

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
26 out of 56 found this helpful
10
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