Boutique

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

Introducing Boutique - Multi Store Responsive Shopify Theme

Boutique 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, Boutique is a good choice to build your online store. The Boutique 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 Boutique.zip file you want to upload, then click Upload.
  
  
  

  You need choose "Boutique.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.

HTML Code Content Social

Login Store > Customize theme > Settings tab > Popup Newletter

HTML Code Content Social

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

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.

HTML Code in First Column

<div class="grid__item large--one-fifth"> <h3>Product Elements</h3> <ul class="super"> <li><a href="#">Standard Product</a></li> <li><a href="#">Variable Product</a></li> <li><a href="#">Grouped Product</a></li> <li><a href="#">External/Affiliate product</a></li> </ul> </div>

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="row"> <div class="col-xs-12 col-sm-4 col-md-4"> <div class="ewm-ib-wrap"> <i class="fa fa-map-marker"></i> <span class="title">Address</span> <span class="desc">Queen St/Collins St, Melbourne, Victoria, Australia</span> </div> <!-- /.ewm-ib-wrap --> </div> <div class="col-xs-12 col-sm-4 col-md-4"> <div class="ewm-ib-wrap"> <i class="fa fa-envelope-o"></i> <span class="title">Email</span> <span class="desc">engocreative@gmail.com</span> </div> <!-- /.ewm-ib-wrap --> </div> <div class="col-xs-12 col-sm-4 col-md-4"> <div class="ewm-ib-wrap"> <i class="fa fa-phone"></i> <span class="title">Phone</span> <span class="desc">Make your phone order to:<br> (+84) 988 992 085</span> </div> <!-- /.ewm-ib-wrap --> </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 class="socials"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><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 Boutique theme, we support 10 Sections for builder home page and other landing page.
You can see sections in customize control panel.

• s1.1Section Slider V1
• s1.2Section Slider V2
• s2Section Policy
• s3Section Featured Product
• s4Section Content V2
• s5.1Section Banner V1
• s5.2Section Banner V2
• s6Section Products Tab
• s7Section Brand End Testimonial
• s8Section Blog

+ 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 1: Full Screen Section 1?
• Space Top-Bottom Section 1: space-top-10, space-10...
• ImaSlideshow transition effect: choose effect 1 or effect 2
• 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
• Content: Content Slider x
• Title 2: Name Title 2 Slider x
• Title 3: Name Title 3 Slider x
• Button Name for Image Slider: Name button
• Button URL for Image Slider: URL button(if button URL empty)

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 1: Full Screen Section 1?
• Space Top-Bottom Section 1: space-top-10, space-10...
• ImaSlideshow transition effect: choose effect 1 or effect 2
• 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
• Content: Content Slider x
• Title 2: Name Title 2 Slider x
• Title 3: Name Title 3 Slider x
• Button Name for Image Slider: Name button
• Button URL for Image Slider: URL button(if button URL empty)

After configuration, this section will be showing like this:



+ Section Policy

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 1 or Full Width Section
• Enable policy x: Enable Policy x
• Title: Title of column x
• Icon: Icon of column x.

After configuration, this section will be showing like this:



+ Section Featured Products

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• Title: Title for section.
• Content: Content
• 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 Content V2

You need config values bellow for each section:

• Settings
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• SECTION CONTENT CAROUSEL V2
• Enable: Enable Section Product v2.
• Title: Title for section.
• Content: Content
• Select collection: Choose collection for section.
• Limit number of products: Limit number of products for section.
• SECTION BANNER
• Enable: Enable Section Banner v2.
• BANNER x
• Image: Upload image
• Link: Link Banner x
• SECTION TAB PRODUCT
• Enable: Enable Section Collection Tab.
• Limit number of products: Limit number of products for section.
• Text Title: Name Text Title
• Url: Url Section Tab Product
• TAB PRODUCT x
• Title: Name Title x
• Select Tab Product: Select Tab Product x
• SIDEBAR SECTION CONTENT V2
• SECTION BLOG SIDEBAR V2
• Enable: Enable Section blog v2.
• Title: Name Title
• SECTION PRODUCT SALE V2
• Enable: Enable Section product sale v2.
• Title: Name Title
• Select Collection: Select Collection Section
• Limit number of products: Limit number of products for section.
• Enable: Enable banner sidebar v2.
• Image: Upload Image
• Url: Url Section Banner
• SECTION NEWSLETTER SIDEBAR V2
• Enable: Enable Section Newsletter Sidebar v2.
• Title: Name Title
• Description: Description section newsletter
• MailChimp: MailChimp Form Action URL
• SECTION SOCIAL SIDEBAR V2
• Enable: Enable Section Social Sidebar v2.
• Enable: Enable Social x.
• Icon: Name Icon Social x
• Url: Url Social x

After configuration, this section will be showing like this:



+ Section Banner V1

You need config values bellow for each section:

• SETTINGS
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• BANNER X
• Image x: Image for Banner x
• Title: Title for Banner x
• Content: Content for Banner x
• Button Name: Name button for Banner x
• Button URL: URL button for Banner x

After configuration, this section will be showing like this:



+ Section Banner V2

In this section we added 2 banner for work and you need config values bellow for each section:

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

After configuration, this section will be showing like this:



+ Section Products Tab

In this section we added 2 style for work and you need config values bellow for each slider:

• SETTINGS
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• Limit number of products: Limit number of products for section.
• Text Title: Name Text Title
• TAB PRODUCT x
• Title: Name Title x
• Select Tab Product: Select Tab Product x

After configuration, this section will be showing like this:



+ Section Brand End Testimonial

You need config values bellow for each section:

• SETTINGS
• Select Border Style: Space Top-Bottom Section 1 or Full Width Section
• Background image: Upload background image for section.
• BRAND
• Image: Image x for section.
• Url: Url x for section.
• TESTIMONIAL
• Avatar: Avatar x for section.
• Description: Description x for section.

After configuration, this section will be showing like this:



+ Section Blog

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.
• TAB BLOG x
• Title: Name Title x
• Select Tab Blog: Select Tab Blog x

After configuration, this section will be showing like this:

In Home page 1, we used sections bellow:

• 1Header Style 1
• 2Footer Style 1

• s1Section Slider V1
• s3Section Policy V1
• s4Section Featured Product
• s5.1Section Banneer V1
• s6Section Tab Product
• s7Section Brand and Testimonial
• s8Section 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

• s1.2Section Slider V2
• s4Section Content V2
• s5.2Section Banner V2

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

Settings Advertising sidebar

Settings Categories 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.