Copyright Globo 2018

Mantis - Retina Responsive Shopify Theme

Shopify Version

Thank you for purchasing my theme. This is some basics on installing, configuring and customizing the the theme.

SEND US YOUR FEEDBACK!
We have checked very carefully before the item is submited to Themeforest. But maybe the item will not avoid minor bugs. So we are pleasure if we get your feedbacks about the theme. So don't hesitate to send us an email if you found any bugs or issues. We will fix as soon as possible.

HIRE US
We are available if you want to change the theme (add features/functionlality, change design...).Please email us EXACTLY what you want to change then we will send you a quote for cost and delivery time.

Get Started

You need a Shopify store. If you don't have a shopify store, you can go to Shopify and create your store. We also recommend that you should read the Shopify Manual.It is an extremely well written and thorough guide to understanding the Shopify platform, written by Shopify themselves. It will help with understanding many aspects of the customization of your theme as well as using Shopify in general.

Purchase and download the theme from themeforest.net

Once the theme has been downloaded to your computer, you are now ready to install it to your Shopify store

Install Mantis Theme

You need to install the Mantis theme via Shopify admin. The theme installation is simple and fast which includes these below steps:

Step 1 - Login to your Shopify admin panel.

Step 2 - Go to "Online Store" > "Themes" section:

Install

Step 3 - Click on the "Upload Theme" button:

Install

Step 4 - Click on the "Select File" button, then choose the theme file and click "Upload":

Install

Step 5 - Click on "Publish Theme" option to complete the theme installation.

Install

INSTALL HOME PAGE DEMO

Our Mantis Theme provides 15 beautiful default homepages. You can choose which homepage should be applied for your store by these steps:

Step 1 - Click on the "Customize" button in the theme you want to apply homepage:

Import Demo

Step 2 - Please click on "Select home page layout" button to import demo:

Import Demo

Step 3 - A list of default homepages will be shown up. You should select one beautiful homepage you want to apply, then click on "Import Now" to start importing progress.

Import Demo

Note We strongly recommend that you should create a backup of your Theme settings before publishing the new homepage by copying the bellow code and save in your computer. You can use the code next time if you want to roll back the current home page.

Import Demo

Install Apps

Three free shopify apps are required to be installed in our Mantis theme in order to make our theme works smoothly. These app includes:

App #1 - Reviews app: You can choose Shopify Views app (Get here) or Globo AliExpress Reviewsapp (https://apps.shopify.com/aliexpress-reviews) (free for 90 days).

App #2 - Wishlist Plus made by Swym Corporation. You can get Wishlist Plus App here.

Please go to "App" sections > Click on "Visit Shopify App Store" button to get these apps:

Visit Shopify App

Theme settings

Enable Customer Registration Form

Shopify provides option for you to choose whether your customer need to register an account to checkout on your store or not.

In order to set it up, you should go to "Settings" > Click on "Checkout":

Enable Account

You can choose the option you want to use for your store in "Customer Account" section. There have 3 options:

  • Accounts are disabled: Your customer can go ahead to checkout without login.
  • Accounts are optional: Your customer can go to checkout as a guest or as a logged in customer.
  • Accounts are required: Your customer have to login to your store to complete the checkout.

Enable Account

Please click "Save" to apply the change to your store.

Import Sample Products

You need to import sample products to your store. From your Shopify admin, please click on "Products" > "Import":

Import Sample Products

In the popup, please choose file products.csv in the folder /sample_data of the theme

Import Sample Products

Create Pages

You can add new pages to your website by go to Online Store > Pages, then click on "Add page" button:

Create Pages

Overall, in order to create pages, you need to follow these three basic steps:

Step 1 - Add page title in "Title" field

Step 2 - Click on "Show HTML" icon to input HTML source code to add page content

Step 3 - Copy the given source code, then paste into the HTML source code area.

Create Pages Show HTML

Page About Us

For About page, you have to choose "page.about" value in template suffix field.

Contact Us

In order to create contact us page, you need to follow three basic steps as we have described previously, and use these HTML source code:

Note: For contact us page, you have to choose "page.contact" value in template suffix field.

    <h3>Contact info</h3>
<div class="box-address-contact">
<h4>Postal Address</h4>
<p>PO Box 16122 Collins Street West<br /> Victoria 8007 Australia</p>
</div>
<div class="box-address-contact">
<h4>Mantis HQ</h4>
<p>PO Box 16122 Collins Street West<br /> Victoria 8007 Australia</p>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="box-address-contact">
<h4>Business Phone</h4>
<p>+84 168 992 8902</p>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="box-address-contact">
<h4>Say Hello</h4>
<p>contact@globosoftware.net</p>
</div>
</div>
</div>
<div class="social-media-link style-default font-size-20 text-color-secondary">
<a href="https://www.facebook.com/" class="facebook" title="Facebook" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/" class="twitter" title="Twitter" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-twitter"></i></a>
<a href="https://www.pinterest.com/" class="pinterest" title="Pinterest" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-pinterest-p"></i></a>
<a href="https://www.instagram.com/" class="instagram" title="Instagram" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-instagram"></i></a>
<a href="https://www.behance.net/" class="behance" title="Behance" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-behance"></i></a>
</div>

Our Team

For Our team page, you have to choose "page.our_team" value in template suffix field.

Member Page

In order to create member page, you need to follow three basic steps as we have described previously, and use these HTML source code:

Note: For member page, you have to choose "page.member" value in template suffix field.

    <div class="col-sm-6 col-xs-12 cover-background lazy" data-src="//cdn.shopify.com/s/files/1/0065/8767/8835/files/member1.jpg?v=1531885026" style="padding: 0;"></div>
<div class="col-sm-6 col-xs-12" style="padding: 0;">
<div class="single-member-content">
<div class="width-600">
<h2>James Mantis</h2>
<p>Tech Manager</p>
<div class="font-size-12 line-height-2">
<p>London is a real world city – with some of the most famous buildings, museums and galleries in the world and 2000 years of history to go with them.</p>
<p>But it’s not just looking backwards, there’s always a new bar, play or concert to see. London is also one of the most international cities, with people from all around the world making their home here, so it’s just as easy to get Indian street food as it is a roast dinne.</p>
<div class="vc_progress_bar wpb_content_element">
<div class="vc_single_bar--outer" style="color: #4a4141;">
<div class="vc_label">Fashion Design</div>
<div class="vc_general vc_single_bar"><span data-text="95%" class="vc_bar" style="background-color: #4a4141; width: 95%;"></span></div>
</div>
<div class="vc_single_bar--outer" style="color: #4a4141;">
<div class="vc_label">Web Design</div>
<div class="vc_general vc_single_bar"><span data-text="85%" class="vc_bar" style="background-color: #4a4141; width: 85%;"></span></div>
</div>
<div class="vc_single_bar--outer" style="color: #4a4141;">
<div class="vc_label">Branding Design</div>
<div class="vc_general vc_single_bar"><span data-text="80%" class="vc_bar" style="background-color: #4a4141; width: 80%;"></span></div>
</div>
<div class="vc_single_bar--outer" style="color: #4a4141;">
<div class="vc_label">WordPress Development</div>
<div class="vc_general vc_single_bar"><span data-text="99%" class="vc_bar" style="background-color: #4a4141; width: 99%;"></span></div>
</div>
</div>
<div class="social-media-link style-default text-color-heading font-size-16"><a href="https://plus.google.com/" class="google-plus" title="Google Plus" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-google-plus"></i></a> <a href="https://www.facebook.com/" class="facebook" title="Facebook" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-facebook-official"></i></a> <a href="https://twitter.com/" class="twitter" title="Twitter" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-twitter"></i></a> <a href="https://www.instagram.com/" class="instagram" title="Instagram" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-instagram"></i></a> <a href="https://www.behance.net/" class="behance" title="Behance" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-behance"></i></a></div>
</div>
</div>
</div>
</div>

Configurations

In order to get started on configuring the theme, please go to "Themes" > "Customize" > Click on "Theme settings" tab.

Theme Settings

Theme Settings

You can setup your own color, font, menu, and so on in this tab.

Color

Go to "Theme settings" > Click on "Colors" section:

Color Options

You can set color for text and link, color heder tranparent, footer as well as theme background color here. Please click on the item name to change its color.

Color Options

Typography

This is the list of options that allows you to change font for all text in front end.

Typography

Header

Header settings

The Mantis theme provides 8 default headers, please choose one header to configure:

Setup header top content

Setup logo and logo sticky

Setup main menu

Setup header aside

Mega menu

Go to "Theme Setting" > Select "Mega Menu" section:

Menu
It allow you to manage main menu (navigation)

  • Mega Menu 1 Items: It allows you select a link list to display as a mega menu. You have to enter name of link list here.
  • Image for Megamenu 1: It allows you to add a image to Mega Menu 1 Items. For example Shop is item 1, Sale is item 2.
  • Mega Menu 2 Items: It allows you to select a link list to display as a mega menu. This is difference mega menu, because the menu content will be get from Pages. You can create 3 megamenu of this type.
  • Content of Mega Menu 2: You have to select a page. Please read menu collection page section to create a page for menu

Collections

Go to "Theme Setting" > Select "Collection Page" section:

You can set product per row, products per page, shop page layout, enable sorting and enable sorting best selling

Collection Page

Product Details

Go to "Theme Setting" > Select "Product Details" section:

It allows you to manage the product details page. It allows to manage everything on product details page: Use product limited, Product tabs, product review app, related products.

Social media

Go to "Theme Setting" > Select "Social media" section:

You can setup social sharing, social account

Notification Product

It allows to set up the notification product which appear in the bottom left side.

The settings for this feature includes:

- Select collection to use
- Add title for the notification box

Newsletter Popup

It allows you to manage the Newletter popup

Age Verify

It allows you to manage the Age Verify

General

Go to "Theme Setting" > Select "General" section:

Settings other

You can set back to top, show Image Second, show wishlist when setup app

Money options

Show multiple currencies in a drop-down list top header

Section

Mantis theme provides a lot of sections for you to create beautiful store. If you do not familiar with Shopify section, please take a look here: https://www.shopify.com/partners/blog/introducing-sections-for-shopify-themes. In order to create new section, please go to Themes > Customize > Sections > Add Section:

Blog posts grid

The settings for a blog post grid section include:

  • Set up background color blog
  • Set up margin (top-right-bottom-left) and padding (top-right-bottom-left) of the blog
  • Set up title and subtitle of the blog
  • Select blog posts to show up
  • Select the number of blog posts per row and articles to show

Background button video

The settings for a background button video include:

  • Set up margin (top-right-bottom-left) of the section
  • Select a background image
  • Add a title to the section
  • Tick on the checkbox to show button video popup
  • Add a video link

Block banner full width

The settings for this section include:

  • Set up the block banner's margin
  • Set up the content. There are three block banners in the content.

One block banner full width contains 5 setups:

  • Select the width of the block banner
  • Set up the content and text alignment
  • Upload image for the block banner
  • Add title, price, and button name to the block banner
  • Add the banner link

Block banner home 10

The settings for this section include:

  • Set up the margin of the section
  • Set up the content of the section. There are three default banners in this section. You can add more banners by clicking on Add block banner homer page 10.

One banner contains the following settings:

  • Set up the width of the banner
  • Set up the content alignment
  • Upload the background image of the banner
  • Add the banner title
  • Add the banner link

Block banner image text

The settings for this section include:

  • Set up the margin of this section
  • Set the content for this section. There are two default block banners in this section. You can add more banners by click on Add a block banner image text.

One block banner image text contains the following setups:

  • Set up the banner layout
  • Upload image to the banner
  • Set up content padding top
  • Add title, heading, text and button name
  • Add a banner link

Block portfolio masonry

There are two main settings in this section:

  • Set up the section margin (top-right-bottom-left)
  • Set up the content of the section. There are 10 blocks in the content by default

The settings for each block include:

  • Set up width and height of the block
  • Upload image for the block
  • Add the block title and link

Slideshow

The slideshow section contains 2 parts:

Main settings:

  • Put a tick to choose Use full screen slideshow or Use center with loop.
  • Select the slideshow width
  • Select to show left menu and add left menu link
  • Set up slideshow height and margin
  • Select options to show slide. If you select to use nav, you can choose between two nav style positions
  • Set up transition effect and time to display one slide

Content:

There are two default slides. Click on Add content to add more.

One slide contains the following setups:

  • Upload the slide image
  • Select the content alignment
  • Add the slide title, set up the title font size and color
  • Add the slide heading, set up heading font size and color, put a tick to use text shadow
  • Add the slide subheading, set up subheading font size and color
  • Add button link and button name, set up button font size and color

Instagram feed

You should click save after each change to load jqueryinstagram feed.

The settings for Instagram feed include:

  • Access token: Input an Instagram access token
  • Title: Add the title of this section
  • Limit: Set up the limited number of product (max: 33)
  • Sort by: Choose the way to sort Instagram images to show
  • Speed: Set up the speed of slide transition
  • Slide to show: Choose the number of slide to show
  • Design settings: Put a tick to use container

Instagram shop

You should click save after each change to load jqueryinstagram feed.

The settings for Instagram shop include:

  • Set up the section margin
  • Add the section title
  • Add text to describe the section
  • Code from snapppt

One page background

The settings for this section include:

  • Set up the margin of the section
  • Tick to use parallax
  • Set up the section content. There are four default background pages in the section.

One page includes the following settings:

  • Set up the text alignment
  • Upload the background image
  • Add the section title, set up the title font size and color
  • Add the section heading, set up the heading font size and color
  • Add the button name and button link, set up the button font size and color

Newsletter

The settings for Newsletter section contain:

  • Set up the section margin
  • Add title and subtitle to the section

Note: Any customers who sign up will have an account created for them in Shopify.

Newsletter background

Newsletter background contains the following setups:

The settings for Newsletter section contain:

  • Set up the section margin
  • Upload the image background for the section
  • Add title and subtitle to the section

Note: Any customers who sign up will have an account created for them in Shopify.

Product isotope

The settings for Product isotope section include:

  • Set up the section margin
  • Choose and edit the product collection to be displayed

Product sidebar menu list

This section includes the following setups:

  • Put a tick to choose using container for the section content
  • Set up the section margin
  • Set up the section content which includes 3 default product sidebar menu lists. You can add more by click on Add product sidebar menu list

The settings for one product sidebar menu list contain:

  • Add the product sidebar menu list title
  • Add View products text and link
  • Menu sidebar settings:
    • Add the title 1 and navigation link list 1 of the menu sidebar
    • Add the title 2 and navigation link list 2 of the menu sidebar
  • Product grid settings:
    • Choose a product collection to be displayed
    • Set up the number of products to show in the grid
    • Set up the number of products per row

Product tabs grid

The general settings for this section contain:

  • Width: There are three section width options to select
  • Margin: Set up the section margin
  • Style: There are three styles of the product tab grid to choose
  • Add the section title and subtitle
  • Add the view products text and view products link, and select the button position
  • Tick to choose Use hover box shadow
  • Set up the number of products per row

Block text support

The settings for the block text support section include:

  • Tick to choose Use container
  • Set up the section margin
  • Set up the section content includes four default blocks

One block contains three setups:

  • Upload the block image
  • Add the block title
  • Add the block text

Testimonials

The Testimonials settings include:

  • Set up the section margin
  • Select the testimonials back ground color
  • Add title and subtitle to the section
  • Upload the testimonials background image
  • Tick to choose options to show testimonials slide

The setups for one testimonial include: image, text, and author

Product metafield

In default, Shopify not allow you add new custom field for product. So with Mantis we will help you understand how to bring custom field to your store.

Example: you can have different description, different video... for each product.

The first you need install this extension on your chrome by go to this link: ShopifyFD

After install you will see the icon in your browser:

When go to Edit Product, you need click to ShopifyFD icon and metafield will show.

You need enter fill these sections: Namespace, Key, Value, then click Save.

Mantis Theme support metafield for: Video, Short Description, Link.

Video:

If want show video, you need enter youtube video link for it.

1. namespace: meta

2. key: video

3. value: youtube url

Filter sidebar

The Filter sidebar only applies for Collection page. In order to setup filter side bar, please go to Themes > Customize > Click on "Collection page" > Choose "Filter Sidebar".

Filter Sizebar

The filter sidebar section contains 2 setups:

SETTINGS PRODUCT CATEGORIES

Please tick on "Enable" checkbox if you want to show up Product Categories in the Filter sidebar.

You can change the product categories title by editing text in "Category block header" field.

Filter Sizebar

CONTENT

By default, you can filter products with 3 filter types: By Size, By Color, and By Price. You can add new filter type by clicking on "Add content" button.

Filter made with tags, so all value from filter must exist from product.Let me give you an example to explain how to setup to make this filter sidebar work.

We have filter by size with values: XXL, XL, L, M, S, and X.You need to enter these tags from product page. The steps is as below:

Step 1: Add the list of tags to "Shop by tags list" field. Please take note that each tag is separated by one comma, then click "Save"

Step 2: Add tags to the product that you want to filter, then click "Save".

For Filter by Color and Filter by Price, you just need to do similar as Filter by Size.

You can also create a custom block text in the filter sidebar section.

Filter Sizebar

Filter Sizebar

Filter Sizebar

Custom Color Variants

The custom color variants only applies for Collection and Product detail page. In order to add more color variants, please go to Themes > Customize > Click to choose "Collection page" or "Product pages" > Choose "Custom Color Variants" section.

You need to tick on "Use Custom Color" checkbox to use your own color.

Custom Color Variants

When adding new custom color, you need to fill in these information:

- Color Name: Add name for your custom color

- Color image: Add image for your custom color (Please click on "Show image" to use this feature). The recommended image size is 40x15px.

- Select color: Add custom color

- Select color 2 (optional): Add second custom color

Custom Color Variants

Custom Color Variants

Custom Color Variants

Thank you for purchasing our theme

If you have any questions that are beyond the scope of this documentation, please feel free to contact us via our Skype or contact email:

  • Skype: globosoftware
  • Email: contact@globosoftware.net

Thank you for using our Mantis theme!