User Guide - Header

Mega Menu

User Guide - Header

Mega Menu

on Jan 26, 2024

I. What is a mega menu? The Eurus Shopify Theme offers a powerful Mega Menu feature that allows you to display multiple levels of links, images, or other content and categories in a large and organized layout. This feature is a great way to organize complicated menu structures and is especially useful for large catalogs. II. How to set up a simple 3-level menu Steps:  Before you proceed, make sure you have a nested menu in the Online Store > Navigation section of the Shopify admin area. For more information, see How to set up drop-down menus. Open the Theme Editor, and click on the Header section. At Menu -> click the Select menu button to choose the 3-level menu that you want to display.   Note: If you want to display 4-level menus or mega menus, leave this field blank and check the section below. III. How to set up a mega menu? Eurus theme owns some unique selling propositions that make it stand out: Provide 6 different types of Mega Menus Support up to 4 menu levels (instead of the default Shopify maximum of 3 levels) No need for an app: With Eurus Theme, you can add product and collection imagery, promotional imagery, and link badges to your menus without the need for an app. By default, the menu will show when the user hovers over it. Note: Logic of combining menu configured in header settings and menu in header blocks: If you set up a menu in both the header setting and the menu blocks (under Header section) https://imgur.com/EQev53R: The menu setting in header setting is disabled. The level 1 menu will be the name of the menu block. Each new menu block added equals a new menu item to be displayed on the header. If you only set up a menu in the header blocks: The level 1 menu will be the name of the menu block. Each new menu block added equals a new menu item to be displayed on the header. If you don’t set up a menu in both the header setting and the header blocks: No menu is displayed on the header. The basic concept of creating a mega menu using the Eurus Theme is to create many submenus and add different menus to each block to create menu items.  Here are the steps: Go to Theme Editor and navigate to the Header section Under Header section, there are 6 types of menu blocks for merchants to select https://i.imgur.com/PqY3hgc.png (see What are the types of mega menu? for more). To create a mega menu, add different menus to each block to create menu items Remember to fill in the Menu item name and click Save after setting up. IV. What are the types of mega menu? Tabbed menu: Show submenu in vertical or horizontal tabs (e.g. https://i.imgur.com/R2uCi8U.png) Tree menu: Show items in classical tree menu (e.g. https://i.imgur.com/aFND9Te.png) Banner menu: Show up to 3 banners inside a menu item (e.g. https://i.imgur.com/P15YaJM.jpg) Product menu: Show product cards inside a menu item (e.g. https://i.imgur.com/l0pDk3N.png) Blog menu: Show blog posts inside a menu item (e.g. https://i.imgur.com/GXqyzcF.png) Contact menu: Show a contact form together with contact information, Google map inside a menu item (e.g. https://i.imgur.com/tP6YcRb.png) V. How to add Images to Menu? There are 3 menu types that you could add additional images to the menu: Tabbed menu: You could add up to 3 promotion images on the right side in the menu item. A promotion image is an image that is used to attract attention or advertise something on a tabbed menu. For example, you can use a promotion image to show a special offer, a discount, a new product, or a featured item on a tabbed menu. Banner Menu: You could add up to 3 banner images. Contact menu: You could add 1 image on the left side in the menu item. For details on how to set up mega menu, please refer to our video guide here.

Search Bar

User Guide - Header

Search Bar

on Jan 26, 2024

The search bar allows customers to search for products, collections, pages, and blog posts on your store. The search bar is located in the header of your store and is easily accessible from any page. I. How to set up search results page? When a customer enters a search term in the search bar, Eurus Theme will display search results that match the search term. The search results can include products, collections, pages, and articles. Steps: Open the Theme editor, and click on Theme Settings > Search and Navigation. In the Search configuration group, navigate to Search result. Here you can Select the options to adjust what content users can search on your store (Products only; Products and collection; Products, page and article, Products and page, All content). Click Save. To enter a search term, simply type the keyword(s) in the search bar and press Enter. The search results will be displayed on the front-end. Tips: When a customer types in the search bar, Eurus Theme provides search suggestions to help them find what they are looking for. Search suggestions are based on the customer’s search query and the products, collections, pages, and blog posts available on your store. Please note that search suggestions are not available for password-protected pages or products that are not visible to customers. II. How to show product type dropdowns? The search bar function allows your customers to filter the search results by product type. The product type dropdowns are located on the left side of the search bar and show the product types that are available in your store.  Steps: Open the Theme editor, and click on Theme Settings > Search and Navigation. In the Search configuration group, select Enable refined search box Click Save. Enable refined search box also allows users to search based on product type III. How to show Popular products search and Search recommendations? When a customer puts their mouse on the search bar, Eurus Theme provides the feature to showcase Popular products search and Search recommendation collection to help them find what they are looking for, also to discover more relevant and interesting products in your store. The “Popular products search” products are shown below the search bar and show the title, image, and price of each product.  Below are the steps to set up the Popular products search Steps: Open the Theme editor, and click on Theme Settings > Search and Navigation. In the Search configuration group, tick the checkbox Enable product suggestions In Popular products search setting, select the collection containing the products that you want to show as popular search products. Click Save The Search recommendations could be shown together with Popular products search  below the search bar. Steps: Open the Theme editor, and click on Theme Settings > Search and Navigation. In the Search configuration group, tick the checkbox Enable product suggestions In Search recommendation setting, select the collection containing the products that you want to show as Search recommendations. Click Save Note:  This feature is only available in certain languages. For more information about the languages that the feature supports, see supported languages IV. How to include relevant search terms to improve search experience on the storefront? To improve the search experience on your storefront, you can include relevant search terms in your product descriptions, titles, and tags. This will help customers find what they are looking for more easily. Relevant search terms are words or phrases that are related to your products or content and help your customers find what they are looking for.  Unfortunately, themes cannot support relevant search terms out of the box., You will need to use a search app, such as [Search and Discovery], that allows you to add synonyms, keywords, tags, or metafields to your products or content. Note: If you want to use advanced search features such as autocomplete, you will also need to use search apps like Search and Discovery.

Announcement Bar

User Guide - Header

Announcement Bar

on Jan 26, 2024

I. What is the announcement bar? The announcement bar serves as a prominent space at the top of a website, delivering crucial messages, promotions, or time-sensitive information to visitors. Its purpose is to capture immediate attention and effectively communicate important updates or offers. II. How to set up the announcement bar? Open the Theme Editor and find the Announcement section in the Header Group. 1. How to add a discount code in an announcement bar? To include a discount code in the announcement bar, follow these steps: In the Announcement section, add a block “Promo code”. Choose an Icon from the list to display before the promo code bar's text. There are 21 premade icons available for customization. Text: Enter the text for the promo code bar. To include a countdown timer, use {count_down} in the text field. Text Size: Adjust the size of the text in the promo code bar. The range is from 50% to 200%. Link: Enter the link users will be redirected to if they click on the promo code bar. Admin can customize the content displayed on the promo code bar by entering text, adjusting text size (ranging from 50% to 200%), and adding a redirect link for users who click on the bar. Enter the coupon code that users can copy from the promo code bar in the Coupon code field. If left empty, no code will be displayed. You can also choose the Button color and Coupon color in both light and dark modes. 2. How to show a countdown timer? The countdown timer will dynamically display the time remaining based on the configured end date and timezone. This feature is effective for creating a sense of urgency and promoting time-sensitive offers or events.a) Text Field: To display a countdown timer on the bar, it's mandatory to add the {countdown_timer} variable to the text field.Example: If you want to create a bar with the default message 'Hurry up! 30% OFF Sale Ends Soon', you must include the {countdown_timer} variable in the text field to ensure the countdown timer appears on the bar. b) Configure Countdown Timer: Beneath the countdown timer section, set the following parameters: Timezone: Choose the timezone in which the countdown will operate. End Date/Time: Specify the date and time when the countdown should conclude. The timer will then show the time remaining between the present and the end date.3. How to show promotion info (announcement, CTA button) ? To display promotion information using the announcement bar and CTA (Call-to-Action) button, follow these steps: To activate the announcement bar, tick the "Enable Announcement Bar" option. If you prefer the bar to be visible only on the homepage, tick the "Show Only on Homepage" configuration. The announcement bar can be displayed in either stack or carousel format. Enable the "Enable Carousel on Desktop" option for the carousel style. When utilizing the carousel display, administrators can further enhance it by enabling auto-switch and adjusting the time between switches. 4. How to show language, currency? If you want to adjust the alignment of the language and currency selectors, follow these steps: Choose between "Left" or "Right" alignment based on your preference. Tick the checkbox labeled "Show Language Selector" and/or "Show Currency Selector" to enable the language/currency selection feature. Choose between "Left" or "Right" alignment based on your preference. Adjust the text size settings to customize the appearance of language and currency selectors. For detailed information on setting up language and currency features in all Header sections, refer to the specific guide provided for language and currency [hyperlinks] configuration. Tips:  Avoid an excessive number of announcement bars to maintain a clean and focused user interface. Keep the content brief to prevent layout issues, especially on smaller mobile screens. Conclusion: Announcement Bar provides a dynamic and eye-catching way to communicate important information on your website. By utilizing the configuration options, you can tailor the bar's appearance, functionality, and content to suit your promotional needs. 

Header

User Guide - Header

Header

on Jan 26, 2024

I. What is Header? The Header serves as a pivotal section providing a quick overview of the entire online store. It establishes a strong first impression, setting the tone for a compelling shopping experience. II. How to Set up Theme mode? The Theme Mode Toggle feature provides users with the flexibility to customize the appearance of the theme, allowing for a personalized and comfortable viewing experience. Follow the steps below to enable and manage the theme mode settings: Open the Theme Editor and go to Theme mode sections in Theme Settings. 1. Enable Theme Mode: Enabling this option activates both light and dark modes, while disabling it retains only the light mode. 2. Select Mode: After enabling the theme mode, users can choose their preferred mode by following the options below: If you want the theme mode to automatically adjust based on users device settings, select “Use Device Settings”. This ensures that the theme seamlessly switches between light and dark modes according to the overall device preferences. Users can manually switch between light and dark modes using a toggle conveniently placed in the header of the interface if you choose “Allow manual switch". “Default mode” will only take effect when "Allow manual switch" is selected above: Set your default mode to either Light or Dark, depending on your preference. Conclusion: By following these simple steps, users can tailor the theme mode to their liking, ensuring an enjoyable and personalized visual experience. Whether you prefer the clarity of light mode or the reduced eye strain of dark mode, this feature puts you in control. Experiment with the settings to find the perfect theme mode that suits your needs. III. How to Set up a Sticky header? The Sticky Header feature enhances your website's navigation experience by ensuring that the header remains visible as users scroll through the content. Follow the steps below to set up and customize the Sticky Header according to your preferences. Within the Header section in Theme Editing, locate the Sticky Header settings. You'll find a dropdown menu that allows you to select how the sticky header appears on your website. You can choose from: Disable (None) : Turn off sticky header. Enable: Opt for scroll-triggered sticky, always sticky, or always sticky with a reduced logo size. IV. How to Set up a Transparent header? The Transparent Header feature adds a touch of elegance to your website by allowing a see-through effect for the header. Follow these simple steps to set up and customize the Transparent Header on specific pages of your site. Admin => Online Store => Theme => Sections => Header  Transparent Header: You can customize the transparent header by ticking the "Enable on homepage" checkbox for a transparent effect on the homepage and/or the "Enable on collection page" checkbox to extend this feature to collection pages.  Uploading Transparent Logo: Still within the Transparent Header settings, look for the "Logo (transparent)" option. Upload your desired transparent logo file to ensure a seamless and aesthetically pleasing appearance. Tips: Ensure your logo has a transparent background for optimal results. Experiment with different logo variations to see which complements the transparent header effect the best. Conclusion: With these straightforward steps, you can effortlessly enhance the visual appeal of your website by incorporating a Transparent Header. 

Language & Currency

User Guide - Header

Language & Currency

on Jan 26, 2024

The language and currency configuration allows you to display a language and currency selector on your store’s front end. HOW TO SET UP Steps:  Open the Theme Editor and in the HEADER GROUP,  select the Header section. In the LAYOUT settings, locate Language and currency configuration, there are 2 options “Show language selector” and “Show currency selector” Note: In order for language and currency selectors to display on the frontend, you first need to sell with multiple currencies to multiple regions around the world. To add currencies to your stores, please follow the guide here. To add languages to your stores, please go to Settings > Languages > Add language and choose the language you want to add. Please bear in mind that you will need to install the Geolocation app by default for the languages to be added.

Mobile Navigation

User Guide - Header

Mobile Navigation

on Jan 26, 2024

I. What is mobile navigation? Mobile navigation on a website refers to the design and functionality that enables users to access and navigate the site seamlessly on mobile devices, such as smartphones and tablets. The goal is to provide an efficient and enjoyable browsing experience for users accessing the website on mobile devices, considering the limitations of smaller screens and touch interactions. II. How to set up mobile navigation? The basic concept involves a separate menu from the desktop version, allowing flexible arrangement of information blocks (e.g., social, selector, text, image). Open the Theme Editor and find the Mobile navigation section in the Header Group. 1. General setting If you want to enable the language/currency selection feature to allow users to choose their preferred language/currency, tick the checkbox Show language selector/ Show currency selector. When Setup menu for mobile display, you can choose the background/text/divider color of the menu to display in light/dark mode 2. Customizing blocks If you want to customize:You can add and customize various blocks in mobile navigation: Cart: Display item count and activate the mini cart upon click. Account & Log: Redirect users to the Customer login page with a simple click. Image: Choose and link an image for mobile navigation, redirecting users upon click. Social Icons: Display configured social media icons. Text: Enable custom text display with styling options like bold, italic, list creation, and link insertion. By organizing these blocks, you can create a streamlined and user-friendly mobile navigation experience. III. How to set up Mobile Menu? 1. Basic Setup: For a straightforward setup, choose a menu in the Mobile Navigation settings, and it will be displayed. The mobile navigation allows up to 3 levels, mirroring the menu configuration in the desktop navigation. 2. Advanced Setup (Up to 4 Levels): a) Combining Mobile Navigation Setting and Menu Item Block: If you set up a menu in both Mobile Navigation and the menu item block, the menu selected in section setting  will be disabled. Each new menu block added equals a new menu item displayed on mobile navigation. This allows up to 4 levels of menus, resembling the desktop setup. b) Setting Menu in Menu Item Block: Menu Item: Enter the menu item name. Menu: Click "Select menu" to choose from existing menus or search. Menu Item Link: Enter the redirection link for users clicking the menu item. Result Scenarios: If you only set up a menu in Mobile Navigation, it becomes the level 3 menu in the mobile navigation, allowing up to 4 levels. If no menu is set up in both Mobile Navigation and the menu item block, no menu is displayed in the mobile navigation. Conclusion Setting up menus can be as simple as selecting a menu or creating a hierarchical structure with multiple blocks, providing flexibility similar to desktop navigation setup.

Social Icons

User Guide - Header

Social Icons

on Jan 26, 2024

Social icons typically appear in the storefront, commonly in the header and footer section, but. The exact location may vary based on the theme's design and customization. It enhances website visibility and provides easy access for users to connect with your social media accounts. How to Set Up Social Media Icons? Open Theme Editor. Find the Social Media section in Theme Settings. Enter social links for each configured account. Enable in Header or Announcement Bar: Once social accounts are added, you can choose to display them in the header or announcement bar by enabling the respective sections.