Shopify is insanely getting popularity around the world, and when it comes to building the storefront, we look for the Shopify theme that could fulfill our needs. Merchants need to cover many things from the color scheme that matches the brand and products or smooth and flawless customers experience. Shopify theme development process also involves following the Shopify LIQUID HTML coding standard. One of the latest changes was related to Shopify sections which would bring better UX during Shopify store building process. SellerSmith team took seriously on solving merchant’s problems and excited to introduce you Nivellia - Shopify section based theme coming with 03 default styles.


Nivellia Shopify theme has been built with 03 color schemes naming as Black, Nudy, and Neon. Each color scheme variation will match certain product niches giving Shopify experts more freedom to create the website for a client. SellerSmith team tried not to design in the “niche way,” so they avoid narrowing the customer's market. The functionality across 03 Shopify themes styles are the same: so it will save your time on “learning curve.” Designing Shopify theme is also good to make the boundary with Shopify apps. That also means that each built - in theme feature is considered as the part of the theme not related to Shopify Apps.

 

Nivellia | Black stye

nivellia-shopify-theme-black-style

Behind that layout you can see following section elements:

  • Slideshow
  • Masonry content
  • Custom content
  • Featured collection
  • Logo list

 

nivellia-shopify-theme-black-style-sections 

Nivellia | Neon style

nivellia-shopify-theme-neon-style

To execute this layout in addition to the previous layout following Shopify sections have been used:

  • Slideshow
  • Featured collection
  • Masonry content
  • Custom Content with Instagram feed

 

nivellia-shopify-theme-neon-style-sections

Nivellia | Nudy style

nivellia-shopify-theme-nudy-style

The Nivellia layout is a quite flexible, in the case with Nudy style following sections have been used:

  • Slideshow
  • Featured collection
  • Masonry content
  • Custom content
  • Text with icon

 

nivellia-shopify-theme-nudy-style-sections

Thanks to introduction Shopify sections in late October 2016, as you can see SellerSmith theme has section support, so new Shopify users can easily customize the shop storefront effortlessly. Since Nivellia has 03 styles, you can quickly change to each other via “Change theme style.”

The overall theme layout

The overall layout is divided with 04 parts including Top bar, header, body and footer. Special attention deserve the Top bar area because you can place custom menu, currency conversion or custom HTML. The latest one is especially in need if your client want a deep customization.

the overall theme layout

Shopify Sections

As mentioned earlier Shopify sections deserve special attention because it gives the full freedom to web designers to edit the theme layout. We’ll outline some section structure so you get better understanding Nivellia possibilities:

  • Blog
    • Blog posts
  • Collection
    • Collection list
    • Featured collection
  • Content
    • Text with icon
  • Image
    • Logo list
    • Slideshow
  • Product
    • Product tabs
  • Advanced Layout
    • Custom content
    • Masonry content

 

Shopify Sections

Advanced Section layout: Custom & Masonry content

These 2 section types are quite flexible and gives web designers more freedom to customize the theme. Let’s take a look at the Custom Content section.

Inside the Custom content section you can find 8 other container elements. It includes Text, Image, Video, Product, Products, Collection, Instagram Feed and Custom HTML. Each of those element you can set “container width” which will layout on the row perfectly.

Advanced Section layout custom content

Now, let’s go further with Masonry content section element. The image below shows you the real implementation of Masonry layout on the home page. As the masonry element, you can use Image, Product or Custom Content. The custom content is custom HTML, so you can put whatever your imagination comes with storefront building.

Masonry content section element 

Product page size chart

When the customer is close to buying the product and land on the product page, there are the frequent needs in defining the product size. Nivellia theme designed in the way that there is the text link called “Size Guide” and modal window appear when it’s activated.

Product page size chart 01 

When you click on “Size chart” text link the modal window will be opened.

Product page size chart modal window 

The content of the Size chart might be any Shopify pages. It’s well placed via the Shopify Customizer settings. You can see how intuitively it’s organized on the Product Page. You can see how it’s implemented via live demo page of product with Size chart.

product size chart setting 

 

Navigation: Mega menu implementation

The megamenu is the part of Shopify themes and in the case of Nivellia it’s built in the theme itself.

mega menu in shopify theme 

To build the menu above is really simple and here is how it looks indeed. SellerSmith team used the best

mega menu back-end 

 

Product Quick View

One important thing for bringing better UX and customer experience is allowing customers to have a product quick view on the page. In the case of Nivellia theme is part of a Shopify theme which tightly connected with Product Collection area.

product quick view 

Last words

Nivellia Shopify theme is close to the official public release. We’ll be spending a couple of weeks to test drive this babe and fix possible issues with compatibility of 3rd party Shopify apps. If you wish to get notified about the release or want to get a free copy to check whether it fits your next ecommerce store feel free to subscribe below.

Notify me Nivellia theme

 

Now, let’s explore how Nivellia behave in reality and explore demos both on mobile and desktop.

Nivellia Shopify theme - Black Style   Nivellia Shopify theme - Neon Style  Nivellia Shopify theme - Nudy Style

Live demo Desktop View: Black Style - Neon Style - Nudy Style

Live demo Mobile View: Black Style - Neon Style - Nudy Style