Spark 1.0

Header

Spark's header appears at the top of each page. You can customize it to fit with your brand and product offerings.

On mobile devices, the header shrinks down into a floating menu bar::

Set up the header

To set up the header:

STEPS

  1. From your Customize theme editor, select the Header section.

  2. (Optional.) Use the Logo image file selector to select or upload your logo file.

    We recommend using a logo with a transparent background (PNG format).

  3. (Optional.) If you added a logo, use the Logo max width slider to change size of the logo in the header.

  4. Choose a Main menu to be displayed in the header.

    For more information about menus on Shopify, see their Menus and links article. You can use the Edit menu link to go edit the menu if it's not quite right.

  5. Choose a Secondary menu to be displayed in the drawer menu.

    The main menu works best to display links to your catalog and products.

  6. Set the menu Style for the Main menu as either Links or Menu icon.

    The Links option displays the menu at all times except on mobile. The Menu icon option keeps the menu in the drawer menu.

    Learn more in the menu styles section.

  7. Set the Links position for the Main menu as either Below or Inline.

    For menus with many links or long titles, we recommend placing the links Below the header title.

  8. (Optional.) If you have a Slideshow or Video Hero at the top of your homepage, you can enable a Transparent header.

    For more information, see the Transparent header section.

    The Color options will need to be adjusted to ensure all elements are visible when the header is transparent.

  9. Click Save.

Settings reference

Spark's header has the following settings:

Logo image

Select or upload an image to be used as the logo in the heading.

If you don't upload a logo, the name of your store appears instead.

We recommend using a logo with a transparent background (PNG format).

Logo max width

Select the display width, in pixels, of your logo image.

Your logo height is scaled to match the width, which will result in a taller or shorter header.

Main menu

Select a menu to be displayed in the header.

Menus are a Shopify feature. See Shopify's Menus and links to learn more about them.

Secondary menu

Select a menu to be displayed in drawer menu.

Style

Choose a menu style: either Menu icon (☰) or Links. Learn more here.

On mobile devices, the style is always set to Menu icon.

Link position

Choose to display the main menu links to the side header title or directly below.

The links will appear either to the left or the right depending on the Logo position.

Logo position

Choose the position of your logo in the header: either Left or Center.

The Menu link and Links will change position depending on the Logo position.

Set up a Transparent header

You can make your store's header transparent. This is great for stores that want to push big, bright product photography or videos.

In this image, you can see the transparent header enabled, letting the Slideshow section section below pop out.

The transparent header is only used on the home page or collection pages, and with a Full width slideshow or video as the first section.

Set up the transparent header

STEPS

  1. From your Customize theme editor, select the Header section.

  2. Scroll down to the Transparent header section of the header settings.

  3. Check the Enable on home page checkbox to turn on the transparent header feature.

  4. Choose the colors (Text color, Icon color, Cart count color, and Border color) that should be used for the header content.

    These colors will need to contrast with your slides or video to ensure visibility.

  5. Choose the Border opacity for the borders, where 0% is invisible and 100% is completely opaque.

  6. Choose a transparent Logo image.

    This image only displays when the header is transparent. Your main logo image will automatically display when the header is no longer transparent.

    For example, you may need a dark-colored version of your logo to look good on light-colored backgrounds.

  7. Click Save.

Settings reference

The transparent header has the following settings:

Enable on home page

Select this checkbox to enable the transparent header feature on the home page. This setting requires that you have a Slideshow or Video Hero section enabled as the first section on your homepage.

Text color

Select a color for all text in your header.

Make sure the text is readable against your top-most home page section's background colors, images, or video.

Icon color

Select a color for all icons in your header.

We recommend using the same color you used for your Text color.

Cart count color

Select a color for the number that shows the amount of products in the cart.

This color needs to contrast with the Icon color.

Border color

Select a color for the border that defines the bottom edge of your header.

The Border opacity needs to be above 0% to appear.

Border opacity

Use the slider to set the border opacity: where 0% is invisible and 100% is completely opaque.

Logo image

Select or upload a logo image to be used on the transparent header.

This logo is only used when the header is shown as a transparent header. The settings for your normal logo appears at the top of the header settings.

Menu styles

Sparks's header has two distinct menu styles: Inline links, and Menu icon.

Inline links

On desktop devices with Inline links enabled, Spark's header displays your menu links horizontally: :

This setting is most effective with a few top-level menu items with short titles. If there are too many items in your navigation, we recommend setting the Links position to Below or the Style to Menu icon.

Menu icon

The Menu icon always appears on mobile devices, but you use the Style option display it at all times. :

When customers click the menu icon (☰), the drawer menu opens. Spark's drawer menu includes the secondary menu and can display account links, a language selector, and a currency picker. Learn more about these here.

Note that the search icon will move to the drawer menu as a link when on mobile devices.

Settings reference

If you have customer accounts enabled, customers can also register or log in from the drawer menu or by clicking the accounts icon in the header.

If your store offers multiple languages or sells in multiple currencies, customers can switch languages and currency from the drawer menu. :

You can learn more about offering your store in multiple languages by reading Shopify's Selling in multiple languages guide.

You can learn more about offering your store with multiple currencies from Shopify's Sell in multiple currencies with Shopify Payments documentation.

Accounts are a Shopify feature. See Shopify's Customer accounts documentation for more information.