Nadine User Guide

Nadine User Guide

Nadine is a clean, stylish, minimalist Shopify theme best for any type of store. Built for Shopify 2.0, makes it easier to create unique pages with sections. Use drag-and-drop sections and blocks to create pages without special coding.

Thank you for purchasing our theme. We have prepare this documentation to help you implement this theme in your Shopify store. If you can't find information you need in this user guide, you should contact our support team.

Installation

To install Nadine theme, follow these steps.

  1. After purchasing this theme from templatemonster you can download the package.
  2. Extract the package and find nadine-theme-x.x.x.zip. (x.x.x is the theme version)
  3. Upload the zip file into your shopify online store.

Theme Settings

In Theme settings you will find general settings like colors, typography, social media, search and more. Any changes made in this settings will affected your entire online store.

Customize header color
Go to theme settings > colors > header. You can change the header background color and text color.

Set header sticky
You can set the header sticky in theme settings > header

Announcement Bar

Announcement bar can be used to show country and currency selector, social media icons, and announcements text with link like the following.

You can add more than one announcement text and every announcement text will be shown one at a time. More like a slider. You can set this time duration in the announcement bar settings as you can see in this image below

This theme supports both a standard 3 tier drop-down navigation and full-width mega menu. The mega menu navigation has three type of layout that you can choose in theme navigation settings.

How to show mega menu

First, you need to create a menu in your store navigation. Create menu item with submenu items.
Go to theme navigation settings and select your menu.

To add a menu layout, add a block and select a menu style.

In every menu layout block you need to input a menu item name to activate the block. Make sure the menu item name is right.

Menu layout 1

This style has 3 columns for menu item and 1 column for products from featured  collection.

Menu Layout 2
This layout provides 3 columns for selected collections. In this layout, you can show 3 collections.

Menu Layout 3
This layout provides spaces for custom images with link.

Products

You can access product settings in Theme settings > product. This product settings has three sub settings, Product card, Label, and Product variant.

Product Card

The product card in this theme can be customized with the following settings.

  • Image ratio (options: adapt, square, portrait)
    Allows you to select image ratio. For better result chose ratio same as your product image ratio.
  • Show "Add to cart" button
    When user hover a product card, this button will be shown on top of the image.
  • Show Quickview button
    This button will be shown when user hover a product card
  • Show second image on hover
    If a product has more than 1 image, the second image will be visible when user hover a product card
  • Show vendor
    Show the product vendor or brand with link to a page that contains products with same vendor or brand
  • Show price
    Shows the product price

Label

A product card can have 3 labels, New in, Sold out, and Sale. These labels will be shown based on the product state or attributes like the following.

New in
New in label can be shown based on product tag, collection, or date. You need to chose which attribute that will define a product as a 'New In'. By default, product in collection 'New In' will have label 'New In'.

Sold out
Product has zero quantity left

Sale
Product price is lower than "compare at price"

Product Variant

Product variant can be shown in dropdown or swatches.

How to use product swatch
To activate swatches,  select 'swatches' in variant picker. By default, swatch will be applied to product option color or colour, but you can replace it with other names. Be sure to type in the exact name, as these are case sensitive and need to match, otherwise, it won’t detect the variant and won’t show the swatches.


You can customize the shape of swatches and how swatches represent the variant by choosing the swatch source. There are three source you can choose from the settings, standard color, variant image, and custom uploaded image.

Standard color
Swatch will be shown based on CSS colors. For example, variant name red will use CSS color red(#FF0000). Learn more about CSS colors.

Variant image
You need to select the variant image manually from your product images

Custom uploaded image
You can upload your own image for the swatch. Go to settings > files to upload your custom image.


Make sure the uploaded image name has same name as variant name. For example, variant Black White requires an image named black-white.png. Recommended size is 100px x 100px and it must be a png image.

In the theme settings, you can customize text and background color of the footer like the following. Go to Theme settings > Colors > Footer

Footer section has 3 types of block that you can add

  • Menu
    You can use this block to show menus on your footer. First, you need to create a menu in your store navigation settings. This block only support one-level menu.
  • About Store
    In this block, you can add some description about your store or any information with heading and text. Beside that, this block can show social media icons as well if you enable it.
  • Newsletter
    This block provides email subscription form you can use to capture customer email.