Header
About Shine Theme Header
The Shine theme header is the top section of your website that appears on every page. When first-time visitors land on your website, a well-crafted header offers a treasure trove of benefits for branding, navigation, and ultimately leading to more satisfied customers.
You have all the freedom to customize the Shine theme header to align with your brand identity.
Access Shine Theme Header
From any page in your Shine Admin Dashboard, choose Header.
Shine Theme Header Configuration
General
You can change the color scheme for this section by selecting the scheme here. To change the theme color, please go to Theme settings > Colors.
The sticky header stays fixed at the top of the website while scrolling. To customize the sticky header, you can choose:
- Not use: unable sticky header
- Always: remain visible as you scroll up and down
- When scroll up: remain visible as you scroll up
Logo
To add a logo, click Select image > Upload your logo or select an existing image from your media library.
You can set maximum logo widths for desktop and mobile. The default width is 40px for both desktop and mobile, but you can drag the slider or enter a number between 40px and 200px for desktop and 40px and 140px for mobile in the box.
Navigation
To edit the navigation menu, click Select menu > Choose an existing menu or create a new one.
To change or remove the selected menu, click on Change button.
You can manage your navigation menus under Online Store > Navigation.
You can choose whether to open external links in a new tab or not. This option can help improve your store’s SEO and increase visitor engagement by keeping them on your website longer.
Currency selector
To enable the currency selector, check the Show currency selector box.
Once enabled, a currency dropdown will appear at the bottom of the drawer menu of the header. This dropdown allows customers to change the currency that they see in the store.
To enable the currency selector, you must first add countries to your Shopify store’s Markets.
Language selector
The Language selector appears next to the Currency selector in the drawer menu. To enable it in the drawer menu, check the Show language selector box.
The Language selector will appear at the bottom of the drawer menu and next to the Currency selector. This feature only works if your store has multiple languages. To set this up, please follow the Shopify guide on adding and managing languages on your site.
To enable the Language selector, you must first add a language to your Shopify store’s Language settings and assign it to the market you want to show.
Large screen
Shine theme provides several Header layout options for large screens.
For the full menu, you can change:
- Logo left, menu left
- Logo left, menu below
- Logo left, menu center
- Logo center, menu below
For the drawer menu, you can change:
- Logo left, menu left
- Logo left, menu center
The default layout for both the full menu and drawer menu are logo left, menu left. To change the layout, select your preferred option from the Header layout dropdown.
Mobile screen
For mobile screens, the drawer menu will be enabled as default so the layout settings will not apply.
Shine theme provides two Header layout options for mobile screens:
- Logo left, menu left
- Logo left, menu right
The default layout for the mobile screen is the logo left, menu left. To change the layout, select your preferred option from the Header layout dropdown.
Custom color
You can customize the colors of the Sticky header background and Sticky header content by clicking on the color picker.
The default color of the Sticky header background and Sticky header content are transparent.
Shine Theme Header Blocks Configuration
The Header section provides two menu types: Mega Menu and Collection Menu. These menus allow you to organize and display your website’s content in a visually appealing and user-friendly manner.
To add a Mega Menu or Collection Menu to the header, click the Add Block button. This will open a menu selection dropdown, where you can choose the desired menu type.
To modify an existing block, click on it to open the settings modal.
Collection menu
The Shine theme allows you to display a dropdown menu of product collections in the header. This makes it easy for customers to browse your store catalog.
Click on the Add Block button > Select Collection Menu on the Header to add a new item.
Then, you can start to customize the Collection menu in the settings.
General
The Menu item name is the name of the Collection menu you want to apply.
Click Select Collections > Choose collections to display (maximum 6 collections).
Large screen
You can customize the number of collections displayed on large screens, such as desktops and laptops, to ensure a visually appealing and organized layout. The Item per row on large screens can be set from 4 to 6 items.
To modify the number of collections, simply choose the desired value.
Once enabled, customers will see the collection browsing menu appear next to the main navigation menu in the header. It will contain clickable links for each collection you selected.
Mega menu
You can add more details to the Header by adding the Mega menu block.
To add the Mega menu block, firstly, you need to set up menu items for the main menu from Navigation.
In the Mega menu, you can set up a Promotion card along with the Mega item name. Each Promotion card has the heading, image, link, and mask overlay color settings.
General
The Menu item name is the name of the menu item you want to apply to this mega menu.
Promotion card
You can adjust the Image ratio for the Promotion card:
- Square
- Portrait
- Landscape
To apply the Promotion card image, click the Select Image button > Select an existing image or upload a new one. The recommended image size is 900 x 500px .jpg.
You can also edit the Heading text on the content box, and paste or search a link in the Link field.
Custom color
You can apply Mask overlay color for the Promotion card. The Overlay opacity can be adjusted from 0% to 90%.
You can also change the Text on mask overlay color.
