Happychild

• created: 10/18/2016
• latest update: 10/20/2016
• by: EngoTheme
• email: engotheme@gmail.com

Introducing Happychild - Multi Store Responsive Shopify Theme

Happychild is a highly flexible, Multi Store Responsive Shopify Theme. It's built on Bootstrap 3 and looks great on Desktops, Laptops and Mobile devices. With unique cool designs, modern, stylish, intuitive assistant and 9 Unique Home layouts, Happychild is a good choice to build your online store. The Happychild shopify theme supports 3 view modes for product listing page: Grid view, List view and FullWidth view, all the views are lean, show info that user wants.

After purchased our theme, you need to go your download area, click on button Download and select download All files & documentation.

Once the download is complete, unzip the file and you would see the following packages:

• Guides - our detail documentation for the theme
• Licensing - the theme license
• Samples - Sample data for manual installation
• PSD - the PSD files of the theme
• Source - All Themes include

Theme Installation

To install the theme, please log in to your Shopify store and go to the Online Store/Themes. From there, click on Upload a Theme and upload the .zip file from the ‘upload’ folder included with this package.

• Step 1 – From your Shopify admin, click Online Store > Themes
  
  
   
• Step 2 – Click Upload a theme in the top righthand corner
  
  
  
   
• Step 3 – The Upload A Theme dialog displays. Click Choose File to select the Happychild.zip file you want to upload, then click Upload.
  
  
  

  You need choose "Happychild.zip" file in SOURCE folder and set up for your website

  
  


• Step 4 – The uploaded theme appears in the Unpublished themes section of your Themes page. Now that you've installed the theme, you can publish it or customize it as you choose.
  

App install

1. https://apps.shopify.com/product-reviews
2. https://apps.shopify.com/metafields-editor

Enable Customer Registration Form

Setting Currency

Enable Store

Enable/Disable in Admin Login > Online Store > Preferences > Storefront password.

If enable Password protect your storefront > setting in Comming Soon page.

Login Store > Customize theme > Settings tab > Popup Newletter

Creat menu navigation

Add new menu

Create Dropdown Menu

Go to this page https://help.shopify.com/manual/sell-online/online-store/menus-and-links#create-a-drop-down-menu to know how to create dropdown menu in Shopify.

How to show Mega Menu

Step 1: You need to create multi-level drop-down menus.
Step 2: Put the items you'd like to show as Mega Menu at Mega Menu Items in Settings.
Step 3: Locate the menu item.
Step 4: At Megamenu, you need to choose the Style suitable for your option.

Mega Menu 1

Mega Menu 2

Mega Menu 3

Mega Menu 4

You'd like to display Products as Mega Menu, you need to:
1. Create the Products collection link list in Navigation and the multi-level drop-down menu belongs to Products (How can I do that?).
2. In settings, please put kid(lowercase) text into Parent name of dropdow menu.
3. Locate the Products item in Menu is 3.

4. In settings, at MEGAMENU 1, please do follow the below image.


5. In settings, at MEGAMENU 2, please do follow the below image.



6. In settings, at MEGAMENU 3, please do follow the below image.



7. In settings, at MEGAMENU 4, please do follow the below image.

HTML Code in First Column

Many headers, messages and content edit in Language editor

Online Store / Themes. Than you select "Edit language"

Create language switcher in shop

Warning: one language = one store. Shopify does not support multilangular online!!!

Create linklist in Navigation and select it in field "Multi Language":

Colors

Setting colors in Colors (Login Store > Customize theme > Settings tab > Colors)

Google Fonts

Setting google fonts in Fonts (Login Store > Customize theme > Settings tab > Fonts)

To create product with color variant as in our store, you need to do following steps:

Login to your Shopify admin panel and go to Products, then click on the product you would like to add color variants.

In Variants section, you need to add variations to the product.

After that, your product page to see variants show:

Create Collections

Create Products

You can import sample products ( as our demo ) or create new products.

1. Import Sample Products

 

Step 1 – From your Shopify admin, click Products

Step 2 – Click Import in the top righthand corner..

 

 

Step 3 – The Import products by CSV file dialog displays. Click Choose File to select the products_export.csv ( in folder Sample Data) file you want to upload, then click Upload.

 

 

 

Step 4 – Click to Upload file

 

2. Create New Products

 

Go to this link http://docs.shopify.com/manual/your-store/products/create-product to know how to add a new product.

 

Create Posts

Go to this link http://docs.shopify.com/manual/your-website/blog-posts/add-post-to-blog to know how to add a post to your blog.

 

We have to add an image to post to display on "From our blog" section on home page and "Blog" page. Go to this link http://docs.shopify.com/manual/your-website/blog-posts/add-image-to-blog to know how to add image to post.

Turn on comment

Go to this link http://docs.shopify.com/manual/your-website/blog-posts/enable-disable-moderate-comments to know how to turn on blog comment.

 

Create Contact Page

Go to this link http://docs.shopify.com/manual/your-website/pages/create-page to know how to create a page in Shopify.

 

To create contact page, create a page with title is "Contact us". In "Template" box, select template is "page.contact".

 

 

and then setting Contact us page in customizer (Login Store > Customize theme > Settings tab > Contact Us):

 

 

HTML Code service Connect (Service Content):

 

<div class="content-contact clearfix"> <div class="col-md-4 col-sm-4 col-xs-4 col-hm-4 col-mb-12"> <div class="item-contact drop-line"> <img src="//cdn.shopify.com/s/files/1/1564/5749/t/2/assets/contact_box_icon_1.jpg?13316159165993580034" alt="" class="icon"> <h2 class="title">Drop Us A Line</h2> <h4 class="des">Business standards services compliant. Users without extensible costs.</h4> <span>hello@quato-shop.com</span> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 col-hm-4 col-mb-12"> <div class="item-contact drop-line"> <img src="//cdn.shopify.com/s/files/1/1564/5749/t/2/assets/contact_box_icon_2.jpg?13316159165993580034" alt="" class="icon"> <h2 class="title">Commercial</h2> <h4 class="des">Business standards services compliant. Users without extensible costs.</h4> <span>commercial@quato-shop.com</span> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 col-hm-4 col-mb-12"> <div class="item-contact drop-line"> <img src="//cdn.shopify.com/s/files/1/1564/5749/t/2/assets/contact_box_icon_3.jpg?13316159165993580034" alt="" class="icon"> <h2 class="title">Visit Our Office</h2> <h4 class="des">262 Milacina Mrest Street, Behansed, Paris, France</h4> <span>(+86) 6 888 888</span> </div> </div> </div>

 

About us page

 To create About us page, create a page with title is "About us". In "Template" box, select template is "page.aboutus".

and then setting About us page in customizer(Login Store > Customize theme > Settings tab > About Us):

 

HTML Code Social Connect (Social Content):

 

<ul> <li><a href="#" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank" class="pinterest"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank" class="behance"><i class="fa fa-behance"></i></a></li> <li><a href="#" target="_blank" class="dribbble"><i class="fa fa-dribbble"></i></a></li> </ul>

Create Wishlist Page

Go to this link http://docs.shopify.com/manual/your-website/pages/create-page to know how to create a page in Shopify.

 

To create contact page, create a page with title is "Wish list". In "Template" box, select template is "page.wishlist".

In Happychild theme, we support 20 Sections for builder home page and other landing page.
You can see sections in customize control panel.

Section V1

• s1.1Section Slider V1
• s1.2Section Banner V1
• s1.3Section Products Tab V1
• s1.4Section Countdow V1
• s1.5Section Testimonial V1
• s1.6Section Banner 3col
• s1.7Section Brands-v1
• s1.8Section Blog V1

• s2.1Section Slider V2
• s2.2Section Banner 3col
• s2.3Section Tab Left Banner
• s2.4Section Countdow V1
• s2.5Section Tab Right Banner
• s2.6Section Testimonial V1
• s2.7Section List Product
• s2.8Section Blog V2
• s2.9Section Newlester V2
• s2.10Section Brands-v1

• s3.1Section Slider V3
• s3.2Section Product V3
• s3.3Section Newlester V3
• s3.4Section Tab Product V3
• s3.5Section Policy V3
• s3.6Section Testimonial And Blog V3
• s3.7Section Brands-v1
• s3.8Section Banner 3col

+ Section Slider V1

In this section we added 5 sliders & each slider there 2 img icon, 6 text content for work and you need config values bellow for each slider:

• SLIDER
• Full Screen Section: Full Screen Section?
• Space Top-Bottom Section 1: space-top-10, space-10...
• SLIDER x (settings of slider x)
• Enable Slider: Enable Slider x?
• Background color: Selection background color?
• Background Image: Background Image Slider x
• Image Slider: Image background for Slider x
• Title: Name Title Slider x
• Sub Title: Name Sub Title Slider x
• Image Slider: Image background for Slider x
• Sub Title 2: Name Sub Title 2 Slider x
• Image Slider: Image background for Slider x
• Content: Content Slider x

After configuration, this section will be showing like this:

+ Section Slider V2

In this section we added 5 sliders & each slider there 2 img icon, 6 text content for work and you need config values bellow for each slider:

• SLIDER
• Full Screen Section: Full Screen Section?
• Space Top-Bottom Section 1: space-top-10, space-10...
• SLIDER x (settings of slider x)
• Enable Slider: Enable Slider x?
• Background color: Selection background color?
• Background Image: Background Image Slider x
• Image Slider: Image background for Slider x
• Image Slider: Image background for Slider x
• Sub Title: Name Sub Title Slider x
• Image Slider: Image background for Slider x
• Image Slider: Image background for Slider x

After configuration, this section will be showing like this:

+ Section Slider V3

In this section we added 5 sliders & each slider there 2 img icon, 6 text content for work and you need config values bellow for each slider:

• SLIDER
• Full Screen Section: Full Screen Section?
• Space Top-Bottom Section 1: space-top-10, space-10...
• SLIDER x (settings of slider x)
• Enable Slider: Enable Slider x?
• Background color: Selection background color?
• Background Image: Background Image Slider x
• Image Slider: Image background for Slider x

After configuration, this section will be showing like this:

+ Section Banner V1

You need config values bellow for each section:

• Select Border Style: Space Top-Bottom Section or Full Width Section
• BANNER X
• Image x: Image for Banner x
• URL x: URL for Banner x

After configuration, this section will be showing like this:

+ Section Tab Products V1

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Limit number of products: Limit number of products for section.
• Title: Title for section.
• TAB X
• Title Tab: Title for Tab x
• Select collection X: Choose collection for Tab x.

After configuration, this section will be showing like this:

+ Section Countdow

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Image 1: Image for Section
• Image 2: Image for Section
• Title: Title for section.
• Sub Title:Sub Title for section.
• Text: Text
• And Datatime: Datatime for section.

After configuration, this section will be showing like this:

+ Section Testimonial V1

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Background image: Upload background image for section.
• Avatar: Avatar x for section.
• Description: Description x for section.
• Name: Name x for section.
• Info: Info x for section.

After configuration, this section will be showing like this:

+ Section Banner 3Col

You need config values bellow for each section:

• Select Border Style: Space Top-Bottom Section or Full Width Section
• BANNER X
• Image x: Image for Banner x
• URL x: URL for Banner x

After configuration, this section will be showing like this:

+ Section Brands

You need config values bellow for each section:

• SETTINGS
• Select Border Style: Space Top-Bottom Section or Full Width Section
• BRAND
• Image: Image x for section.
• Url: Url x for section.

After configuration, this section will be showing like this:

+ Section Blog V1

You need config values bellow for each section:

• SETTINGS
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• Title: Name Text Title For Section
• Limit number of Blog: Limit number of Blog for section.

After configuration, this section will be showing like this:

+ Section Tab Left Banner

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Image: Image for section.
• Limit number of products: Limit number of products for section.
• TAB X
• Title Tab: Title for Tab x
• Select collection X: Choose collection for Tab x.

After configuration, this section will be showing like this:

+ Section Tab Right Banner

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Image: Image for section.
• Limit number of products: Limit number of products for section.
• TAB X
• Title Tab: Title for Tab x
• Select collection X: Choose collection for Tab x.

After configuration, this section will be showing like this:

+ Section List Product

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Limit number of products: Limit number of products for section.
• TAB X
• Title Tab: Title for Tab x
• Select collection X: Choose collection for Tab x.

After configuration, this section will be showing like this:

+ Section Blog V2

You need config values bellow for each section:

• SETTINGS
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• Title: Name Text Title For Section
• Limit number of Blog: Limit number of Blog for section.

After configuration, this section will be showing like this:

+ Section Newlester V2

You need config values bellow for each section:

• SETTINGS
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• Title: Name Text Title For Section
• Content: Content for section.
• Url: Url for section.

After configuration, this section will be showing like this:

+ section-product-v3

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Title: Title for section.
• Select collection: Choose collection for section.
• Limit number of products: Limit number of products for section.

After configuration, this section will be showing like this:

+ Section Newlester V3

You need config values bellow for each section:

• SETTINGS
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• Title: Name Text Title For Section
• Content: Content for section.
• Url: Url for section.

After configuration, this section will be showing like this:

+ Section Tab Product V3

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Limit number of products: Limit number of products for section.
• Settings Product Sale
• Title: Name Text Title For Section
• Select collection X: Choose collection for Section
• Limit products: Limit products for section.
• And Datatime: Datatime for section.
• TAB X
• Title Tab: Title for Tab x
• Select collection X: Choose collection for Tab x.

After configuration, this section will be showing like this:

+ Section Policy V3

In this section we added 4 boxs (4 column) for work and you need config values bellow for each service box:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Enable policy x: Enable Policy x
• Title: Title of column x
• Content: Content of column x
• Icon: Icon of column x.

After configuration, this section will be showing like this:

+ Section Testimonial And Blog V3

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section or Full Width Section
• Settings Testimonial
• Title Testimonial: Title for section testimonial.
• Title Blog: Title for section blog.
• TESTIMONIAL X
• Avatar: Avatar x for section.
• Description: Description x for section.
• Name: Name x for section.
• Info: Info x for section.

After configuration, this section will be showing like this:

In Home page 1, we used sections bellow:

• 1Header Style 1
• 2Footer Style 1

• s1.1Section Slider V1
• s1.2Section Banner V1
• s1.3Section Products Tab V1
• s1.4Section Countdow V1
• s1.5Section Testimonial V1
• s1.6Section Banner 3col
• s1.7Section Brands-v1
• s1.8Section Blog V1

Header Style 1:

Footer Style 1:

Config position for each section in home 1, see photo bellow:

Choose and Add section in Homepage

Choose a section in Homepage (drag and drop then add section)

In Home page 2, we used sections bellow:

• 1Header Style 2
• 2Footer Style 2

• s2.1Section Slider V2
• s2.2Section Banner 3col
• s2.3Section Tab Left Banner
• s2.4Section Countdow V1
• s2.5Section Tab Right Banner
• s2.6Section Testimonial V1
• s2.7Section List Product
• s2.8Section Blog V2
• s2.9Section Newlester V2
• s2.10Section Brands-v1

Header Style 2:

Footer Style 2:

Config position for each section in home 2, see photo bellow:

Choose and Add section in Homepage

Choose a section in Homepage (drag and drop then add section)

In Home page 2, we used sections bellow:

• 1Header Style 3
• 2Footer Style 3

• s3.1Section Slider V3
• s3.2Section Product V3
• s3.3Section Newlester V3
• s3.4Section Tab Product V3
• s3.5Section Policy V3
• s3.6Section Testimonial And Blog V3
• s3.7Section Brands-v1
• s3.8Section Banner 3col

Header Style 2:

Footer Style 2:

Config position for each section in home 2, see photo bellow:

Choose and Add section in Homepage

Choose a section in Homepage (drag and drop then add section)

Collection page

• Add new collection or edit collection
  
  
   
• Add products for collection
  
  
  
   
• Set view mode for collection
  
  in this theme, our support 3 view mode for collection, you can sellect an option for each collection as photo bellow
  
  
• Settings for collection
  
  
  
   

Product Detail page

Images for Product: 570 x 781px .jpg recommended

Config Product detail page: 1 steps

Sidebar

setting widgets in sidebar collection page

Settings Categories sidebar

Settings Widget Product sidebar

Sidebar Filters

Settings Sidebar Filters

Settings Filter Color Sidebar

Settings Filter Price Sidebar

Settings Filter Size sidebar

Filter Size sidebar

Filter by Price, Size, Color

To add a filter attributes for a product, you need add the tag filter for that product. See the image below:

If you are unable to find your answer here in our documentation, please go to our forum and post up a new topic with all the details we need. Please be sure to include your site URL as well or send us an email.

Our support scope

Our support covers configuration, building site as demo, trouble using any features, and bug fixes. We don't provide support for customizations or 3rd party extension.

Our support time

We try our best to monitor the email around the clock, however, this is not always possible due to different time zones. We will try to reply you as fast as we can.

Our working time is 8.00 AM - 5.30 PM, Monday to Friday (GMT+7). So if ask for help in the weekend, you may have to wait a little bit for support and please be patient.