Crafting the visual aspect of your webshop is a critical step in engaging and maintaining an audience. This guide will walk you through the different visual settings you can manipulate to create an aesthetically pleasing webshop.
Before you start customizing
Navigate to Settings > Visual settings > Headeron your TronShop's portal to begin customizing your header. Here, you'll find a host of options to choose from.
Grow your business
If you need help customizing your header, then you can hire a PromoTron expert! Tailor Your Online Shop to Perfection, Attract Customers, and Boost Sales. Embrace the Power of Customization Today! Contact us to book online consultation.
Here are some examples of customized TronShops: Vossa Store or Quintessene
On This Page
- Header Layouts
- Header Menu
- Alternative header
- Header Customization
- Settings of Header Functions
- Primary navigation menu
Header Layouts
It refers to the arrangement or design of elements in the header section of a website or application.
The header is typically the topmost section of a webpage and serves as the initial point of interaction for users. It often contains elements like the website logo, navigation menus, search bars, contact information, and other important links or buttons.
Classic 1The Classic 1 layout is ideal for shops that prioritize functionality and transparency. This variant shows a top line displaying links, contact information, and language and currency switches. The main line features the logo, search input, cart preview, and account access, followed by a menu of product categories. This layout ensures that users have all the essential functions at their fingertips.
Classic 2The Classic 2 layout streamlines the header by combining the essential features into a single main line. This variant includes the logo, search bar, language and currency switches, cart preview, and account access, followed by a menu of product categories. The reduced clutter can make this layout more user-friendly and visually appealing.
Classic 3The Classic 3 layout features a comprehensive main line that displays links, contact information, language and currency switches, logo, search input, cart preview, and account access. Below this main line is the menu of product categories. This layout provides a seamless blend of functionality and simplicity, allowing users to easily access various elements of the webshop.
NarrowThe Narrow layout offers a minimalist design that can create a clean, modern look for your webshop. This variant presents a single line with the logo and icon buttons for the e-shop, links, search, and account. This layout is perfect for webshops that prioritize simplicity and sleekness.
NEED HELP?
Our dedicated support team is just one email away. We're here to guide you through the customization process, ensuring your PromoTron platform is tailored to your exact specifications. The process of customization has never been easier or more accessible. Contact our Support team!
Header Menu
The TronShop menus are accessible via the Content > Menu.
Below you will find information about Header menu and its various features.
Top Links Menu
Header menu consist of the links at the top of the page. You can remove them and also add further links. There you should choose Top Links menu and press on to Edit existing page.
Do you need to add a new link? Here's a simple step-by-step guide:
- Select the Top Links Menu. This action will reveal all the existing links on the right side of your screen.
- Click on ADD NEW LINK...
A new interface will now open:
- Decide whether the new link will be internal (redirects to another page within your TronShop) or external (leads to a page outside your TronShop).
- Once you make your choice, a new field labeled "Target URL" will appear. Here, you should insert the URL that the link will direct to.
- In the "Link caption" field, enter the text to be displayed in the Top Links Menu. This can be something like 'About Us', 'Terms & Conditions', 'Contacts', etc.
- In field "Attach link image", you have the option to replace the text link with an image (icon). If link has an image, it is used instead of Link Caption.
Once all fields are completed, simply click on SAVE to finalize your changes.
PLEASE TAKE ATTENTION
If the new hyperlink you're adding is meant to lead to an internal page within your website, you'll need to ensure that the page exists. If it doesn't, you must first create the page before establishing the hyperlink. We have special article for such thinks. You can find it in article "Creating and editing pages"
Alternative header
The aim of the alternative header is to keep the customer focused on the order process.
You can choose whether you want to show the alternative header or not in Settings > Visual settings > Shopping process. Do not forget to use the SAVE button.
So this is how it looks when the alternative header is not shown - the customer can see the primary navigation menu which may distract him from finishing the order:
....and this is how it looks when the alternative header is shown - the primary navigation menu is hidden:
Header Customization
More information about this topic you will find in Basic informations about themes & your logo & colors article
Unlock the Magic of Customization
Why settle for ordinary when your brand deserves extraordinary? Let us transform your standard homepage into a masterpiece that captivates every visitor.
If you need further assistance, just Contact our Support team.
Settings of Header Functions
Located prominently at the top, these functions are crafted with careful attention to meet both general and specific needs of your diverse audience. Whether it's aiding users in searching quickly or allowing them to select their preferred language and currency, each of these tools plays a crucial role in ensuring a smooth experience on your website.
1. Common- Set Header to Float with Scroll: This is a feature that allows the website header to remain visible at the top of the browser window even as the user scrolls down the page.
- Show Popup with Subcategories in Main Navigation: When a user hovers over or clicks on a primary category in the header's navigation, a popup appears displaying the subcategories related to that main category.
- Show Breadcrumbs: navigational aids that show users their current location within the site's hierarchy and provide links to easily backtrack to higher-level pages.
2. Enhanced SearchingIncorporating search enhancements can further optimize your webshop's user experience. You can choose to show product categories and products in autocomplete results, enabling users to find what they're looking for more efficiently.
3. Language and 4. Currency SelectorsCustomization can also extend to your language and currency selectors.
You can choose to display the language name, ISO code, or an icon.
Similarly, you can display the currency name, ISO code, or an icon.
These options give you the flexibility to cater to a global customer base in a way that aligns with your brand image and the preferences of your users.
Primary navigation menu
The primary navigation menu is essentially a list of your webshop's categories, as illustrated by the image below.
The location of this menu depends on the header version you've chosen. If you're using the Classic 2 or Narrow header versions, it's located within a button named "Categories" or "E-SHOP" respectively.
You can use not only default layout, but customize them as you need in External Scripts folder in TronShop Portal. Asked your IT manager to change it. Read more about it in the article.
Want to learn more about these predefined header versions? Simply navigate to the section "Header Layouts":
Now, let's refocus on the main topic: the settings for the primary navigation menu. Content > Menu. By clicking on the text that says "Primary navigation menu" on the right side of your screen, you can view all your menu items on the right:
Here, you can:
- Rearrange your shop's categories by using the drag-and-drop feature. Just hover your mouse over the six-dot symbol to the left of the category name and give it a try.
- Edit the category name or its link by clicking on the pencil icon.
When you click the pencil icon, you have the options to choose
- Target (i.e., the destination page when a customer clicks on the category name),
- Link caption (i.e., the category name),
- OR Replace the category name with a link image:
You can also add a new link to the menu or remove an existing category from it:
In conclusion, crafting the visual identity of your header plays a pivotal role in engaging and retaining your audience. This comprehensive guide provides insights into diverse visual settings that empower you to create an appealing and unique webshop. For further assistance and to unlock the potential of customization, reach out to our Support team.
Comments
0 comments
Please sign in to leave a comment.