Beloria Documentation
  • Welcome
  • Installation
  • Header
  • Footer
  • Shopify apps
    • Boostheme Toolkit app
    • Metafields Guru
  • Static sections
    • Powerful Megamenu
      • Powerful Megamenu(version tf-3.5 or older )
    • Powerful Mobile Megamenu
      • Powerful Mobile Megamenu ( version tf-3.5 or older )
    • Product pages
      • Main product section
      • Main product - Reviews
      • Main product - Tabs
      • Main product - Upsell
      • Main product - Cross-sell
      • Old version ( tf-3.5 or older )
    • Collection pages
      • Version tf-3.5 or older
    • Blog pages
    • Posts
    • Cart page
      • Cross-sell products Section
    • Search result page
    • FAQ
  • Dynamic sections
    • Collection and product
      • Collection filter
      • Collection list
      • Flexible collection list
      • Powerful product block
      • Powerful product block 2
      • Powerful product columns
      • Product single deal
      • Simple product slider
      • Vedette product ( single product )
    • Banner & image
      • Banner creator pro
      • Layer banner
      • Information list
      • Instagram slider
      • Logo list
      • Banner & quotes
    • Text
      • Custom HTML
      • Testimonials
      • Text list
    • Marketing & others
      • Featured blog posts
      • Newsletter
      • Contact us
      • Map
      • Loox widget
      • About us 1
      • About us 2
      • About us 3
  • Theme settings
    • General
    • Collections list page
    • Typography
    • Breadcrumbs
    • Multiple languages
    • Colors & Font sizes
    • Social media
    • Favicon
    • Product settings
    • Product labels
    • Currency
    • Cart
    • Shipping rates calculator
    • Upsell products
    • Cross-sell ( recommendation ) products
    • Recently viewed products
    • Progressive web app
    • Sales notification
    • Search suggestion
    • Newsletter
    • Promotion bar
    • Cookie consent
  • For developer
  • Tips
  • Manage blocks in a section
  • Cross-sell ( recommendation ) rules
  • Change log
  • Upgrade to a new version
    • From versions older than tf-4.0
Powered by GitBook
On this page
  • OPEN THE HEADER SETTINGS
  • GENERAL SETTINGS
  • HEADER MOBILE SETTINGS
  • HEADER STYLE 1 SETTINGS
  • HEADER STYLE 2 SETTINGS
  • HEADER STYLE 3 SETTINGS
  • HEADER STYLE 4 SETTINGS
  • HEADER STYLE 5 SETTINGS
  • HEADER STYLE 6 SETTINGS
  • HEADER STYLE 7 SETTINGS
  • HEADER STYLE 8 SETTINGS
  • HEADER STYLE 9 SETTINGS
  • HEADER STYLE 10 SETTINGS

Was this helpful?

Header

PreviousInstallationNextFooter

Last updated 3 years ago

Was this helpful?

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.

  4. Click "Header" to open the header settings part.

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

GENERAL SETTINGS

  • Choose header style: Beloria offers 10 styles of 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.

  • Header text: add short text in the header on the desktop and tablet screens. This text is only shown in certain header styles: 1, 2, 4, 5, 8, 9.

  • Enable the sticky menu: if you tick this checkbox, the header will always be shown on the screen even if you scroll the page 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.

  • Choose header style: Beloria offers 5 styles of the header on the mobile screen 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.

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

HEADER STYLE 1 SETTINGS

HEADER STYLE 2 SETTINGS

  • Categories: Pick a link list to display on the left of the logo.

HEADER STYLE 3 SETTINGS

HEADER STYLE 4 SETTINGS

HEADER STYLE 5 SETTINGS

HEADER STYLE 6 SETTINGS

HEADER STYLE 7 SETTINGS

HEADER STYLE 8 SETTINGS

  • Search area: configure the texts on the right of the search form.

HEADER STYLE 9 SETTINGS

HEADER STYLE 10 SETTINGS

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

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

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

Enable social icons: show/hide the social icons. Please refer to for setting up the social icon links.

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

Enable social icons: show/hide the social icons. Please refer to for setting up the social icon links.

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

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

Enable social icons: show/hide the social icons. Please refer to for setting up the social icon links.

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

Enable social icons: show/hide the social icons. Please refer to for setting up the social icon links.

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

Enable social icons: show/hide the social icons. Please refer to for setting up the social icon links.

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

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

Enable social icons: show/hide the social icons. Please refer to for setting up the social icon links.

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

Enable social icons: show/hide the social icons. Please refer to for setting up the social icon links.

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

this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide
this guide