Page setup
The main sections of the page are controlled, in part, by a set of standard HTML tags. Some of these tags can be used to determine the selection of fonts, color, size, background colors, and images that are used in each section of the page. Other settings control page elements such as the logo in the header, and the copyright notice in the footer. These sections correspond to the underlying structure of the HTML page, and many of the basic properties can be set from the Admin.
HTML Head
The settings in the HTML Head section correspond to the <head> tag of an HTML page, and can be configured for each store view. In addition to meta data for the page title, description, and keywords, the section includes a link to the favicon, and miscellaneous scripts. Instructions for search engine robots and the display of the store demo notice are also configured in this section.
Configure the HTML Head
-
On the Admin sidebar, go to Content > Design > Configuration.
-
Find the store view that you want to configure and click Edit in the Action column.
-
Under Other Settings, expand
-
Update the favicon if needed.
-
Update the page title settings according to your needs:
- Default Page Title
- Page Title Prefix
- Page Title Suffix
You can use a suffix and/or prefix with the default title to create a two-or three-part title. You can add a vertical bar or colon as a separator between the prefix or suffix and the default title.
-
Add or modify meta data that supports Search Engine Optimization (SEO) and helps steer customers to your store from search results:
- Default Meta Description
- Default Meta Keywords
-
Enter any Scripts and Style Sheets as needed.
NOTEAll JavaScript entered in the Scripts and Style Sheets field must be whitelisted in the Content Security Policy (CSP) settings, otherwise it will not be executed on the Checkout pages. For more information, see Content Security Policy. -
Enable or disable the demo store notice if needed.
-
When complete, click Save Configuration.
HTML Head field descriptions
| Field | Scope | Description |
|---|---|---|
| Favicon Icon | Store View | Uploads the small graphic image that appears in the address bar and tab of the browser. Allowed file types: ICO, PNG, APNG, GIF, and JPG (JPEG). Not all browsers support these formats. |
| Default Page Title | Store View | The title that appears at the title bar of each page when viewed in a browser. The default title is used for all pages, unless another title is specified for individual pages. |
| Page Title Prefix | Store View | A prefix can be added before the title to create a two- or three-part title. A vertical bar or colon can be used as a separator at the end of the prefix to differentiate it from the text of the main title. |
| Page Title Suffix | Store View | A suffix can be added after the title to create a two-or three-part title. A vertical bar or colon can be used as a separator at the end of the prefix to differentiate it from the text of the main title. |
| Default Meta Description | Store View | The description provides a summary of your site for search engine listings and should not be more than 160 characters in length. |
| Default Meta Keywords | Store View | A series of keywords that describe your store, each separated by a comma. |
| Scripts and Style Sheets | Store View | Contains scripts that must be included in the HTML before the closing <head> tag. For example, any third-party JavaScript that must be placed before the <body> tag can be entered here. |
| Display Demo Store Notice | Store View | Controls the display of the demo store notice at the top of the page. Options: Yes / No |
Header
The Header configuration identifies the path to your store logo and specifies the logo alt text and welcome message.
Configure the header
-
On the Admin sidebar, go to Content > Design > Configuration.
-
Find the store view that you want to configure and click Edit in the Action column.
-
Under Other Settings, expand
-
Make any changes that are needed for the store view:
- Logo settings
- Welcome message settings
-
When complete, click Save Configuration.
Header field descriptions
| Field | Scope | Description |
|---|---|---|
| Logo Image | Store View | Identifies the path to the logo that appears in the header. Supported file types: PNG, GIF, JPG (JPEG) |
| Logo Attribute Width | Store View | The width of your logo image in pixels. |
| Logo Attribute Height | Store View | The height of your logo image in pixels. |
| Welcome Text | Store View | The welcome message appears in the header of the page and includes the name of customers who are logged in. |
| Logo Image Alt | Store View | The Alt text that is associated with the logo. |
| Translate Title | Store View | Determines if the Page Title or Meta Title should be translated. |
Footer
The Footer configuration section is where you can update the copyright notice that appears at the bottom of the page, and enter miscellaneous scripts that must be positioned before the closing <body> tag.
Configure the footer
-
On the Admin sidebar, go to Content > Design > Configuration.
-
Find the store view that you want to configure and click Edit in the Action column.
-
Under Other Settings, expand
-
Make any changes necessary to the Copyright and Miscellaneous HTML settings.
NOTEAll JavaScript entered in the Miscellaneous HTML field must be whitelisted in the Content Security Policy (CSP) settings, otherwise it will not be executed on the Checkout pages. For more information, see Content Security Policy. -
When complete, click Save Configuration.
Footer field descriptions
| Field | Scope | Description |
|---|---|---|
| Miscellaneous HTML | Store View | An input box where you can upload miscellaneous scripts to the server that must be placed just before the closing <body> tag. |
| Copyright | Store View | The copyright statement that appears at the bottom of each page. To include the copyright symbol, use the HTML character entity \© as in the following: \© 2021 Commerce Demo Store. All Rights Reserved. Make sure to replace the sample copyright notice with your own. |
| Display Report Bugs Link | Store View | Determines if the bug report link (supported for some themes) is enabled or disabled. |
How AI Is Transforming the Commerce Landscape
Delve into how AI is revolutionizing the commerce landscape by optimizing operations, enhancing customer experiences, and improving...
Tue, Mar 18, 3:30 PM PDT (10:30 PM UTC)
B2B Reimagined: Transforming Go-to-Market Strategies for Profitable Growth
B2B brands are facing a digital revolution. Buyers expect hyper-relevant content and self-service, while internally AI is transforming...
Wed, Mar 19, 1:00 PM PDT (8:00 PM UTC)
Connect with Experience League at Summit!
Get front-row access to top sessions, hands-on activities, and networking—wherever you are!
Learn more