Branding your Sauecommerce 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 Sauecommerce admin. Design changes to the storefront (the actual store where customers browse for products) may require using CSS codes.
Table of contents
Updating colors
You can change the color of any element in your Sauecommerce 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 Sauecommerce 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.
- 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 Sauecommerce 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 Sauecommerce 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 fonts
- From your Sauecommerce 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 →
- 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 Sauecommerce 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 Sauecommerce 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 Sauecommerce 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.
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 Sauecommerce 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.
- From your Sauecommerce 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 Sauecommerce 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 →
Updating images
You can change the images used in your Sauecommerce 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.
You can upload images in high quality up to 20 MB. Sauecommerce will automatically compress images so they look nice, and your store and website load quickly.
To update images:
- From your Sauecommerce 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.
- From your Sauecommerce 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.