Boutique, theme documentation

Thank you very much for choosing our theme. We truly appreciate and really hope that you'll enjoy our theme! If you like this theme, Please support us by rating us 5 stars. Thanks You.

Boutique - The best Shopify theme for online fashion store, personal blog....

It comes with a lot of great features that would take you months to develop. It is fully responsive, it looks stunning on all types of screens and devices. Including easy to set up for MailChimp, Contact Form, Instagram, Lookbook, Product Colour Swatch, Product Colours Swatch Gallery Images, Product Video Thumbnail, Instagram Shop, Product Grouped,...

After download theme package, you will see upload file. You can also setup home page with your purpose by add section and order them. Each section, we allow user can add space (top, right, bottm, left) and make it look nice with your purpose.

1. 1. First you need click  'Online Store' .
2. 2. Click the  Upload Theme .
3. 3. Click the Select File button. 
4. 5. Click Customize to config.

After install theme, we active HOME DEFAULT as default, if you want setup another home page. You can go to Customize and click to Theme Actions at bottom and choose Import Demo.

The popup will show Demo Versions and you need choose one demo you want to use and click Set Up button.

Note: After install demo, you still need config to show product because some section need product or banner or collections so you need choose it again.

You can also import export your config:

If you have another store and want to user from old from (use same Boutique theme), you can copy setting by click Export from old theme and copy all code, paste to Import from new theme.

Currency

You can change how currencies are displayed on your store.

1. 1. Go to Customize >> Theme Settings >> Currency tab. You can enter curency you want work on your store.

   

2. 2. Go to Settings select General.
3. 3. On section Standards and formats click Change formatting.

You need install Nitro Wishlish app to make this function work on theme: App Store

1. When to visit this page you need enter url shop:

2. After click button 'VIEW', system will auto moving to page Nitro Wishlist.

Note: This app is required and this app used free.

You can install app from the link: Product Reviews

Note: This app is required and this app used free.

In addition, you can use premium app review and register by going to this link : RYVIU

You can install app from the link: Nitro Lookbook

Note: This app is optional. But if you want install this app then you must payment.

You can install app from the link: Install To Store

Note: This app is optional. But if you want install this app then you must payment.

Settings

Select Header: Select layout to show.

Use stickey menu: Tick on options to use sticky menu.

Show announcement: Tick on options to show announcement.

Show on mobile/tablet: Tick on options to show on mobile/tablet.

Announcement text: Enter announcement text to show on header.

Announcement text color/background-color: Set color & background-color for announcement.

Use border for announcement: Tick on option to use border.

Announcement margin top/bottom: Emter margin top & bottom for announcement.

Settings icon: Choose icon will show on menu.

Settings Menu: Select menu to show on header dropdown.

Menu default: Select menu default will show.

Padding item level 1: Set padding for item.

Result:

+ Main Menu:

+ Menu Sticky:

+ Header Dropdown:

Add Content

You click 'Add Content' to creat a menu new for site.

*** Item Menu Link:

Result:

*** Item Menu Standard:

Result:

*** Item Menu Per Column:

Result:

*** Item Menu Multi Column:

Result:

*** Item Menu Promo:

Result:

• Title: Enter title for home quote.
• Max width section : Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).
• Footer font size: Set font-size for text on footer.

• Title design: Select style to show title.
• Content align: Select position for content.
• Small title: Enter small title for the columns of footer.
• Title: Enter title for the columns of footer.

• About Your Site:

• + Address: Enter address for contact section.
• + Phone: Enter phone for contact section.
• + Font size phone number: Set font-size for phone number.
• + Color phone number: Set color for phone number.

• Menu Link:

• + Menu link: Select link for menu.

• Socials:

• + Socials design: Select style to show the socials.
• Select column width: Select column width for these sections.
• Hide on Device?: Tick on options to hide on screen small.

• Title the payments block: Enter title for payment block.
• Color: Set color for title & border.
• Info the payments block: Enter info for payment block.
• Payment Image: Select image from libraries.
• Payment Link: Set link for the payments.

Result:

The first, you need read about menu here: Menus and Links

Example: If you want make submenu show like this.

1. On Navigation tab you can click Add Menu to create submenu.

2. You need create 2 menu item and each item you need to create new submenus:

+ Add submenu for per item:

3. If you want use badge (hot, new, sale...) like this:

4. You can write when enter the menu:

5. Then set color for label menu: Go to Theme >> Theme Settings >> Colors.

Go to Theme Settings >> Select Social Media section.

Share

Tick on option to show the socials network as you like.

Follow

Enter url on icon you want to display.

Go to Theme Settings >> Select Favicon section.

+ Favicon image: Upload favorite icon to your store.

Result:

Go to Theme Settings >> Select Color section.

+ Backgrounds & Colors: You can set bacgkround & color for the sections.

Result:

Go to Theme Settings >> Select General Settings section.

Info settings

+ Phone Number & Email: Enter phone number and email for header top.

Result:

Aspect ratio settings

+ Image product aspect ratio: You can set the aspect ratio for the image.

Result:

Location settings

+ Iframe google map: Enter iframe google map to show on page contact.

Result:

Product item settings

+ Background color: Set background color for the products.

+ Tick on these options to show: Second Image, Sale, New, Quickview & Wishlist.

+ Style for label: Select style to show label.

+ Add wishlist page: Choose wishlist page to show.

Result of second image: When hover over product, second image will show.

Result:

Copyright

+ Copyright text: Enter copyright text to show on header.

Result:

Meta keywords for Homepage(SEO)

+ Keywords for Homepage: Enter keywords for home page here.

+ MailChimp Form Action URL: Enter mailchimp form action here.

Optimize page load speed

+ Image slide item: Select image from libraries.

+ Note: Upload the first sileshow image to load faster or select the image is shown on the first screen.

Result:

Go to Theme Settings >> Select Cart popup settings section.

• + The Options: Enable/Disable Cart Note/Cart Auto Shipping/Trust Seal/Upsell Product.
• + Image: Select image from libraries.
• + Products: Select product to show.

Result:

Go to Theme Settings >> Select Collection Page section.

• + Paging default layout: Select layout default for this page.
• + Limit display product: Set number product to show on this page.
• + Enable Sorting/Enable List Categories(Sidebar)/Recent Products : Tick on option to show these sections.
• + Linklist categories(sidebar): Select menu for categories.

Result:

Go to Theme Settings >> Select Product Filter section.

• + The Options: Enable/Disable the sections to show on filter.
• + Title: Enter title for these sections.
• + Variant Name: Enter name for these sections.
• + Limit display products: Set number products will display.
• + Limit item tags: Enter number item tags.

Result:

Go to Theme Settings >> Select Search Page section.

+ Use search by collection: You can tick on option to use search by collection.

+ Background head image: Select bacgkround image from libraries.

+ Limit display product: Set the products will show on search page.

Result:

Go to Theme Settings >> Select Product Page section.

*** Product page:

• + Product layout: Select layout to show product single.
• + Image size: Choose size for image product.
• + The Options: You can choose to display the items if you want.
• + Swatch layout: Select layout to show swatch section.
• + Name option using swatch: Enter name for swatch color section.
• + Is swatch color(image): Tick on option to use swatch color(image).
• + Style for option: If option is swatch color (image) don't choose radio button.
• + Size guide image: Select image from libraries.

Result:

+ Size guide image:

*** Review section:

• + Use review section: Tick on option to show review section.

Result:

Go to Theme Settings >> Select Sticky Add to Cart Button section.

• + Sticky Add to Cart Button On Scroll/Sticky Add to Cart Button on Mobile/Remaining Quantity Message/Countdown Timer/Image/Quantiny: Tick on option to show these sections.
• + Position & Align: Set position to show sticky add to cart button.

Result on Scroll:

Result on Mobile:

Go to Theme Settings >> Select Login Page section.

+ Layout page: Select layout to show for login page.

+ Policy: Enter text to show on sidebar of page.

Result:

Go to Theme Settings >> Select Categories Settings section.

+ Title: Enter title for categories section.

+ Sub Title: Enter subtitle for categories section.

+ Background image: Select background image from libraries.

+ Show Categories: Tick on options to show categories group/categories on mobile/categories on tablet .

+ Icon categorie: Select icon categorie from libraries.

+ Choose collection: Select collection to show on categories section.

Result:

This option will help you show cookie bar, you can edit text, link if they decline policy and page show.

Result:

1. Go to Theme Settings >> Click Cookie Law Info.

Go to Theme Settings >> Select Tea Suggest Products section.

This function will help you boost your sale by show recommend product, you can config page display and time between. You also need choose collection you want show product.

Result:

1. • + Show suggest products: Tick on option to show suggest products.
   • + Select collection to display: Select collection you want them show.
   • + Select page to display: Tick on the pages if you want it show.
   • + Interval time ( Integer ): Enter time for suggest.
   • + Use fake suggest: You can tick on the options to show time.
   • + Use fake location in suggest: Tick on option to show location.
   • + List location: Enter location will show. Note: You need use "|" to separate the positions out.
   • + Show close button: Tick on option to show close button.

You need tick on the options and enter text for promo popup.

Result:

1. Go to Theme Settings >> Click Promo Popup.

You can set font-family for: Body, Content & Button text.

Result:

1. Go to Theme Settings >> Click Typography section.

Go to Theme Settings >> Select Header section.

***Logo

+ Use two header : If you tick on the option then at home is a header and the other page is a header.

+ Logo SVG: Use name svg upload files.

+ Logo Image: Select logo image from libraries.

Result:

***Slogan

Result:

***Vertical Menu Settings

Result:

Go to Theme Settings >> Select Footer section.

General Settings

• + Colors: Set color for these sections.

Footer Background

• + Use background image: Tick on option to show background image.
• + Background image: Select image from libraries.
• + Use background parallax : Tick on option to show background parallax.

Result:

+ Image product aspect ratio: Enter size for image product.

+ Image article aspect ratio: Enter size for image article.

+ Image brand aspect ratio: Enter size for image brand.

1. Go to Theme Settings >> Click Aspect Ratio Images.

With Boutique, you can showing more than one product images with color, please follow this instruction.

1. The first you need order again your variant color as group.

2. From the images of your product, You should sort the image to each groups and according to order. Example: Your color are Brown -> Black -> Blue.

So you need organize order image as: all product Brown -> all product Black -> all product Blue.

3. Final, from your Variant, you need choose product image for first variant of color.

4. Result:

When you click on color then image will show corresponding to that color.

Go to Customize >> Select Collection Page section.

*** Settings:

*** Content:

Result:

1. • Max width section: Untick on option to disable full width.
   • Sidebar layout: Select position to show sidebar.
   • + None:

   • 

   • + Left:

   • 

   • + Right:

   • 

   • Products per row (grid only): Set number products will show per row.
   • Using masonry layout: Tick on option to use masonry layout.
   • Paging layout for template: Choose layout to show paging.
   • + Paging:

   • 

   • + Button Loadmore:

   • 

   • + Infinity Load: When you roll mouse comedown, the product will automatically loaded.

   • 

   • Limit display product: Set number products will show on this page.
   • Product card grid layout: Select layout to show the products.
   • List group use style with color swatch: You need enter keyword of group on here to use the these styles: Color, Color List, Color Tag.

   • 

   • Brands link image: Enter link image for brands here. Note: The links separated by: ", ".

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

Boutique Theme support metafield for: Short Description, Additional Information, Size Guide, Countdown, Multimedia, External/Affiliate.

Short Description:

Allow you show different short description for each product instead cut off full description.

1. namespace: meta

2. key: short_description

3. value: description excerpt content

Result:

Additional Information:

You can enter additional information for a product.

1. namespace: meta

2. key: additional_information

3. value: enter additional information

Result:

Size Guide:

If you want upload different size chart image for each product (clother, watch, shoes...) you can use metafield with name: meta.size_guide and enter image link. See screenshot below:

1. namespace: meta

2. key: size_guide

3. value: image size chart url

Result:

Size chart will show:

Countdown:

If want show countdown on page single product, you need enter value date time for it.

1. namespace: event

2. key: countdown

3. value: value (mm/dd/yyyy)

Result:

Video:

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

1. namespace: meta

2. key: video

3. value: link video (support source: ogg, wbem, mp4)

Result:

External/Affiliate:

Allow you enter external/Affiliate link, Add cart function will be hidden.

1. namespace: purchase

2. key: on_link

3. value: [button name]link

Result:

Note:

- Sometime you don't see the metafield on product page or it said not loaded, please reload and click to metafield icon on browser again.

Product Grouped can addable the products other on a product page.

Example:

To create a product page and be able to display more such other products. You need to follow these steps:

1. Open a product page available, copy name of that product.

2. Go to Navigation click Add Menu.

3. You need enter fill these sections: Title, Handle & Add Menu Item.

+ Enter Name & select Link for the products other.

4. Then click Save.

Result:

Note: When you use Product Grouped features, you can only add cart for group products which you already setup from navigation, that mean add cart button for main product page which you are seeing not show.

Below here is our video tutorial to help you the to use & setting Product Wislist.

• Title: Enter title for banner customize.
• Max width section: Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).

• Open/End column: Tick on option to open or end a column.
• Turn off block: Tick on option to turn off this section.
• Select column width: Set column width for banner.
• No Padding: Tick on option to don't show padding.
• Hide on Device?: Tick on options to hide on screen small.
• Image banner: Select image from libraries.
• Link to: Add link for banner.
• Title: Enter title for banner customize.
• Sub Title: Enter sub title for banner customize.
• Name Button: Enter name for button.
• Color: You can set color for the sections: Title/Subtitle/Button Text/Button Background.
• You can set the sections other like the one above.

Result:

• Title: Enter title for banner masonry.
• Max width section: Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).

• Turn off block: Tick on option to turn off this section.
• Select column width: Set column width for banner.
• No Padding: Tick on option to don't show padding.
• Hide on Device?: Tick on options to hide on screen small.
• Image banner: Select image from libraries.
• Link to: Add link for banner.
• Title: Enter title for banner masonry.
• Sub Title: Enter sub title for banner masonry.
• Name Button: Enter name for button.
• Color: You can set color for the sections: Title/Subtitle/Button Text/Button Background.
• You can set the sections other like the one above.

Result:

• Title: Enter title for banner template.
• Max width section: Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).

• Turn off block: Tick on option to turn off this section.
• Title Block: Enter title block for banner template.
• Image banner: Select image from libraries.
• Link to: Add link for banner template.

Result:

• Title: Enter title for related post.
• Max width section: Tick on option to show max width.
• Use for sidebar: Tick on option to show sidebar.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).

• Text head: Enter text for head.
• Title: Enter title/sub title for related posts.
• You can select the styles to show for these section: Title style/Blog Style/Navigation Style.
• Choose Blog: Select posts from libraries.
• Select hover effect: Select effect when hover for the posts.
• Select navigation position: Set position to show of navigation.
• Responsive: Enter responsive for related post.
• No overflow content items : Tick on option to don't show overflow content.

Result:

• Title: Enter title for home brand.
• Max width section: Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).
• Use border top/bottom: Tick on the options to show border top/bottom.
• Select navigation style: Select style to show navigation.
• Select navigation position: Select position to show navigation.
• Responsive: Enter responsive for home brand.

• Brand image: Select image from libraries.
• Brand link: Add link for the brands.

Result:

• Title: Enter title for featured categories.
• Max width section: Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).

• Title Block: Enter title block for collection with banner.
• Sub Title Block: Enter sub title block for collection with banner.
• Banner right: Tick on option to show banner right.
• Banner image: Select image from libraries.
• Banner button link: Enter link for banner button.
• Text button: Enter text for button.
• Chose collection: Select collection to show.
• Limit display product: Select number product will max display.
• Product card grid layout: Select layout to show for product.
• Select navigation style: Select style to show navigation.
• Select navigation position: Select position to show navigation.
• Responsive: Enter responsive for collection with banner.

Result:

• Title: Enter title for featured categories.
• Max width section: Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).
• Use border top/bottom: Tick on the options to show border top/bottom.
• Title: Enter title for featured categories.
• Sub Title: Enter sub title for featured categories.

Result:

• Heading: Enter title for section customize.
• Sub Title: Enter sub title for section customize.
• Text content: Enter content for section customize.
• Chose page: Select page to display.
• Max width section: Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).
• Background Image: Select image from libraries.

Result:

• Title: Enter title for simple slideshow.
• Max width section: Tick on option to show max width.
• Items display: Select the items will display.
• Distance between items: Enter distance between the items.
• Select Type slider: Select type to show for slider.
• Select style navigation: Select style to show navigation.
• Select navigation position: Select position to show navigation.
• Auto-rotate slides: Tick on option to auto rotate slider.
• Change slides every: Select time, animate for slideshow.

• Image: Select image from libraries.
• Slide link: Add link for slideshow.
• Turn off block: Tick on option to turn off slideshow.
• Title: Enter title for slideshow.

Result:

• Title: Enter title for slick slideshow.
• Max width section: Tick on option to show max width.
• Auto-rotate slides: Tick on option to auto rotate slides.
• Change slides every: Set time change slides every.
• Section height: Select height to show image.

• Image: Select image from libraries.
• Image alignment: Select position to show image.
• Heading: Enter heading for slideshow.
• Subheading: Enter sub heading for slideshow.
• Font text heading/subheading: Set font-family for heading/subheading.
• Responsive item heading/subheading: Enter value responsive for heading/subheading.
• Slide link: Add link for slideshow.
• Button name: Enter name for button.

Result:

• Title: Enter title for home newsletter.
• Max width section : Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding ( top-right-bottom-left).

• Preview image: Select image from libraries.
• YouTube link: Add link video for background.
• Title: Enter title for home newsletter.
• Subtitle: Enter sub title for home newsletter.

Result:

• Title: Enter title for home newsletter.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).
• Title: Enter title for home newsletter.
• Subtitle: Enter sub title for home newsletter.

Result:

• Title: Enter title for home brand.
• Max width section: Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).
• Product card grid layout: Select layout to show product.

• Title: Enter title for product section.
• Align title: Select position to show title.
• Margin bottom of title: Set margin bottom for title.
• Chose collection: Select collection to show.
• Limit row product: Select number row will max display.
• Limit display product: Select number product will max display.
• Margin bottom grid product: Set margin bottom for grid product.
• Select navigation style: Select style to show navigation.
• Select navigation position: Select position to show navigation.
• Auto-rotate slides: Tick on option to auto rotate slides.
• Responsive: Enter responsive for product section.

Result:

• Title: Enter title for product with banner.
• Max width section : Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).

• Banner right: Tick on option to show banner right.
• Banner image: Select image from libraries.
• Banner button link: Enter link for banner button.
• Chose collection: Select collection to show.
• Chose product: Choose the products will show.

Result:

• Title: Enter title for announcement text.
• Max width section : Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding (top-right-bottom-left).

• Announcement text: Enter text for announcement.
• Announcement text color: Set color for announcement text.
• Announcement background color: Set background color for announcement text.
• Use border for announcement: Tick on option to use border.

Result:

• Title: Enter title for shipping icon.
• Max width section : Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding ( top-right-bottom-left).

• Brand Image: Select image from libraries.
• Shipping Info Content: Enter content for shipping info.
• Shipping Sub Info Content : Enter content for shipping sub info.
• You can setting for 2,3 if you want.

Result:

• Title: Enter title for home quote.
• Max width section : Tick on option to show max width.
• Margin top/bottom: Enter value margin top/bottom.
• Padding: Enter value for padding ( top-right-bottom-left).

• Quote Image: Select image from libraries.
• Text: Enter text for an item.

Result:

Here is our video tutorial to help you the to use Boutique theme

The team at The4studio are always happy to help you with any questions or recommendations you have about the Boutique theme. If you need any help or support please contact us through the forum or
Support Email: [email protected]