Header

The header is a section at the top of your website that appears on every page.

This section includes multiple header styles, allowing you to easily customize the main header's appearance.

The header typically contains your store’s logo, main navigation menu, and other elements like a search icon, cart icon, account icon, country/region selector, and social media links. It plays a key role in branding, helping visitors navigate, and highlighting important pages.

A. Header settings:

  • Click the Header section to open its settings.

  • The Cart icon offers two options: Cart or Bag. You can choose between a cart or bag for the cart icon.

  • Sticky header: controls how the header behaves when users scroll the page.

  1. None: The header is not sticky and scrolls away with the page.

  2. Always: The header remains fixed at the top of the screen at all times, ensuring constant access to navigation and key elements like search, cart, or account icons.

  • Social media icons: Use the "Show social media icons" checkbox to display icons. Add links in Theme settings > Social media, and include the full URL (e.g., https://).

  • Logo settings: Replace the store title with a logo image and change the logo position on desktop & mobile.

1

Logo image

Click Logo image and use the file selector to select or upload your logo file. Use the Logo width slider to make your logo larger or smaller on either desktop or mobile (from 50 to 350px). We recommend a logo image with a transparent background.

Note: The name of your store displays when no logo image is uploaded. The logo height will change to match the width.

2

Desktop logo position

Adjust the logo position to the left or center on the desktop screen:

  • Middle left: Classic layout with the logo on the left.

  • Middle left, menu centered: Logo on the left, navigation in the center for balanced branding.

  • Top left: Logo at the top left, leaving more vertical space for menus.

  • Top center with menu below/above: Places logo at the top center, ideal for symmetrical or luxury brand aesthetics.

  • Middle center: Logo in the center of the header, perfect for minimal layouts or strong brand focus.

3

Mobile logo position

Choose Left to display the logo on the left (menu shifts right of the cart icon) or Center to position it centrally.

  • Transparent header: Enable a transparent header background when at the top of the page. You can use an alternate logo, a brand message (such as a tagline) and text color.

Ensure the first section on your page is a slideshow, video banner or image banner for best results.

  • Country/region selector: Enable the Country selector to let customers view your products with their preferred currency. The selector displays countries with their currencies supported in your Shopify Market settings.

  • Language selector: Poetic Theme supports selling in multiple languages. After you have added and published languages to your store, enable the Language selector to let customers select their preferred language.

Note: For screen widths between 1024px and 1300px, the country/region and language selectors will display in compact format.

  • The header section has a group of settings called "Highlight": You can highlight specific menu items in the header. Enter the exact name of the menu item you’d like to highlight. Use the color picker to adjust the highlight color.

B. Header blocks

1. Main menu block:

  • Menu: Select a menu to display in the header from the available navigation menus.

  • Open menu on hover: If enabled, submenu items will open automatically when a user hovers over the parent menu item (instead of requiring a click).

  • Mega menu: Advanced navigation settings for creating a wide-format menu.

2. Menu promotion card block

Display featured images with promo text, and call-to-action button within the mega menu.

3. Menu full width banner block

Unlike adding multiple promotion card images in the mega menu, you can add a full-width banner under the menu items with this block.

C. Sub-articles

Menu promotion card blockMenu full width bannerTransparent headerMega menuCustomer accountSearch

Last updated

Was this helpful?