Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

TIP: More info on how to download and install a theme here.

Installing WooCommerce

To enable eCommerce functionality for your website you need to install and activate the WooCommerce plugin by WooThemes. You can download the plugin free of charge from the WordPress Plugin Repository.

Go to Plugins > Add New and search for WooCommerce. Once the results come back, click the Install Now button.

wc_install

Once the installation is finished, click the Activate button to activate the plugin.

wc_activate

For detailed installation and usage instructions please refer to the plugin’s documentation.

Once you have installed and activated the WooCommerce plugin please install its pages by clicking on the button that WooCommerce provides on its banner. This will likely create a duplicate of some pages along with the pages install by the sample content but its a needed step. You can delete the old pages that came with the sample content or use them instead by going to WooCommerce > Settings > Pages and assign them anew.

Image Sizes

The minimum recommended image sizes for Neto are:

  • Post thumbnail: 750x500px
  • Item thumbnail (used on widgets): 540x730px
  • Fullwidth featured image: 1140x500px
  • Hero image: 1920x300px
  • About me image: 360x220px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.

Importing sample content

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Neto by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the neto_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Adding a new post

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. add a category and/or tag to the post,
  5. once finished click the Publish button to publish the post.

new_post

Creating a page for your posts

To setup your blog page you can go to Pages > Add New and create a page named Blog. Then navigate to Settings > Reading and set that page as your posts page.

settings_reading

Now you can add that page to your menu to give your visitors easy access to all your posts.

Adding Products

Earlier we saw how we can install WooCommerce. Let’s take a brief look at creating products. Start by going to Products > Add Product.

new_product

  1. First we need to fill in the product title,
  2. next we will add the product’s description,
  3. click Set Product Image to add the product’s featured image and Add product gallery images to upload additional photos for the product,
  4. add categories and tags to your product to make filtering easier,
  5. in the Product Data metabox you will fill all the required product info, such as price, inventory, tax and shipping information and more,
  6. in the Product Appearance metabox you can disable the zoom on product thumbnails and add a video to the product’s gallery if you have one,
  7. fill in a short product description and finally
  8. Publish the product.

This is a brief overview of adding products to your site, the product post type is a complex one, if you haven’t worked with it before please consider reading the official documentation on how to add and manage products here.

Setup the shop page

Once you install and activate WooCommerce all the default pages will be created, including the shop listing page. To make sure this was properly configured go to WooCommerce > Settings > Products > Display and check if the Shop page is selected in the Shop Page drop down.

wp_shop_page

If the drop down is empty, locate the Shop page and select it.  If you can’t find a page named Shop, just go to Pages > Add New create one and then set it as your shop page. Add this page to your menu to give your visitors access to the product listing.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

Creating menus

Neto offers three menu locations. The Main,  Footer. You can customize these menus any way you like to make navigation easier for your visitors. For info on how to create menus in WordPress, please have a look at our guide here.

Customizing the theme

All the theme’s options can be accessed via WordPress’ customizer. Navigate to Appearance > Customize and you will be presented with this panel.

neto_customizer

If you have used any theme from the WordPress.org theme directory you should be familiar with the usage of the customizer, if not you can read more about it here. Below we will take a look at the options each section offers.

Haeder

Under the header tab you can customize the its appearance. There are three layouts available, the Menu next to logo, the Centered menu and Centered logo ones. If you want a sticky header you can enable it by checking the Sticky Header box. Finally here you can toggle the various shop related tools, like the account/login/register link, the shopping cart icon and search icon.

Using this tab you can create new or modify existing menus. For more info on menu creation please check the Creating Menus section above.

Site Identity

Here is where you take care of your site’s branding. You can set a logo, the site’s title and tagline and add a site icon which will be used on browsers and as an app icon on mobile devices.

Layout Options

mavika_layoutoptions

In this tab you can modify the layouts of various pages on the site. You can globally toggle between a boxed or fullwidth layout, you can choose if you want a sidebar on your blog page and other listing pages. Additionally you can control the number of words on the automatic excerpt and toggle between numbered and previous/next pagination styles.

Post Listing Options

post_listing

In this tab you will all options related to the appearance of post listing pages, such as the category listing ones. You can toggle featured images and the category hero section on and off if you so desire. You can also select the category hero text color and background.

Posts Options

mavika-posts-options

As you might imagine, this tab helps you configure the layout of single posts. You can toggle the featured image, the categories, tags, comments, author box, post navigation and related posts. You can also modify the title of the related posts section.

WooCommerce

Shop

wc_shop

This tab allows you to customize the appearance of all shop listing pages. You can toggle the appearance of the hero section and set a hero text color and background. The shop’s layout can be customized by moving the sidebar to the left or right side of the products or even off-site. The number of columns and products on each listing page can also be customized here. You can also toggle WooCommerce’s breadcrumbs and select to show a second product image on hover. Finally you can set your shop to catalog mode which will disable the add to cart buttons and hide the prices.

Product

wc_product

Under this tab you can toggle various sections of the single product, such as review, up-sells, related products and social sharing buttons.

Colors

Global

This is the go to tab when you want to modify colors on your site. Here you can set a background image or color, a global page hero text color and background and modify the color of text, buttons and borders.

Header

Here you can modify the header image and background color. You can also change the navigation colors.

Footer

The footer strip’s background and text colors can be modified throug the footer color tab.

Sidebar

the last tab in the colors section allows you to change sidebar background color, text, link and border colors.

Typography Options

The typography options tab allows you to modify the size of all content headings, body text and widget titles and text. You can also set page, section and widget titles to be all uppercase.

Widgets

Through this tab you can access all the available theme sidebars and add widgets to them.

Social Networks

social_networks

Fill in the links to your social profiles and use them on the header bar or in any sidebar using the social icons widget.

footer_options

In this tab we can upload the credit cards icons to let people know which payment methods are accepted on your site. You can also toggle the reveal effect on the footer and the appearance of the Instagram carousel.

Static Front Page

static_front_page

Using this tab we can choose what gets displayed on the front page of our site. For example if we want to create a homepage using a page builder we will need to create a new page using the Page Builder template, name it home and set it as our Front Page above. The Posts Page is the page that will display our post listing, as discussed earlier in the post creation section.

Other

This tab contains the custom CSS box which allows you to add custom styling if you need it.

Custom Widgets

neto_widgets

Neto comes with thirteen custom built widgets to help you display your content optimally. Ten of these widgets are purpose built to be used on the theme’s Home page sidebar to create a widgetized homepage. They are all WooCommerce related, they will allow you to showcase specific products, products from a certain category, recent, top selling, best rated products and more.

Widgetized Homepage

To create a widgetized homepage you can create a new page and assign the Home page template to it from the page attributes panel on the right. Then under Customize > Widgets you can add any of the ten custom built home page widgets to the home page sidebar and create a unique front page for your online shop.

On the theme’s demo, Homepage V10 is a widgetized one. We have used the Theme – Best Selling Products to display 6 best sellers in a 3 column layout, the Theme – Sale Products to display 6 items on sale in a three column layout and the Theme – Recent Products to display 12 recent arrivals in a 4 column layout.

Shortcodes

All WooCommerce shortcodes are available to use, you can learn more about their usage here. Some of them have been modified by us to offer greater flexibility. We have added four custom attributes to some of the shortcodes. The attributes are:

  • title allows you to set a title for the content block
  • style which toggles between two available layouts, list and carousel, defaults to list if omitted
  • show_categories displays the product categories attached to a product accepts yes or no, defaults to yes
  • show_price displays the product’s price. Accepts yes or no, defaults to yes

The shortcodes affected are the following:

  • Product categoryall four custom attributes are available on this shortcode. Example:
    [product_category category="shirts" title="Our Shirts" style="carousel" show_categories="yes" show_price="no"]
  • Product categoriesthe title and style attributes are available on this shortcode. Example:
    [product_categories number="12" parent="0" title="Shop more!" style="list"]
  • Recent products: all four custom attributes are available on this shortcode. Example:
    [recent_products per_page="12" columns="4" title="New arrivals!" style"carousel" show_categories="yes" show_price="yes"]
  • Products: all four custom attributes are available on this shortcode. Example:
    [products ids="1, 2, 3, 4, 5" title="Check these out!" style="list" show_categories="no" show_price="no"]
  • Sale products: all four custom attributes are available on this shortcode. Example:
    [sale_products per_page="12" title="On Sale!" style="carousel" show_categories="no" show_price="yes"]
  • Best selling products: all four custom attributes are available on this shortcode. Example:
    [best_selling_products per_page="12" title="Best sellers!" style="list" show_categories="no" show_price="yes"]
  • Top rated productsall four custom attributes are available on this shortcode. Example:
    [top_rated_products per_page="12" title="Top Rated" style="list" show_categories="yes" show_price="no"]
  • Featured products: all four custom attributes are available on this shortcode. Example:
    [featured_products per_page="12" columns="4" title="Featured Products" style="carousel" show_categories="no" show_price="no"]
  • Product attribute: all four custom attributes are available on this shortcode. Example:
    [product_attribute attribute="color" filter="black" title="Black is in" style="list" show_categories="yes" show_price="no"]

The theme’s built in shortcodes can also be used with Elementor’s shortcode module.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Summer Special: Get 30% off! Coupon code: SUMMERCLUB - Join Today!