Header

You can change the header settings to your theme in the theme editor.

OPEN THE HEADER SETTINGS

Steps:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit and click Customize.

  3. Click "Theme settings" from the theme editor toolbar.

At there, you can change the settings for the header in the desktop and mobile screen. Below are the details for these settings.

GENERAL SETTINGS

  • Choose header style: Woodstock offers 6 styles of the header on the desktop and tablet screens to help you make the most of the right options for your website. This select box helps you to change to the header style you want. Each header style has its own settings. Base on the header style you choose, you can configure its settings in the corresponding header style settings part.

  • Show logo: show/hide the logo on your site.

  • Logo image: this image picker helps you to upload or pick an image to display as a logo on your site.

  • Mobile Logo image: this image picker helps you to upload or pick an image to display as a logo on the mobile screen. If empty, the logo image above will be displayed on the mobile screen.

  • Enable the sticky menu: if you tick this checkbox, the header will always be shown on the screen even if you scroll the page to below the header area. It means the sticky menu will be shown when scrolling up, and disable when scrolling down.

  • Wide display: tick this checkbox to display the header wider.

HEADER MOBILE SETTINGS

All settings in this part are only applied on the mobile screen.

  • Mobile Navigation: pick a link list to display it as a mobile menu.

  • Logo site: add the image size to resize the logo. Please refer to this guide for the image size syntax.

  • Label: configure color and background for the label in the menu item. Please refer to this guide for adding a label to the link list.

HEADER STYLE 1 SETTINGS

  • Logo size: add the image size to resize the logo. Please refer to this guide for the image size syntax.

HEADER STYLE 2 SETTINGS

  • Logo size: add the image size to resize the logo. Please refer to this guide for the image size syntax.

HEADER STYLE 3 SETTINGS

  • Logo size: add the image size to resize the logo. Please refer to this guide for the image size syntax.

HEADER STYLE 4 SETTINGS

  • Logo size: add the image size to resize the logo. Please refer to this guide for the image size syntax.

  • Hotline: add the hotline number on the top right of the header.

  • Help link: pick a link to display on the right of the hotline.

  • Tracking link: pick a link to display on the right of the help link.

HEADER STYLE 5 SETTINGS

  • Logo size: add the image size to resize the logo. Please refer to this guide for the image size syntax.

HEADER STYLE 6 SETTINGS

  • Logo size: add the image size to resize the logo. Please refer to this guide for the image size syntax.

  • Header links: There are 3 header links that you can display on the left of the top header, beside the currency and language.

    • Link 1 title: add the title for link 1

    • Link 1 URL: pick a link for link 1

    • Link 2 title: add the title for link 2

    • Link 2 URL: pick a link for link 2

    • Link 3 title: add the title for link 3

    • Link 3 URL: pick a link for link 3

  • Social links:

    • Enable: show/hide social links.

    • Facebook: add the Facebook link of your store

    • Twitter: add the Twitter link

    • Pinterest: add the Pinterest link

    • Whatsapp: add the Whatsapp link

  • Customer support:

  • Enable: show/hide customer support block

  • Title: add a title for customer support

  • Hotline: add hotline number

  • Support Area 1:

    • Enable: show/hide support area 1

    • Area name: add the name of area 1

    • Hotline: add hotline number of area 1

    • Address: add the address of area 1

    • Email address: add the email address of area 1

  • Support Area 2:

    • Enable: show/hide support area 2

    • Area name: add the name of area 2

    • Hotline: add hotline number of area 2

    • Address: add the address of area 2

    • Email address: add the email address of area 2

Last updated