Appearance
Header, Footer and Site-wide Components
These components usually live in the Header, Footer or Backstage zone, which every page of a design shares. Change them once and the whole store follows.
Header
The main bar with your logo, the category menu and, at its end, the search, account and cart icons. On phones the logo sits in the middle with search and cart beside it, and the menu opens from a button that also holds the account links and the wish list.
| Setting | What it does |
|---|---|
| Menu Rendering | Full puts every menu link in the page, which is best for search engines. Lazy loads submenus only when a shopper opens them, which is lighter for very large catalogs. |
| Menu Style | How a top category opens on desktop: Mega menu (default) as a wide panel with a column for each subcategory and its subcategories listed below, or Dropdown as a list, its own subcategories opening beside it |
| Sticky Header | Keeps the header at the top of the screen while scrolling |
The logo is the one set in Content › Design › Configuration › Header, and the menu shows the categories marked Include in Menu.
The icons at the end of the bar are components of their own in the header's Actions slot: Header Search, Header Account and Mini Cart. Reorder them, or remove one the store does not need, as with any other component.
Header Search
The search icon and the box it opens, with product and category suggestions as the shopper types.
| Setting | What it does |
|---|---|
| Search Display | How search opens from the icon: Over the Header as a bar across the top, or Below the Header (default) as a panel |
Header Account
The account icon with its sign-in or account panel, and on desktop the wish list and compare links.
| Setting | What it does |
|---|---|
| Show Compare | A Compare Products icon with the number of products on the shopper's comparison list. It shows only while the list has products. On phones it is a Compare Products (n) link in the menu, under the account links. On by default. |
Mini Cart
The cart icon with the number of items, and the drawer that lists the cart. It has no settings.
Announcement Bar
A thin bar above the header with rotating messages, such as free shipping offers. It can only be placed in the Header zone.
| Setting | What it does |
|---|---|
| Messages | The messages, each with optional link |
| Slide Interval (seconds) | How long each message shows before the next |
| Background | Color of the bar, from the design's palette or any color. Empty uses the design's neutral color. |
| Text Color | Color of the messages, the arrows and the close button. Empty uses the text color that goes with the neutral background. |
| Dismissible | Lets shoppers close the bar. It stays closed while they browse, until they reload the page. |
Newsletter Form
An email signup that subscribes the shopper to your Magento newsletter.
| Setting | What it does |
|---|---|
| Title | Heading above the form |
| Note | One line saying what subscribers get |
| Placeholder | The hint text inside the email field |
| Size | Text size of the title and the note: Small, Normal or Large |
Store Switcher and Currency Switcher
Dropdowns to change the store view or the display currency. Each one hides itself when there is only one option.
| Setting | What it does |
|---|---|
| Title and Show Title | The heading above the control. Empty uses Magento's own label. |
| Style | Dropdown, or Links in a row with the current one in bold |
| Format | Currency Switcher only: how currencies are written, such as "USD - US Dollar", "USD", "US Dollar" or "$ USD" |
| Size | Text size of the title and the options: Small, Normal or Large; the title stays a step above them |
Cookie Consent
A cookie notice with accept and decline buttons. It can only be placed in the Footer zone.
| Setting | What it does |
|---|---|
| Message | The notice text |
| Cookie Policy URL and Label | The link to your cookie or privacy policy |
| Accept Button Label and Decline Button Label | The text on the two buttons |
| Style | Bar across the screen, or a compact floating Card |
| Position | Bottom or Top of the screen |
| Card Alignment | Left, Center or Right. Shown only for the Card style |
| Remember Choice (days) | How long an accepted choice is kept before the notice shows again, up to 365 days. 0 keeps it until the browser is closed |
Accepting stores a cookie_consent cookie in the shopper's browser, and declining stores nothing. Google Analytics 4 can be set to load only after a shopper accepts, see below.
Back To Top
A floating button that appears after scrolling down and takes the shopper back to the top. It can only be placed in the Footer zone.
| Setting | What it does |
|---|---|
| Position | Right or Left |
| Color | Dark or Light |
| Size | Small, Medium or Large |
Custom Script
Adds a snippet from another service, such as a chat widget or a tracking pixel, to every page. It can be placed in the Footer or Backstage zone, and it shows nothing in the editor's preview apart from a placeholder.
| Setting | What it does |
|---|---|
| Code | The snippet as the service gives it: script tags with an address, script tags with code, or both. They run in order. |
| Load | When the snippet runs: After first interaction (default) keeps it out of the page load, After a delay, After page load, or Immediately |
| Delay (seconds) | For After a delay, how long to wait. For After first interaction, when to run anyway for a visitor who never interacts. 0 means never. |
| Consent Cookies | Cookie names, one per line. The snippet runs only once all of them are set. Enter cookie_consent to wait for the Cookie Consent component. Empty runs it without checking. |
Each snippet runs once when the store is opened, not again on every page the shopper moves to.
Google Analytics 4
Sends page views and ecommerce events to Google Analytics 4: product lists, product views, add to cart, cart views, checkout steps and purchases. It shows nothing on the page. Place it once in the Backstage zone, and it covers every page including the checkout.
The measurement ID is the one set in Stores › Configuration › Sales › Google API.
| Setting | What it does |
|---|---|
| Load gtag.js | When Google's script loads: After first interaction keeps page speed scores high, After a delay, or Immediately. Events that happen before it loads are sent once it does. |
| Require cookies | Cookie names, one per line. Analytics only loads once all of them are set. Enter cookie_consent to wait for the Cookie Consent component. |
| Delay (seconds) | For After a delay, how long to wait. For After first interaction, the fallback for visitors who never interact. Hidden for Immediately. |
| Send page_view … Send add_payment_info | One switch per event, all on by default: page_view, purchase, view_item_list, view_item, add_to_cart, view_cart, begin_checkout, add_shipping_info, add_payment_info. Turn one off to stop sending it to Google Analytics. |