Shopify is one of the most popular eCommerce service providers, with over 500,000 businesses having used their suite of tools to sell online. One of the main attractions for site owners is the flexibility of Shopify themes. Each theme comes with its own customization settings – great for novices and pros alike. Templates can be changed with the ease of a drag-and-drop UI. But advanced designers can take even more control via custom HTML and CSS, thanks to the Liquid templating language.

What this means is that you aren’t limited to just the same old basic designs – regardless of your skill level. And just as great is the sheer selection of professional themes available. No matter what type of store you run, you’re sure to find a theme that’s a perfect fit.

With that in mind, let’s take a look at 10 of the top themes available for Shopify:

Kodo

Kodo brings the style of high fashion to Shopify. The theme features 11 different home page layouts, with each sporting a classic look that is perfect for high end merchandise.

Product photos are heavily featured to ensure that your products are the focal point. Kodo is compatible with Shopify’s page builder – so customization of the header, footer and body of the theme is simple. You’ll also find lovely mega menus, product quick-views, live search and a sharp look on mobile screens.

TechMarket

TechMarket makes wonderful use of every last pixel on large screens – resulting in a fully-immersive experience. 

But don’t worry; it still looks amazing on a phone. Choose from eight home page designs, two landing pages, 10 category layouts and three single-product pages to get just the look you’re after. The theme also includes several custom blocks, product labels for “new” and “sale” items, along with horizontal and vertical mega menus.

Max

Max is a flexible, multi-purpose Shopify theme that includes a dozen home page layouts. They range from designs featuring large promotional images to those that get right down to business with immediate product display.

There are also multiple category and single-product layouts available, as well. A popup or slide-out shopping cart makes for convenient viewing from anywhere on your site. Product quick-views allow customers to browse products without having to leave their current page. Mega menus, a newsletter popup window and product carousel is also included.

Kute Shop

Kute Shop is aimed at supermarket/general retailers and includes some very handy features. A daily deals module allows for creating limited-time promotions, while a variety of different content sliders encourage further exploration of your catalog.

The theme makes use of AJAX with an optimized toolbar and navigation. Plus, it’s easy to customize with Shopify’s drag-and-drop builder. Choose from multiple home, product and category page designs. Overall, Kute Shop is a very well-organized and easy to navigate theme.

Colora

Colora sports a look that will bring a nature-inspired feel to your online store. Features include AJAX filtered navigation, mega menus, a blog module, product/category slider and a daily deals module.

You’ll also find four home page layouts, a featured products slider, wish list, product quick-views and the ability to display items in a grid or list view. The look is quite attractive and fits well for shops promoting a natural lifestyle. It’s built to take advantage of large photos.

Mega Shop

Mega Shop works with Shopify’s drag-and-drop builder to let you easily add and move page sections to the desired spot. The theme includes lots of useful features like displaying announcement text, zooming in on images, product quick-views, tabbed content and a newsletter signup form. Also included are sliders for displaying products and brand logos.

Templates for categories and products can easily be customized through the admin. There are six home page layouts to choose from – each with a different specialty. Mega Shop is a clean, convenient and user-friendly package.

Movic

Movic lets you show off your products in style. Its’ must-have feature is “Lookbooks”, which let shopkeepers put together highly-visual product collections. They consist of a photo with one or more hotspots that, when hovered or touched reveal the related product.

While intended for fashion, it could easily be used for other areas like home décor. You’ll also find six home page designs, multiple header styles, product hover and quick-view, along with AJAX layered navigation. The available looks are very modern and make nice use of subtle effects to create a high-class shop.

Kids Store

Kids Store focuses on children’s fashion, but could also be repurposed for a variety of kid-related shops. Navigation is really well-thought-out, with great effects and five different mega menu styles included.

Also in the mix is AJAX product filtering, product quick-views, image zooming, a product carousel and a wish list. This theme will certainly brighten up your Shopify store while bringing attention to your products.

Jewellery

Jewellery ups the ante with a very high-end look. The fantastic grid layout on the home page is both functional and attractive. The use of hover effects brings a level of excitement to images.

The theme features multiple mega menu and header styles, AJAX product filtering, a wish list, product quick-view and image zoom. It’s a very nice choice for those looking to appeal to an upscale audience.

Ap Travel Gear

Ap Travel Gear brings big features to any outdoor or travel related shop. Choose from five home page styles – each featuring an attractive full-width slideshow with a variety of clean-cut grid layouts beneath.

Also included are mega menus for easy navigation and product variant color swatches. Other conveniences like product quick-view and AJAX product filtering are also in the box. The theme supports Shopify’s drag-and-drop builder, so customization is easy.

Sell in Style

Part of the beauty of Shopify is that you don’t need to gather various components in order to create a beautiful, user-friendly and successful store. Simply pick a theme and start building. All the features you need are right there, waiting for you to take advantage.

The themes featured above will help you achieve the look and functionality you’ve always wanted for both desktop and mobile customers. Having those two items crossed off your to-do list means that you can focus on what you do best: Running your store.

You might like: Shopify vs WooCommerce.

Source File:

Navigation is the key to a good user experience (UX). Users rely on intuitive digital navigation to locate helpful information, explore a brand’s story, and make purchasing decisions.

Confusing navigation can be enough to make a user bounce or exit. As UX experts learn more about how consumers engage with digital content, the number of ways designers mix and match navigation elements has grown. Choosing the right navigation setup for your mobile and desktop sites can transform your UX and boost business.

Consistency is King

If there is one thing that all navigation experts agree on, it’s the importance of consistency. Navigation needs to be consistent across the site and available on every page.

An inconsistent navigation menu leads to confusion. Users should not have to search for hidden navigation menus or try too hard to find a desired page. No matter what type of navigation setup you choose, you must prioritize consistency. Do this by focusing on a few main aspects:

1. The menu should be present on every page. Don’t leave users stranded on a page with no way out. The menu should be available on every single page within your website. If menu options have multiple levels, leave breadcrumbs so visitors can see the hierarchy of where they are on the site. Breadcrumbs are particularly important when users find the page through an external source.
2. Make each menu item react the same way. If the About tab drops down into a list of different choices, so should the other tabs. If one is a link to a landing page, make the others links as well. Each item in the navigation menu should react the same way to a user’s touch (or click).
3. Elements should be intuitive. There are certain website design elements that users have come to connect with a meaning. Placing an arrow by a menu item, for example, typically means there is a drop-down list that goes with the item. Create elements that help users know what to expect from navigation, and keep them the same throughout your site.

The Nielsen Norman Group states that recognition is easier than recall when it comes to memory. The brain relies on cues to activate the memory and retrieve information.

Make navigation easy for site visitors by allowing them to depend on recognition rather than recall to get around. The more consistent you are, the better visitors will recognize the meaning behind each element on your site. This will lead to faster all-around website browsing – and happier users.

Clear, Concise Labels

The navigation menu is not the place to get clever with your content. Users rely on the menu to make their way around your website. The purpose of the menu is to provide direction. It does not need to entertain or shock site visitors.

Keep menu labels simple, clear, and concise. Most websites use the same one-word labels for a reason. Users are familiar with options like Home, Products, About, Blog, and Contact. They know what the labels mean and what to expect when they choose an option.

Alternatives to the Hamburger Menu

Remember the great hamburger menu debate of 2014 for mobile site design? It’s ongoing, with modern website designers coming down on either side of the issue.

Many mobile websites still use the trusty hamburger, because this is what most mobile users look for. The “hamburger” is the menu icon that consists of three stacked horizontal lines. Designers initially used it because it conserves space on smaller mobile screens. Many designers today are trying alternatives to the hamburger, such as:

• Tabs
• Scrollable navigation
• Bottom navigation
• “Show More” options
• Inline list with headers
• Segmented control

Alternatives to the hamburger menu have had great success on many sites, especially those with a small number of options. The consensus among many designers is that if you can show navigation, show it.

Scrollable Navigation Menu Example

Sometimes this isn’t possible due to smaller mobile screens or several menu options. In these cases, progressive disclosure is acceptable. Your menu choice will depend on the amount of content you need to squeeze in and the goals for the site. An older audience, for example, may appreciate a permanently visible menu rather than the hamburger. Try different styles to see if one increases revenue.

Show More Options Example

Easy-to-Find Search Bars

Designing a functional menu involves more than just clarity and consistency – it’s about maximizing the usability of your site.

The YouTube Search Bar

One feature that can improve usability is the search icon (typically a magnifying glass). If users look for the search bar, they are already lost enough to need a direct search feature. Don’t make matters worse by hiding the search option – or leaving it out altogether.

The New York Times Search Bar

The search bar gives users a way out when they’re lost, or a more direct route to information for users with specific tasks in mind. Taking away the search bar can result in frustrated visitors who decide to look elsewhere instead of scouring your site for what they want.

Put the search bar somewhere clearly visible from every page. Most users look to the top right-hand corner for the search option, or at least somewhere close to the menu.

The Carousel Menu

Carousel menus are becoming more popular on blog-type sites and those that publish regular updates and news stories.

The “carousel” refers to a menu at the top of the page that shows the most recent articles the site has published. Many news sites and blogs use thumbnail images in the carousel to draw the eye and make it easier to select an article.

The Vogue Carousel Menu

The carousel tab also has the title of the article, and/or a brief description of what’s inside. It basically serves as a slideshow with clickable links for users to browse through easily. Carousel menus are great for showing off the latest content, and for keeping users on your site with a range of other interesting articles they may want to read in plain site.

Mega Menus

Another trend sweeping navigation design is the mega menu. As the name implies, this menu is plus-sized, taking up the page vertically and horizontally. These menus became popular among magazine-style blogs, but more brands are using them to make a statement with their menus.

The mega menu is ideal for a site with multiple levels of navigation. Instead of confusing users with a dozen drop-downs, expand the menu across half the page and layout the options clearly, using images and thumbnails if desired.

The mega menu is also great for sites that frequently post articles because the designer can use different columns for recent stories and related links.

Mega Menu Example

Fixed Navigation Bars

The infinite scroll style website became popular thanks to social media and mobile sites. Pioneers like Facebook use the format to allow readers to scroll infinitely, constantly uploading new information every time the user reaches the bottom of the page.

Scrolling is also easy to do with your thumbs, making it ideal for mobile users. With this website style came an issue with navigation – should it stay at the top of the page or somehow remain visible? The answer came with a fixed navigation menu.

Fixed Navigation Example

Fixed navigation menus remain in place when a user scrolls down the page. This type of menu is also called sticky navigation, and appears most common as a top navigation bar.

The menu is always present for the user to change pages. Facebook uses this format to allow users to view their profiles or check notifications in the midst of scrolling through their newsfeeds. The infinite scroll with a fixed navigation bar may be appropriate if your website has a social feel, or if the site deals with a lot of data.

There is no question that a site’s navigation affects the user experience. Will users have a positive experience, or a negative one? Optimizing your navigation setup using the latest trends for mobile and desktop design can lead to a better all-around UX – and better business success. Consider updating your website to include some of the newest site navigation best practices.

Source File:

As a tool, Adobe After Effects can provide excellent value and resource to web designers. The ways in which it can be used to improve a website are seemingly endless.

Many designers use it to create animated typography, loading graphics, icon transitions, mobile user interface mockups, illustrations, and more.

A major upside to After Effects is its vast library of high-quality templates across the web, many of which are free to download and use as you please.

In this article we are going to round up a handpicked selection of the very best free Adobe After Effects templates for you to use in your next web design project.

Free After Effects Transitions

This stunning selection of transitions by Basti includes a range of effects, perfect for loading animations and presenting content.

Loader After Effects Freebie

This simple folding effect is ideal for use as a loader on minimal, clean website designs.

inFullMobile Icons Freebie

These beautifully intricate icons are fully animated to an exceptionally high standard. They are perfect for any landing page or portfolio content section.

Checkbox

These subtle checkbox animations for After Effects are great for including in presentation mockups and website graphics, as well as tutorials and onboardings.

AE Send Mail

Another exceptional animated illustration, this time by PixFlow. The vibrant colors offer beautiful contrast and the graphic itself would fit excellently at the bottom of almost any website.

Free Touch Indicators

These touch indicators are perfect for including in portfolio user interface mockups, onboarding flows, and tutorials, to help the user visualise how an interface works.

Menu / Close Button

The hamburger to close icon transition is becoming more and more well known and intuitive for users. This free Ae file offers one of the more interesting and creative approaches to such an animation.

Personal Voice Assistant

Housing similar effects to Siri, this voice assistant animation is visually impressive and offers a range of uses including for loading, progress indicators, music playing status, and visual background effects.

Gilbert Free Animated Typeface

Gilbert is a highly refined and top quality animated typeface. Its animation qualities and colorful design make it perfect for portfolio and landing page hero sections.

Free Tapered Stroke Preset for After Effects

This tapered stroke preset for Ae is beautiful in combination with a handwritten style font. It would be particularly effective for use where handwriting is present, for example signatures or letter-style sections.

Source File: