Copyright Globo 2018

Hebes - 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 Hebes Theme

You need to install the Hebes 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 Hebes 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 Hebes theme in order to make our theme works smoothly. These app includes:

App #1 - Product Reviews. Link setup: https://apps.shopify.com/product-reviews

App #2 - Wishlist. You can get Wishlist App here.

App #3 - Compare. You can get Compare App here.

App #4 - Swatch Color. You can get Swatch App here.

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", "page.about2", "page.about3" 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>Hebes 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>

Page Contact Us 2

For Contact page 2, you have to choose "page.contact2" value in template suffix field.

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 Hebes theme provides 10 default headers, please choose one header to configure:

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.
  • 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

Hebes 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 and Newsletter

Blog and Testimonials

Blog posts grid

Block list categories

Block new collection

Block new collection 2

Block slider columns

One Banner

One Banner 2

One Banner 3

One Banner 4

Clients say

Block collections masonry

Block columns masonry

Slideshow

Instagram Feed

Onepage Parallax

Product countdown

Newsletter

Newsletter & Testimonials

Newsletter background

Product Tabs Grid

Block text support

Block text support 2

Block text support bg

Custom text columns

Testimonials

Testimonials 2

Product metafield

In default, Shopify not allow you add new custom field for product. So with Hebes 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:

Metafield

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.

Hebes Theme support metafield for: Info Guide, Return, Shipping, Video.

Video:

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

1. namespace: meta

2. key: video

3. value: youtube url

Metafield

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

Filter Sizebar

Custom Color Variants

Please install "Globo Color Swatches" to add color swatches to your Shopify product options. Install the app here: https://app.shopifydevelopers.net/swatch

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 Hebes theme!