A logo is the face of your e-commerce store. It builds trust, makes your brand memorable, and sets you apart from competitors. A well-designed logo gives your store a professional look, making customers more likely to buy from you.
It also helps create brand recognition, so people instantly associate your products with your business. Without a logo, your store might seem generic or untrustworthy, which can hurt sales.
1. Upload Your Store Logo
Before we can upload a logo, we have to make sure it is in the correct format. It is recommended to have a logo with a white background in JPEG file format.
You can also have a logo that has a transparent background but then it needs to be in PNG format. If your logo has a different background color, then we can change the background of the header to match the background of the logo.
How do you upload your logo?
First, we need to hover our mouse to “Store Appearance” under the left sidebar menu and then click on “Store Styling”.
You will be redirected to a different page where you can edit your appearance settings.
Click on “General” and then go to “Site Identity”.
The next step is going to be to click on “Change Logo” and then on “Upload files”. You will then have to click on “Select Files” and then select the image that you want to use as your logo from your computer.
The image will then be added to your library. Click on the image that you have uploaded and then click on the blue “Select” button.
Next, we need to crop the logo from your image. Make sure to only crop the part where the logo is displayed and avoid cropping unnecessary white space. Once selected, you can then click on “Crop Image”.
Once the image is cropped, it will then be added to the header of your website. You can also adjust the height of the logo by clicking on the back arrow and then on “Site Logo”. You can drag the bar to the left or right to decrease or increase its height.
2. Add Store Name
Next, we should add the name of your store under Site Title. You also have the option to add a tagline to the name as well. Keep in mind that if you do not upload or use an image as a logo, then your site title will be displayed as the logo.
3. Add Site Icon
We have already added a site icon to the store, but you can add your own icon if you want to. For site icons, we recommend using a PNG file with a transparent background and a size of 512 by 512 pixels.
Modify the Store Header and Footer
An e-commerce store header is the top section of a website that typically includes the logo, navigation menu, search bar, contact details, and sometimes a shopping cart or login button.
It helps users easily find what they need. The footer is the bottom section, usually containing links to policies, customer support, social media, payment methods, and company details.
It reinforces trust and provides quick access to important information.
Let’s start by modifying your store’s header.
1. Store Header
Hover your mouse over “store appearance” on the left sidebar menu and then click on “Store Styling”.
Wait for the page to load and then click on “Header and Navigation”.
Let’s modify the top bar by clicking on the “Top Bar” tab.
Top Bar
The top bar is going to be located at the top of the header. Here you can add important information such as contact details or promotions that you might have running.
You have the option to enable or disable the top bar.
As default, we have enabled it for you. You can also choose the hide the top bar on mobile. We have hidden it for you because we do not want to take up too much vertical space when on the mobile screen.
You can also change the top bar padding which will change the vertical space between the text and the top and bottom of the bar.
You can also change the font size of the text located in the top bar.
To edit the top bar, you should click the blue pencil icon located to the left of the text. Once the widget opens, you can then change the information.
You can do this for all 3 text widgets.
Header
Next, we want to change the header by clicking on the header tab. The header is the part where the logo, search bar, and other helpful links are located such as “my account”, “customer help” and “checkout”.
The first setting available for you is to change the header top and bottom padding by moving the bar to either the left or right.
The next option is to change the header layout. There are a total of 5 options available, but we recommend keeping to the Logo / Search / Secondary option because this option is the easiest to modify and has most of the important information on it.
You also have the option to disable the product search bar. We recommend you keep this feature on because it will help your customers find the products they need.
You can also change the design of the search to either “filled” or “outline” which will change its appearance.
You also have the option to enable or disable the sticky navigation when scrolling. We recommend keeping it enabled.
Mobile Header
You can also change the way your header will look like on mobile devices by clicking on the “Mobile Header” tab.
We also recommend that you select the mobile view by clicking on the mobile icon located at the bottom left. Your screen will automatically change to mobile view.
You can change the height of the mobile header by dragging the bar to the left or right. Make sure you have some white space between the logo and the header but not too much.
The height of the logo can also be changed by dragging the bar to the left or right.
You can also choose to enable or disable search on the mobile header. We recommend that you enable it.
You can also change the location of the product search bar. You can either put it within the navigation, add it below the header, or add it as an icon between the logo and the cart.
The my account link can also enabled on the mobile menu. We recommend leaving it disabled because we do not want to clutter your mobile header with too many options.
We are going to enable the menu label next to the hamburger icon representing three horizontal stripes. The text is also going to be labeled as “MENU”.
You can also enable the mobile sticky menu. The menu will stay on the screen once you scroll down. This is a personal choice but it will be enabled as default.
Navigation
The next step is to change the navigation settings by clicking on the “Navigation” tab. The navigation is going to contain your primary menu and the cart icon. We are going to edit the primary menu at a later stage.
The first setting available will allow you to edit the height of the navigation by moving the bar horizontally.
The “Enable hover intent” and “Display menu descriptions” we will leave disabled.
Cart
You can change the cart icon and also how it is displayed by clicking on the “cart” tab.
You can enable or disable the icon. We recommend keeping it enabled so that customers can use the mini cart.
You can also choose the icon. In this case, we are using the Basket icon as a default. Please keep in mind to view the website on a different browser or incognito when trying to view the changes made to the cart icon.
You can change the Cart Sidebar Title. We have added the text “Your Cart” as default.
You can enable or disable the quantity arrows on the cart sidebar and also the button labeled “View Cart” to visit the cart page.
You can also add text to the bottom of the cart sidebar.
2. Store Footer
To customize the store footer, you need to scroll down to the bottom of the website where the footer is located. The store footer has 3 sections that consist of the “Below Content” section, the “Footer” and the “Copyright” section.
Click on the blue circle with a pencil icon to edit each section.
You can remove or Add an additional text widget that will result in an additional column to add more information.
To add a widget click on “Add a Widget”, scroll down, and select the text widget. Edit the title of the widget and the text.
You can open any of the widgets to edit the information.
The same can be done for the footer and copyright section. Add or edit any of the widgets with your information.
For the footer, we have already created the following widgets.
- We added a shop categories widget where you can add some of your categories.
- We added a help widget where all your helpful pages will be displayed.
- We added a follow widget for social media profiles and
- an about us widget.
Apply Branding Colors to Store Theme
Branding colors create a strong visual identity, making your online store instantly recognizable and memorable to customers. They also influence emotions and buying decisions, helping to build trust and guide shoppers toward making a purchase.
The theme branding color will include the header, footer, the store page, single product page, cart and the checkout page. Any element that is connected to a product will be affected by the theme.
The colors on the homepage, about page, and contact page might not be affected because they are controlled by the page builder settings.
To set it up, you need to go to “Store Appearance” on the left sidebar and then click on “Store Styling”.
Wait for the page to load and then click on the tab labeled “Colors”. We are going to start with the “Top Bar” by clicking on it.
1. Top Bar
You can change the top bar background which in this case is white. Let’s change the color to red and see what it is going to look like.
The top bar text color is black and let’s change it to yellow.
The border color can also be changed.
Click on any of the colors and a color panel will open. You can select any of the colors located on the top or change the shades of the color.
If you have your custom branding color you can paste its hex code within the input bar below.
2. Header
Next, we are going to select the header tab and see which options are available.
You will notice that you can change the background of the header. Make sure it is the same color as the background of your logo. If your logo has a transparent background, then you can keep it white.
You can also change the border color. In this case, the border is not visible and not needed.
For mobile, you first need to change to the mobile screen.
Let’s change the navigation icon to green and let’s make the cart icon a yellow color.
Click on the menu hamburger icon to open the navigation.
Let’s change the background and make it orange and let’s make the text color blue. You can also change the color of the divider which is not visible in this case.
Go back to the desktop screen size, click on the back arrow button, and then select the navigation.
3. Navigation
The navigation is going to be the part where the menu and cart icon are located.
You can choose to fade out other links on hover. Whenever you hover your mouse over a link, the other links will fade out. This feature makes your store more interactive.
Next, we can change the background of the navigation. Let’s make it purple.
You can change the color of the navigation border. Let’s make it yellow.
The color of the links can also be changed. Let’s make it green. You can also change the color of the underline of the link whenever you over over it. Let’s make it white.
You can change the color of the dropdown as well. Let’s change the dropdown background to blue and the dropdown text to yellow.
You can also change the color of the links when you hover over them. Let’s change the color to white.
The secondary navigation colors can also be changed. Let’s make it green.
Let’s make the chart icon color red, the text orange, and the text hover color blue.
4. General
Let’s go to the general color settings by clicking on the “General” tab.
Here we can change the primary swatch color. We recommend that you choose your primary brand color. This color will be displayed on each store-related page throughout the theme.
You can change the color and hover color of the links that will be displayed in the content of each store-related page.
The body background color can also be changed. Let’s keep it to white.
Next, we are going to go to the Woocommerce section.
5. Woocommerce
Primary Button
Under the “Primary button” section, you can change the background color of the button and also the background color on hover. You can also change the color of the text of the button.
This button will be displayed on the store page, category page, single product page, sticky scroll bar, cart page, and checkout page.
Sale Flash
The sale flash is going to be the icon displaying the discount on the image of each product that is on sale.
You can change its text and background color.
Ratings
The star rating color can also be changed. Currently, we do not have any ratings on the store. You can change the color to orange or your primary brand color.
Product Archives
The product archives will be the category pages. Click on any of the categories to display the template.
You can change the description background and text. Let’s make the background color green and the text white.
Single Product
For the single product, you can click on any product to view the template. You can change the background color of the container. Let’s make it blue.
You can also change the floating button background and text color. This is the button at the bottom left of the screen. Let’s make the background yellow and the text black.
Cart and Checkout
Let’s go to the cart page and change the color of the progress bar to purple.
6. Footer
We can also change the colors of the footer as well which is located at the bottom of the store. Scroll down to see it.
You can change the color of the icons in the below content section. In this case, we do not have icons.
You can change the footer background. Let’s make the color red.
The heading’s color can also be changed. Let’s make the green. We can also change the footer text color. Let’s make it purple.
The footer link color can be changed. Let’s make them white. You can also change the hover color of the links. Let’s make it purple.