Skip to main content

How to configuring your Storefront Header, Footer and copyright site sections?

Updated

This article provides a complete guide to configuring your storefront’s header, logo, footer, copyright notice, and cart display behavior in Pulse Commerce. It consolidates all header- and footer-related configuration options into a single authoritative reference, including visual editors, HTML source editing, spacing adjustments, and global display settings.

Scope: This guide covers storefront branding and layout elements that appear site-wide, including the Logo and Custom Header Editor, header spacing, footer copyright content, and Display Settings that control header and cart behavior.

Storefront header and footer behavior in Pulse Commerce is controlled through two primary areas:

  • Content Management – Used for visual and HTML-based editing of the header (logo, banners, button bars) and footer copyright content.
  • Settings > Display Settings – Used to control global behaviors such as top menu visibility, cart display style, and floating cart behavior.

Understanding which area controls which part of the storefront is critical to avoiding unintended overrides.

The Logo and Custom Header Editor is designed to allow merchants to customize the top section of every storefront page without requiring direct theme development.

Common use cases include:

  • Adding banner advertisements or announcements
  • Displaying or replacing the storefront logo
  • Adding custom button bars or navigation links
  • Including dynamic cart or login-related elements

How to access the editor:

  1. Navigate to Admin Panel > Content Management.
  2. Click Logo and Custom Header Editor.
  3. Use the Top of Page Editor to add or modify content.
  4. Click Update to save changes.

Display Options:

  • Use Only Default – Displays content only from the default logo section.
  • Use Only Custom – Displays only custom content from the editor.
  • Use Both Default and Custom – Displays both sections together.
Tip: Use the “Use Only Custom” option when replacing the default logo or header layout entirely.

For advanced customization, Pulse Commerce allows direct HTML editing of the header content through the built-in source editor.

To edit header HTML:

  1. Go to Content Management > Logo and Custom Header Editor.
  2. Click the View/Edit Source (<>) tab.
  3. Edit the HTML directly or paste HTML from a third-party editor.
  4. Click Apply, then OK.
  5. Click Update to save changes.
Important: Always save a copy of the original HTML before making changes. This allows you to revert if layout or rendering issues occur.

Supported dynamic variables:

  • {{ShoppingCartQuantity}}
  • {{LoginLink}}
  • {{GreetingName}}
  • {{FloatingShopCart}}

These variables automatically render real-time values on the storefront, such as the number of items in a customer’s cart or login status.

You can insert visual spacing between the storefront header and the rest of the page content using the Logo and Custom Header Editor.

Steps:

  1. Navigate to Admin Panel > Content Management.
  2. Open the Logo and Custom Header Editor.
  3. Click inside the Top of Page Editor at the desired location.
  4. Press SHIFT + ENTER to insert a single blank line.
  5. Click Update to save.
Color Consideration: The background color of this spacing area is controlled by Site Settings > Colors and Fonts > Site-wide colors. Adjust the Top Link Back Color to match your design.

Footer content such as company information, legal text, and copyright notices is managed separately from the header.

To update footer copyright information:

  1. Navigate to Admin Panel > Content Management.
  2. Open the Footer – Copyright Info editor.
  3. Make the desired updates to company or legal text.
  4. Click Update to save.
Best Practice: Keep footer content concise and ensure legal text (company name, year, trademarks) is accurate and up to date.

Global header and cart behavior is controlled through Settings > Display Settings. These settings affect usability and conversion across the storefront.

Top Menu Bar Settings

  • Show the top menu bar
  • Hide the top menu bar entirely
  • Show the bar without navigation links (cart-only)

The top bar can display cart access, customer greetings, and login/logout options. It may be redundant if a fully custom header is already in use.

Shopping Cart Display Options

  • Redirect customers to the cart after adding an item
  • Enable a floating shopping cart
  • Show floating cart with or without pricing
UX Consideration: Floating carts can improve visibility but may conflict with heavily customized headers. Always test on desktop and mobile.
  1. Define branding and layout requirements.
  2. Configure logo, banners, and messaging using the Logo and Custom Header Editor.
  3. Apply spacing or layout refinements.
  4. Adjust cart and header behavior in Display Settings.
  5. Finalize footer copyright and company information.
  6. Test changes across multiple pages and devices.
Tip: Avoid switching display options or header modes after making HTML edits, as this may hide or override custom content.

This video demonstrates how Display Settings affect global header elements, top menu visibility, and shopping cart behavior: 

Related articles