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.
note note NOTE All 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
<head> tag. For example, any third-party JavaScript that must be placed before the <body> tag can be entered here.Yes / NoHeader
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
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.
note note NOTE All 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
<body> tag.\© as in the following: \© 2021 Commerce Demo Store. All Rights Reserved. Make sure to replace the sample copyright notice with your own.