Documentation for Nozama

ATTENTION: This documentation is about the new version of Nozama, if you are using the legacy version please visit its documentation page here

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

  • PHP version 7.4 or greater.
  • MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
  • HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin

Then upload it through your Dashboard → Plugins → Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install it in order to get the whole functionality.

GutenBee

GutenBee is a collection of elegant WordPress blocks enhancing your editing experience in the block editor and vastly extending the potential of the new editor experience.

If you want to replicate our demo website you need to install it. Simply visit Plugins → Add new and search for “GutenBee”. Click on Install Now and then Activate it.

WooCommerce

Nozama is a WooCommerce theme by default. Sample content includes custom products and WooCommerce pages to get your started.
Please have a look here for a quick guide on how to install WooCommerce.

Contact Form 7 (Optional)

Contact Form 7 is a popular contact form plugin, installing it will ensure the contact form will appear when importing sample content. You can use any other third party plugin you wish though.

Theme installation

Installing the theme is a very simple process. Go to your WordPress dashboard → Appearance → Themes → Add new and upload the zip file. Once uploaded just click on the Activate button. That’s it! You can now start creating pages. You can check our guide here for a more detailed guide.

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that an exact replica of our demo website will be imported in your WordPress installation. Now all you have to do is simply replace the content of these pages with your content.

Here’s how to do it:

  • In your WordPress dashboard visit Appearance → Theme Options → Sample Content.
  • Click Install and then Activate for each of the required plugins.
  • Click the Get Started button and in the next screen the Import Demo Data button.
Please note: Due to the nature of the import mechanism some links may link back to our demo website. If you are not sure how to update / change these links simply get in touch and we’ll help you out.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

  • Main post thumbnail: 960x640px
  • Item: 615x 410px
  • Large Item: 1290x860px
  • Article Media: 510x510px
  • Mini-cart items: 160x160px
Please note: If for any reason you want to change the dimensions of any of the predefined image sizes you have to use a plugin. This guide describes this process.
Please note: All image sizes are the minimum recommended, adding larger image sizes will result in cropping them to fit these sizes. In order to alter WooCommerce sizes check this guide

Setting up the basic sections of your website

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the header and the footer.

As you can see in our demo website all pages have a Transparent page header featuring a background image and 3 main components:

1. Top Bar
2. Logo
3. Main Menu
4. Header layout
5. Ajax search

Top Bar

In your WordPress dashboard click on Appearance → Customize → Top Bar. Here you have 3 content areas available for simple text or shortcodes. Please refer to the shortcodes section below for information regarding the shortcodes available.

Nozama top bar has the left content area filled with some custom HTML, while the right content area has the language changer shortcode. You will need to have Polylang or WPML installed for this shortcode to work.

In the same location you can edit your Top bar colors and your site general appearance.

The recommended maximum width of your logo is 122px (or 244px is you want a retina ready logo) while you can use any height you want. To upload your logo visit the Customizer through your WordPress dashboard → Appearance → Customize → Site Identity. As you can see you can upload 2 logos. In this case we need to use the Alternative Logo upload field because we are currently using a Transparent header as set in the Customizer → Header → Layout → Header Type option.

Nozama has two menu locations, one is reserved as the main navigation menu while the second is complimentary for the WooCommerce  Account page. In your WordPress dashboard click on Appearance → Menus. In the Menu structure section enter a Menu name (It can be anything you like) and click on the Create Menu button. From the Add menu items section on the left select the pages that you want to add in your menu and click on the Add to Menu button. Now all you have to do is assign this menu to a Display location. In the Menu Settings section click on the Main Menu checkbox. Your navigation menu should be now visible on your website.

Custom button in the menu

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance→Menus for the item you want. First enable this section from Screen Options.

Before you start working with your menus check this article

Creating mega menus

This theme provides a multicolumn menu feature. If you need to enable two columns in your menu you can navigate to Appearance→Menus and add a new item with the CSS class mega-menu. You can enable the CSS classes box from Screen Options. For more info have a look this article.

Now you can create a menu structure like this as a child to your mega menu item.

Icons and alignment in the menu

Notice that there is a special menu item, you can link to a special product category you wish or a page.

Adding the menu-item-first class along with a class icon like ignition-icons ignition-icons-star for example will keep the menu item align left and add a icon to it. Also, to move a menu item in the end you can use this menu-item-pull class.

Check all icons here

You can add a class in any menu item from Appearance→Menus (You must have the Class field enabled from Screen Options) or from Appearance→Customize→Menus. 

You can enable or disable Ajax search from Appearance→Customize→Header→AJAX Product Search
Also you can select what content of the product you need to render when searching.

Header Background image

You can set a common background image for every page on your website through Appearance → Customize → Page title. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary text color and the secondary text color.

Let’s see an example. Create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. As you can see we have successfully overridden the image set in the Customizer settings.

Please note: The purpose of the Transparent header option is to have your main header components (Top bar, Logo & Main Menu) on top of a background image or background color which means that you have to set on in the Customize → Page title → Color section.

General Site Options

You can change your general site options globally from Appearance→Customize→Site Options. Under Layout section you can control your Site and blog layout, as well as the main width of your content and the ratio between sidebar and content. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select from a full list of Google Fonts for each element in mobile mobile/desktop views, or you can just disable Google Fonts altogether.

Header Layout

You can change your header from Appearance→Customize→Header. There under the Layout tab you can select if you want to have a sticky menu or your header over the content (transparent).

Under the Content tab you can have this set of shortcodes:

[ignition-icon-link icon=”user” link=”https://www.cssigniter.com/demos/nozama/my-account/”][ignition-minicart-button]

which will help you create the same layout as the demo. These are both shortcodes included in the Ignition framework

The footer area is a standard 4-column widgetized area that can be populated with widgets through Appearance → Widgets. You can also remove the credits at the very bottom of this area by visiting Appearance → Customize → Footer → Content section. You can also adjust the colors by setting a background color & image and also modify the border, title and text colors.

Under the Content (Customize→Footer) area you can add your copyright information and use any of the shortcodes included in the Ignition framework

You can select to disable the default theme Lightbox from Appearance→Utilities→Lightbox

Block editor Dark Mode

When you have a dark background it’s quite hard to read text when editing the block editor. Under Appearance→Utilities→Block Editor you can enable this feature to help you edit your content better.

Weather

You can choose to have the weather appear using the weather shortcode anywhere inside your installation. First you will need to setup the weather from Utilities→Weather. You will need to create an API key first here

Creating a new Product

Go to WooCommerce → Products → Add Product then enter a product Title and Description.

Go to the Product Data panel and select a Simple product with a price and a sale price as shown below:

Set your Product featured image and image galleries.

Save the Product and you can start selling!

You can find a full guide on how to create complex products with attributes and variations here

Homepage

Create a new page from Pages→Add New. Under Page attributes leave the template to Full Width Boxed. Then under Page Settings check the Remove top/bottom content padding option and select to hide Show Normal Page Title, Show Normal Page Subtitle and breadcrumbs.

Start by adding a shortcode block with your MaxSlider shortcode inside. This guide will help you create sliders using  MaxSlider. Next add a GutenBee Container with one columns and a GutenBee header inside following another GutenBee Container with two Columns. First column will have a GutenBee Banner with height set to 480px and a background image under block settings.

Inside you will have a GutenBee Heading following a GutenBee paragraph with a GutenBee button. In the second column we have 2 GutenBee Banners with height set to 225px. Inside again both these we have a GutenBee Heading with a GutenBee paragraph and a GutenBee button. All these Banner blocks have a padding of 30px and a border radius of 3px. To finish the first hero section of the homepage, add after the initial column a GutenBee banner with 225px set as its height. Again in the banner we will need to add a GutenBee Heading with a GutenBee paragraph and a GutenBee button.

Next we have a GutenBee container with one column with its width set to 100%. Inside you can add a GutenBee heading and a GutenBee paragraph along with a Products by Category block. This block has 4 columns and 2 rows with all content options active.

Following, we have a GutenBee Container with two columns. Each column has a Gutenbee Banner block has a height of 480px and default alignment settings. Inside you can add a GutenBee Heading and GutenBee paragraph with a GutenBee button. While in this case GutenBee button is responsible for navigation, you can select all the Banner block to be clickable:

After this section, add a GutenBee Container with one GutenBee Column and inside a GutenBee Header with a GutenBee paragraph. Then add a GutenBee Post Types block with the Slideshow Style selected and the products as post type.

Set columns to 4 and add this custom class under the Advanced tab:

is-style-ignition-nozama-post-types-slideshow

Following that, add a GutenBee Banner with a GutenBee Heading, a GutenBee paragraph and a GutenBee button inside. Select a background image unde the Appearance tab and set the height to 225px. Finally Add a GutenBee Post Types block with posts selected as the post type, and the Default style.

Customer Support

Support page is a simple contact page, with your store details and a simple Contact Form 7 form inside. Create a new page from Pages→Add New. Under Page attributes leave the template to Default. Then a add GutenBee Container with 2 columns inside. First will have some GutenBee headings and GutenBee paragraphs with your content while the second one will have a shortcode block with your Contact Form 7 shortcode inside.

FAQ Page

Create a new Page from Pages→Add New. Under Page attributes leave the template to Full Width Boxed. Select to hide Show Normal Page Title, Show Normal Page Subtitle and breadcrumbs.

Add multiple GutenBee containers with two columns. Set the first column to have 33,3333% in width and add a GutenBee heading inside. In the other column set a GutenBee Accordion block with your content inside.

Today’s deals page

Create a new page from Pages→Add New. Under Page attributes leave the template to Full Width Boxed.

Set a new GutenBee Container and add an On Sale Products block with a custom category and any rows and columns you wish.

Blog page

This is you main blog page. You can Create a new page and set it as your blog page under Settings→Reading. You can customize it from Appearance→Customize→Blog under the Archive section.

Shop Elements

Product Categories

Create a new page with the Full width boxed page template selected under page attributes. Then Hide both the page title and page subtitle from Page settings.

Add a GutenBee Container block with two columns and inside the first column add a GutenBee Heading and a GutenBee paragraph. Add one more GutenBee container block with one column this time and inside a shortcode block with

[product_categories]

shortcode inside. This is a shortcode included in WooCommerce.

Products Featured

Create a new page with the Full width boxed page template selected under page attributes. Then Hide both the page title and page subtitle from Page settings.

Add a GutenBee Container block with two columns and inside the first column add a GutenBee Heading and a GutenBee paragraph. Add one more GutenBee container block with one column this time and inside a shortcode block with

[featured_products per_page=”8″ columns=”4″ orderby=”title” order=”” title=””]

Products by ID

Create a new page with the Full width boxed page template selected under page attributes. Then Hide both the page title and page subtitle from Page settings.

Add a GutenBee Container block with two columns and inside the first column add a GutenBee Heading and a GutenBee paragraph. Add one more GutenBee container block with one column this time and inside a shortcode block with

[products columns=”4″ orderby=”title” order=”” title=”” ids=”160,161,162,163,164,165,166,167″]

This is the default WooCommerce products shortcode.

Products Best Sellers

Create a new page with the Full width boxed page template selected under page attributes. Then Hide both the page title and page subtitle from Page settings.

Add a GutenBee Container block with two columns and inside the first column add a GutenBee Heading and a GutenBee paragraph. Add one more GutenBee container block with one column this time and inside a shortcode block with

[best_selling_products per_page=”12″ columns=”4″ title=””]

Products on Sale

Create a new page with the Full width boxed page template selected under page attributes. Then Hide both the page title and page subtitle from Page settings.

Add a GutenBee Container block with two columns and inside the first column add a GutenBee Heading and a GutenBee paragraph. Add one more GutenBee container block with one column this time and inside a shortcode block with

[sale_products per_page=”8″ columns=”4″ orderby=”” order=”” title=””]

Shortcodes

[ignition-custom-menu name=”your menu name”]
Create a Custom menu from Appearance→Menus, then use this shortcode to display it in any location you want. Primary used to display Social icons in the top bar.

  • Create New Menu instead from Appearance→Customize→Menus.
  • To add a social media link to the menu, click + Add Items.
  • Next, select the Custom Links menu item type.
  • Add the address for one of your social media profiles in the URL field. For example, if the link to your Facebook profile is https://www.facebook.com/cssigniter, you would copy that into the URL field.
  • You can also enter a name for the social media profile in the Link Text field. Once you’re ready, click Add to Menu.
  • Repeat the above steps until all the social media profiles you wish to use have been added to the menu.
  • Finally, click Publish.

[ignition-site-search]
Simple site search field, you can use it under any content area in the Customizer. Using the

[ignition-site-search post_type=”product”]

will help you search specifically products. This is quite helpful if you have an online Shop.

[ignition-date]
Supported attributes are:

  • format (optional): The date format, by default follows the one set under Settings → General.

Use this shortcode in any Customizer content area to display today’s date.

[ignition-current-weather id=”your-location-id(optional)”]
Supported attributes are:

  • id (optional): The id of the location to display the weather from, default is the one set under the Customizer Weather options.
  • units (optional): C or F units to display.

This will display the weather inside any content area in Customizer. You will need to setup the API first from Customize→Utilities→Weather. The location ID number can be found by visiting OpenWeatherMap.org and searching for your city. Leave this blank and the default ID from Customize→Utilities→Weather will appear.

[ignition-minicart-button]
This shortcode will display the minicart. Use it under Customize→Top Bar in any content field you wish.

[ignition-language-switcher]
Supported attributes are:

  • display (optional): accepted values are flags, text or both
  • type (optional): accepted values are dropdown or menu
  • untranslated (optional): accepted values are hide or home

We support WPML and Polylang. You can either use their default language switcher or our shortcode one.

[ignition-wc-login]

If you have an Account page selected this shortcode will generate a link to that page. You will need to have WooCommerce installed and under WooCommerce→Settings→Accounts & Privacy tab the Allow customers to create an account during checkout option checked.

[ignition-icon-link icon=”user” link=”https://www.cssigniter.com/demos/nozama/my-account/”]

This shortcode will render and icon inside an anchor link.

Page templates

Theme provides several page templates you can select from Page Attributes. Depending on your scenario you can select:

  • Default template: This is the main template, you can start building anything using this one
  • Content / Sidebar: This page will always have the sidebar on the right (Same as default page template)
  • Sidebar / Content: This page will have the content always on the left
  • Full width: This will make your page Full width, covering from one side of the screen to another
  • Full width boxed: This will have the page Full width but inside the container scope. You can control the scope from Customize→Site Options→Layout options
  • Full width narrow: This is the same as Full width boxed, but it will add some padding making the content area a bit narrower

All pages have a generic set of options. These can be changed under the Page Settings section when editing each page.

  1. Remove top/bottom content padding: This will allow the content to have or not some extra padding from header and footer
  2. Disable featured image for this Page: You can select to hide the featured image in this single page. Featured image will appear in your listings though
  3. Header Type: Select transparent or opaque header type. You can control the color settings for the normal and transparent one from Customize→Header→Colors
  4. Show Page Title with Background: This will show or not the hero section with the page title and a background
  5. Show Normal Page Title: Hide or show the normal page title
  6. Show Normal Page Subtitle: Hide or show the normal page subtitle (if any)
  7. Show Breadcrumbs: Show or hide breadcrumbs for this page.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behaviour.

Excerpt in pages will always behave like a subtitle when the Page Title section is present.

WooCommerce

This theme supports WooCommerce, so you can create an eCommerce experience for your visitors.

Having WooCommerce installed is not mandatory to use the theme.

Shop page

Assign a Shop page

Before any other step you will need to create a new page from Pages→Add new and then select it as your Shop page.

Please have a look here how to setup your WooCommerce pages.

Customize the Shop page

You can control the Shop listing page and product categories from Customize→Woocommerce→Product Catalog. Here you can select whether you want to show categories as items in your shop and product category pages as well as the column and row number for each page.

You can also set a second image to appear when hovering over your product. The first – default one will be the featured image, while the second will be the first image item from your product gallery.

Here you can also modify the shop layout to have a sidebar, and the position of that sidebar in relation to the content.

Single product

Under Customize→Woocommerce→Single Product you can control your Product image layout.

Product Categories

Product categories and tags work in much the same way as normal categories and tags you have when writing posts in WordPress. They can be created, edited, and selected at any time. This can be done when you first create a product or come back and edit it or the category/tag specifically. You can also control your thumbnail icon for that category as well as the hero page title background image.

Setting a Product category as a menu item is easy. Navigate to Appearance→Menus and enable Product Categories as menu items from Screen Options

Widget areas

The theme provides special widget areas for your Blog posts and archives, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages or posts or products.

Creating Global Sections

Global Sections are small layout sections you can attach automatically in any predefined location (hook) you want. We are using this method to show the main featured content area in our demo frontpage, but feel free to use it depending on your needs. You can see a visual map of the available theme hooks by appending ?show_hooks in any URL. Under Condition tab you can also include/exclude the pages you want this section to appear.

Also you can create custom shortcode from a Global Section that you can add inside your post/page or in a widget.

Nozama’s Global Newsletter Section

Nozama has one Global section (while you can add as many as you wish) which mimics a possible Newsletter scenario. We are using a simple contact form 7 shortcode, while you can use a Mailchimp HTML code or any third party plugin. Create a New Global section from Global Section→Add New. Then add a GutenBee container with two columns and set Enable theme grid.

In the first column add a GutenBee Icon Box with the mail icon selected and a title along with a subtitle. In the second one add a Contact Form 7 form or your custom HTML from Mailchimp.

Set the Global Section Location to be before footer and set its priority to 10. Then select it to appear globally.

Support

If you need help during the initial installation and setup of this theme, feel free to get in touch and we will be right there for you within 24 hours to help

Theme installation service

If time is of essence, we offer a theme installation fee for an one-off low fee of $69. Contact us here

Use the coupon code WORDPRESS and save 30% OFF! Buy Now