Storefront branding
One of the first things you want to do is to change the logo in the header and upload a favicon for the browser. Next, you should add your welcome message and update the copyright notice in the footer. These tasks are a few simple design elements that you can take care of right away. While your store is in development, you can turn on the store demo notice, and then remove it when you are ready to launch.
Upload your logo
The size and location of the logo in the header is determined by the store theme. Your logo can be saved as either a GIF, PNG, or JPG (JPEG) file type and uploaded from the Admin of your store.
The logo image resides in the following location on the server. Any image file with the name logo.svg
is used as the default theme logo.
Full path - app/design/frontend/[vendor]/[theme]/web/images/logo.svg
Relative path - images/logo.svg
If you do not know the size of the logo or other images used in your theme, open the page in a browser, right-click the image, and inspect the element.
Supported logo file formats:
-
On the Admin sidebar, go to Content > Design > Configuration.
img-md w-700 -
Find the store view that you want to configure and click Edit in the Action column.
-
Expand the Header section.
img-md w-600 -
To upload a new logo, click Upload and choose the file from your system.
-
Enter the Logo Image Width and Logo Image Height in pixels.
-
For Logo Image Alt, enter the text that you want to appear when someone hovers over the image.
-
When complete, click Save Configuration.
Add a favicon
Favicon is short for favorite icon and refers to the little icon on the tab of each browser page. Depending on the browser, the favicon also appears in address bar, just before the URL.
A favicon is generally 16 x 16 pixels or 32 x 32 pixels in size. Commerce accepts ICO, PNG, APNG, GIF, and JPG (JPEG) file types, although not all browsers support these formats. The most widely supported file format to use for a favicon is ICO. You can use other image file types, but the format might not be supported by all browsers. There are many free tools available online that you can use to generate an ICO image or convert an image to that format.
Commerce supports the following file formats as the favicon:
Step 1: Create a favicon
-
Using the image editor of your choice, create a 16 x 16 or 32 x 32 graphic image of your logo.
-
(Optional) Use one of the available online tools to convert the file to the .ico format and save the file to your computer.
Step 2: Upload the favicon to your store
-
On the Admin sidebar, go to Content > Design > Configuration.
-
In the grid, find the store view that you want to configure and click Edit in the Action column.
-
Under Other Settings, expand the HTML Head section.
img-md w-600 -
If you want to remove the current favicon, click the Delete ( ) icon in the lower-left corner of the image.
-
Click Upload and open the favicon file that you prepared.
img-md w-400 -
When complete, click Save Configuration.
Step 3: Refresh the cache
-
When prompted to refresh the cache, click the Cache Management link in the message at the top of the workspace.
-
In the list, select the Page Cache checkbox that is marked
Invalidated
. -
Set Actions to
Refresh
and click Submit. -
To view the new favicon, return to your storefront and refresh the browser.
Change the welcome message
The welcome message in the header expands to include the name of the customer who is logged in. Before you launch your store, be sure to change the default Welcome text for each store view.
-
On the Admin sidebar, go to Content > Design > Configuration.
-
In the grid, find the store view that you want to configure and click Edit in the Action column.
-
Under Other Settings, expand the Header section.
-
For Welcome Text, enter the welcome message text that you want to appear in the header of your store.
img-md w-600 -
When complete, click Save Configuration.
-
When prompted to update the Page Cache, click the Cache Management link at the top of the workspace and follow the instructions to refresh the cache.
Change the copyright notice
Your store displays a copyright notice in the footer of each page. As a best practice, the copyright notice should include the current year, and identify your company as the legal owner of the content on the site.
The ©
character code is used to insert the copyright symbol, as shown in the following examples:
-
Long format example
Copyright © 2013-present Luma, Inc. All rights reserved.
-
Short format example
© 2021 Luma, Inc. All rights reserved.
To update the copyright notice:
-
On the Admin sidebar, go to Content > Design > Configuration.
-
In the grid, find the store view that you want to configure and click Edit in the Action column.
-
Under Other Settings, expand the Footer section.
img-md w-600 -
For Copyright, enter the copyright notice that you want to appear in the footer of each page.
Use the
©
character code to insert a copyright symbol. -
When complete, click Save Configuration.
Set the store demo notice
If your store is online, but still under construction, you can display a store demo notice at the top of the page to let people know that the store is not yet open for business. When you are ready to go live, simply remove the message. It is similar to flipping the sign hanging in the window from Closed to Open. The format of the demo notice is determined by the theme of your store.
-
On the Admin sidebar, go to Content > Design > Configuration.
-
In the grid, find the store view that you want to configure and click Edit in the Action column.
-
Under Other Settings, expand the HTML Head section.
img-md w-600 -
Scroll down to the bottom and set the Display Demo Store Notice to your preference.
-
When complete, click Save Configuration.
-
If you are prompted to update the cache, click Cache Management in the system message and follow the instructions to refresh the cache.