Unicorn Shopify Theme
  • Getting Started
  • Demo
  • Section Groups
    • Header
      • Menu icons
      • Badges
      • Popup menu
      • Image with button (Mobile)
      • Featured promotion (Mobile)
      • Contacts
    • Cart drawer
    • Search popup
    • Mega menu
      • Menu
      • Image with button
      • Featured promotion
      • Custom HTML
      • Empty column
      • Badges
    • Footer
      • Menu
      • Text
    • Popups
  • Dynamic Theme Sections
    • Before/after image
    • Blog posts
    • Brand list
    • Collage
      • Image
      • Collection products
      • Video
    • Collage of images
      • Image
      • List item
    • Collection list
    • Collection slider
    • Contact form
    • Countdown timer
    • Custom Liquid
    • Email signup
      • Heading
      • Subheading
      • Email form
    • FAQ
    • Featured collage
      • Product
      • Image
    • Featured collection
    • Featured collections
    • Featured product
    • Featured promotions
      • Content, Text on image
      • Content, Text below the image
      • Content, Button on image
    • Image with text overlay
      • Second image
      • Mobile settings
      • Heading
      • Text and Custom HTML
      • Buttons
    • Image gallery
    • Lookbook
    • Map
    • Media
    • Multicolumn
    • Page
    • Popup
      • Image
      • Text
      • Newsletter form
      • Buttons
      • Social media
      • Time countdown
      • Collection
      • Promotional code
    • Reels
    • Rich text
      • Heading
      • Text
      • Button
    • Slideshow
    • Tags
    • Testimonials
    • Ticker
  • Page Categories
    • Products
      • Product information
      • Product recommendations
    • Collections
      • Collection banner
      • Product grid
    • Collections list
    • Cart
    • Blogs
    • Blog posts
    • Search
    • Password
      • Email signup
    • 404 page
  • Theme Settings
    • Top bars
    • Header and Logo
    • Colors
    • Typography
    • Layout
    • Styles
    • Product
    • Variant picker
    • Social media
    • Search
    • Favicon
    • Currency format
    • Cart
    • Popups
    • Performance
    • Advanced settings
    • Custom CSS
    • Theme style
  • SVG Icons
  • FAQ
    • How to customize Metafields
    • How to group product images by variants?
    • How to create a template?
    • How to create webpages?
    • How to set up filters?
    • Understanding of metaobjects and their use in a store
Powered by GitBook
On this page
  • Header
  • Sticky header and Full-width logo
  • Logo
  • Full-width logo
  1. Theme Settings

Header and Logo

Use settings from the following section to customize the Header and Logo in your store.

PreviousTop barsNextColors

Last updated 1 month ago

Header

Note! The header options described below can be used only on desktop view!

Type on large screens

Use the options from the drop-down to change the feel and look of the Header section. Choose one of the pre-design types to change the layout of the first Header line: "In one line, logo left"; "In one line, logo center"; "In one line, logo and menu left"; "In two lines, logo left"; "In two lines, logo center".

In the following examples, you can view each of the header types:

Sticky header and Full-width logo

Use the options described below to configure the sticky header appearance on the desktop view.

In the "Type" drop-down, one can specify whether to display the sticky header while scrolling down or up from the bottom of the page by selecting one of the required options:

  • "Text menu". Use the option to display the Secondary navigation menu with the Logo in the sticky header, avoiding showing the "Icons menu".

  • "Icons menu". Unlike the previous option, this setting shows only the "Icons menu" in the sticky header, regardless of whether the text menu is used or not.

Note! The full-width logo feature works only on the Home page (desktop view).

Using this option changes the header type on the main page.

  • "Text menu with full-width logo". Choose the option to get the sticky header for the Secondary navigation menu and the logo animation.

To hide the sticky header, use the "Disable" option.

Enable sticky on mobile

Activate the option to use the sticky header on mobile.

Hide sticks header when scrolling down

This option disables the sticky header when scrolling down on all screen sizes. However, the feature still works when scrolling up.

Logo

Tip: The "SVG logo" and "Logo image" settings will be applied for both desktop and mobile. Check if these settings work well for desktop and mobile in your store.

Show picture logo

If you want to substitute the text logo in the Header with an image or SVG logo and display the full-width logo in the Header or Footer on the Home page, activate the option.

SVG logo

To display an SVG logo, paste the SVG code to the input field:

Logo image

Here you can press the "Select" button and choose an image from the library or upload it from your device.

Logo width

Use the slider to control the logo size in the Header from 20 to 300 pixels. This option works for the SVG logo and image on the desktop.

Mobile logo width

Change the logo size on mobile from 0 to 280 pixels using the provided scale.

Full-width logo

Full-width logo width

You can control the full-width logo size on the scale. Here you can apply changes from 0 to 2000 pixels, where 0 pixels means disabling the limit of the logo width and 2000 pixels - the logo will be displayed at the whole screen width.

Here is how the settings display in a store:

Full-width logo animation delay

Use the given scale to set the delay time, up to 100 milliseconds, for the logo to appear beneath the Header when scrolling down from the top of a page.

Operating this option will ensure a smoother transition of the logo to full-screen mode due to a time delay.

Full-width logo placeholder

The option works only on the Home page. By default, the date will be replaced with the logo on other pages.

Place the current date in the header by adding the variable [date] to the field. The option can be used on a desktop only. To disable the option, leave the field empty.

Full-width logo months

In the provided field, type the list of months using your store's language, separating them with commas. The theme will display the current month within the animated logo.

Eg.: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec

Full-width logo days

Specify the list of days in your store's language in the provided field. The theme will automatically show the current day.

Eg.: Mon, Tue, Wed, Thu, Fri, Sat, Sun

Here is how the date is displayed in a store:

Note! The sticky header works on all pages except for the "" and "" pages.

"Full section". This option ensures the whole header is displayed according to the header type used in the "" drop-down and the number of menus applied in the "" section.

If you want to add a logo scaling below the header before scrolling down or to the very top of a page, use the options below. If you are using the following settings, make sure that the "" option is enabled in the current section.

"Full section with full-width logo". Let you display the whole header in a sticky mode according to the header type used in the "" drop-down.

The "Full section with full-width logo" can be viewed on the .

Note! This option works with the sticky header layout - Full-width logo. If you disable the full-width logo in the "Sticky header" drop-down of the "" section, the theme will replace the date with the logo.

Products
Collections
DEMO
Layout
Header
Type on large screens
Show picture logo
Type on large screens
Logo on the left and the Main menu with the header buttons on the right
Centered logo with the Main menu on the left and header buttons on the right
Logo and Main menu on the left with the header buttons on the right
Logo and Main menu underneath on the left with header buttons on the right
Centered Logo and Main menu underneath with the header buttons on the right, and the search icon moved to the left