DocumentationCommerceContent and Design

Page setup

Last update: Thu Aug 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • User

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 page sections {width="700" modal="regular"}

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

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

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

    HTML Head configuration settings {width="500" modal="regular"}

  4. Update the favicon if needed.

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

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

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

  8. Enable or disable the demo store notice if needed.

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

The Header configuration identifies the path to your store logo and specifies the logo alt text and welcome message.

Header configuration settings {width="400" modal="regular"}

Configure the header

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

  2. 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. Make any changes that are needed for the store view:

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

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.

Footer configuration settings {width="400" modal="regular"}

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

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

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

  5. When complete, click Save Configuration.

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 \&copy; as in the following: \&copy; 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.
recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de