DocumentationCommerceGetting Started

Storefront branding

Last update: Mon Jul 10 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • Leader
  • User

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.

w-600 modal-image
Storefront branding elements

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.

w-600
Logo in Header

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.

NOTE
In addition to the logo in the header, your logo also appears on email templates and on PDF invoices and other sales documents. The logos used for email templates and invoices have different size requirements, and must be uploaded separately.

Supported logo file formats:

File format
Description
PNG
(Portable Network Graphics) This newer alternative to the GIF format supports up to 16 million colors (24 bit). The lossless compression format produces a high-quality bitmap image with crisp text, but a larger file size than some formats. The PNG format supports transparent layers, and is designed for online viewing and streaming.
GIF
(Graphics Interchange Format) A widely supported, and older bitmap format that is limited to 256 colors (8 bit). The GIF format supports simple animation and transparent layers.
JPG (JPEG)
(Joint Photographic Expert Group) A compressed bitmap format that is used by most digital cameras. The lossy compression causes some data loss, which is sometimes noticeable as blurry spots in text.

  1. On the Admin sidebar, go to Content > Design > Configuration.

    img-md
    w-700
    Design Configuration page

  2. Find the store view that you want to configure and click Edit in the Action column.

  3. Expand Expansion selector the Header section.

    img-md
    w-600
    Header settings

  4. To upload a new logo, click Upload and choose the file from your system.

  5. Enter the Logo Image Width and Logo Image Height in pixels.

  6. For Logo Image Alt, enter the text that you want to appear when someone hovers over the image.

  7. 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.

w-600
Favicon in the browser tab

Commerce supports the following file formats as the favicon:

File format
Description
ICO
This image file format is designed for small-size computer icon images. Mostly used in Microsoft® Windows OS, the ICO format can contain images of up to 256 x 256 pixels and 16 million colors (24 bit) with 8 bits of transparency.
PNG
(Portable Network Graphics) This newer alternative to the GIF format supports up to 16 million colors (24 bit). The lossless compression format produces a high-quality bitmap image with crisp text, but a larger file size than some formats. The PNG format supports transparent layers, and is designed for online viewing and streaming.
APNG
(Animated Portable Network Graphics) A file format similar to PNG that supports simple animation.
GIF
(Graphics Interchange Format) A widely supported, and older bitmap format that is limited to 256 colors (8 bit). The GIF format supports simple animation and transparent layers.
JPG (JPEG)
(Joint Photographic Expert Group) A compressed bitmap format that is used by most digital cameras. The lossy compression causes some data loss, which is sometimes noticeable as blurry spots in text.

Step 1: Create a favicon

  1. Using the image editor of your choice, create a 16 x 16 or 32 x 32 graphic image of your logo.

  2. (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

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. In the grid, find the store view that you want to configure and click Edit in the Action column.

  3. Under Other Settings, expand Expansion selector the HTML Head section.

    img-md
    w-600
    HTML Head settings

  4. If you want to remove the current favicon, click the Delete ( Trash can icon ) icon in the lower-left corner of the image.

  5. Click Upload and open the favicon file that you prepared.

    img-md
    w-400
    Uploaded favicon

  6. When complete, click Save Configuration.

Step 3: Refresh the cache

  1. When prompted to refresh the cache, click the Cache Management link in the message at the top of the workspace.

  2. In the list, select the Page Cache checkbox that is marked Invalidated.

  3. Set Actions to Refresh and click Submit.

  4. 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.

w-600
Welcome message

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. In the grid, find the store view that you want to configure and click Edit in the Action column.

  3. Under Other Settings, expand Expansion selector the Header section.

  4. For Welcome Text, enter the welcome message text that you want to appear in the header of your store.

    img-md
    w-600
    Header settings

  5. When complete, click Save Configuration.

  6. 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.

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.

w-600
Copyright notice example

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:

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. In the grid, find the store view that you want to configure and click Edit in the Action column.

  3. Under Other Settings, expand Expansion selector the Footer section.

    img-md
    w-600
    Footer design settings

  4. 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.

  5. 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.

w-600
Storefront demo notice

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. In the grid, find the store view that you want to configure and click Edit in the Action column.

  3. Under Other Settings, expand Expansion selector the HTML Head section.

    img-md
    w-600
    HTML Head

  4. Scroll down to the bottom and set the Display Demo Store Notice to your preference.

  5. When complete, click Save Configuration.

  6. If you are prompted to update the cache, click Cache Management in the system message and follow the instructions to refresh the cache.

recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66