Claue


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 (How to rate?)     

Claue - 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
 
After bought our theme, you need extract download package and from folder theme package you will see theme file. 
 
 
You need upload this theme to your Shopify store
 
Install Demo
After install theme, we active home 1 as default, if you want setup another home page. You can go to Customize and click to three dots at top and choose import demo
 
The popup will show 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 Claue theme), you can coppy setting by click export from old theme and coppy all code, paste to import from new theme

 

Basic config

- Currency:

From customize, you can enter curency you want work on your store

Go to General setting and config like this

 

- Wishlist:

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

https://apps.shopify.com/nitro-wishlist

 

1. General 

+ Show preloader: The website will show loading effect

+ Enable Cart Note: in Cart page will show text field, help customer can note 

+ Mailchim action URL: if you are using mailchimp for email marketing campain, you need enter action URL to this textbox. You can read about mailchimp action URL at: http://shopify.barrelny.com/where-do-i-find-the-mailchimp-signup-url/

 

 

This is some function for product and you can disable it

 

 

 

+ Use quick shop: If your product have more than one variant, Instead "Add to card" button you will see "Quick shop" button

 

The image will appear in Account page

 

It will appear in contact page

 

 

This banner image will appear in another page

2. Color

You can change color for body text, title, label, background....You need click to color box and choose coorect color or paste color code

 

3. Typhography

Claue use our default font but if you want use google font, it so easy by click to "Use Custom Font" and in two boxs below, you need check to Google Font and enter google font name. See screenshot...

4. Header

Read from CONFIG HEADER tab

 

5. Money 

Here you can config your currency and show on header. To modify dropdown currency, you need follow textarea and enter this format: currency1, currency1 | currency 2, currency 2 | currency 3

Example: USD, USD | EUR, EUR | GBP, GBP

 

You also need go to Settings/General and click edit Change formatting and modify like this

 

6. Instagram Feed

And enter the title

Continue, you need go to Customize > General Settings > Instagram Feed

Here have some option to showing instagram slider, you need provide access token

Click to link below to understand how to get access token

And this is what showing:

 

 
 

7. Collection Page

 
+ Use Top product Categories:
 
if enable use top product categories, you have 2 choose
- Show all: Will get all collection have more than 2 products from your store 
- Show a link list: You can choose the menu you want
 
 
+ Layout:
Claue supported 6 collection layouts
You can also disable filter, Product per row filter, Tag filter, Ajax load
 
This is screenshot for 6 collection 
+ Grid
+ Metro
 
Note: Large product will display random
 
+ Masonry
 
+ Full Width:
 
+ Left Sidebar
 
+ Right Sidebar
 
 
 

 

8. Product Detail

Read from Product page tab

 

9. Blog page

This option will show block slider in blog page.

 

Config number post showing per page and layout, Claue support grid and masonry layout

Config sidebar for blog, you can enable/disable or choose left or right sidebar

 

You can enable/disable related article below article page

Note:

You can use shortcode fron shortcode page (See Shortcode Page tab) and enter to content, you also can use shortcode from our app: Nitro Lookbook, Nitro Slider and paste to the content, it will work

 

Example: We can enter lookbook shortcode to blog or page

10. Portfolio Page

The first, you need create blog with exactly name "porfolio"

And when create new article you need choose blog is porfolio

You can config page title, description, banner by yourself

In filter, you need enter tag, tags need input from article page. It will show like that

This option above will get article same blog "portfolio" and make them show on article page

 

 

11. About Us

You need create new page with template About Us

 

from theme Customize, you can upload banner

Now you need continue read in ABOUT US tab

 

 

12. Social Media

Allow you config social link

 

 

13. Favicon

Upload favorite icon to your store

 

 

14. Newsletter Popup

You have two options, only show on home page or show in all page, you also need upload newsletter popup and text.

15. Product Auto Suggest

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

 

16. Cookie Law Info

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

+ Use full width: Enable/Disable full width option

+ Show remaining quantity mesage

Claue supported remain text above add cart button

If you product have less than 10 products, the text will show like this


 

 

+Automatically ( Default ): We will split rom description and get 31 characters to show

+Custom text ( Optional ): You need enter from SEO box, it will help for you from SEO and show on product page (recommend)

+ Custom HTML ( Optional ): This option will get from meta field (red from meta field tab) 

 

 

Claue supported 7 product layouts

+ Layout 1

+ Layout 2

+ Layout 3

 

+ Layout 4

 

+ Product with thumbnail at bottom

+ Product with thumbnail on the right

+ Product with thumbnail out side

 

 

From default, we disable variant image change, so if you want use it, the first you need check to Use Grouped variant images and start config it

If you want use normal variant with dropdown, you can uncheck to Show Product Swatch

 

Claue support three variant design

Type 1: Variant with circle

 

Type 2: Only color with cirle

 

Type 3: No circle

 

 

Claue support two variant layout

Type 1: Default color

This type will get color by color code, indefault we support some basic color like blue, red, pink...So from product page you need enter color and it will show.

So if I want use custom color or image for this color, how I can do ?

- Sure, we support allow you add customize color and image for variant by go to 

Here you need enter your color name and choose custom color code, you can also upload image for this color and check to show image if you want display instead color

Example: I have custom color with name 'custom color" and setup like screenshot below

So from product page, i enter this color to variant 

And I will config from "Custom color variation"

+ Just color: 

+ With image

 

Type 2: Swatch image variant

 

 

 

 

You saw custom tab, so how to create customize tab

You need use meta field (read from meta field tab) and enter like this

 

 

+ Zoom: you will see zoom when hover to image but only on desktop, we use second choice for mobile

+ Photoswipe: zoom with popup and on mobile this option will show

 
 
 
Enable related product below product information, it will show products in same collection with current product
 
 
 
Please read from metafield tab
 
Allow you upload size guide in product page
 

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

The first you need order again your variant color as group

So from your product image, you also need order image again with color, example: your color are black -> pink -> grey -> custom color

So you need order image: all product black -> all product pink -> all product -> grey

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

 

And this is what showing

 

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

After install you will see the icon in your browser

When go to product page, you need click to ShopifyFD icon and metafield will show

Claue support metafield for

- Video: You need define metafield name like this and in value, you need enter youtube video link for it


  1. namespace: meta
  2.  
  3. key: video
  4.  
  5. value: youtube url

And this is what showing

 

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


  1. namespace: meta
  2.  
  3. key: image_size_chart
  4.  
  5. value: image size chart url

It will show like this

 

- Short description

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


  1. namespace: meta
  2.  
  3. key: description_excerpt
  4.  
  5. value: description excerpt content

and this is what showing

 

- External/Affiliate Product

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


  1. namespace: external
  2.  
  3. key: text on button (example: Amazon Store)
  4.  
  5. value: link to external product

And this is what showing

 

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.

Claue supported generate shortcode tool, it help you easy to create shortcode and use in article content

To create Shortcode page, you need go to Page > Create New page with template page.shortcode

Now you can click view and see this page (ONLINE VERSION)

 

Now you can modify before generate shortcode, we have explain below each tab

Example: I create new shortcode with name "Featured Products" and some field like this

After click "Generate" it will show like this

Now shortcode already coppied and you need create new page or article and paste this shortcode to content

And this is what showing

 

Section help you easy to create block and drag to order position. Claue support many section and we create home page demo by change section and change order them. You can also change section to create new home page, we will explain each section in this Tab

 

1. Blog Posts

You need enter title, sub-title, number blogs, and choose the blog categories

 

 

 

2. Banner Featured

Here you can add banner and link, each banner you need choose banner with (see image below) and choose collection for the banner.

You can click "Add featured banner" to add new banner. Here you need upload image and choose width, title, link for banner

Banner Featured supported three hover types, you can see in image above

 

 

3. Banner Lookbook 

Allow you add large banner with 2 types

 

 

4. Categories Masonry

You can upload image and choose collection

 

5. Instagram Feed

And enter the title

Continue, you need go to Customize > General Settings > Instagram Feed

Here have some option to showing instagram slider, you need provide access token

Click to link below to understand how to get access token

And this is what showing:

 
 

6. Nitro Lookbook Section

Claue supported Nitro Lookbook app (https://apps.shopify.com/nitro-lookbook)

You can add this section and choose Lookbook template what you have setup before

You can read document for Lookbook at this link: http://lookbook.teathemes.net/document/

 

7. Collection Featured

You can add collection or add product and show on home page

+ Add collection: From conditions, choose "Automatically select products based on conditions"

+ You can choose produc to show by click to "Manual Seclect Product"

You need add product with manual by click to "Add choose product"

You can also make product as featured, product will show with large

 

 

 

9. Product Carousel

You need choose collection want to show products, you can also config title, sub-title, enable/disable arrow, autoplay, speed, slider to show...

You need click save to see the change

 

 

 

10. Product Countdown

Product countdown supported two types

+ Product Countdown

You need choose prouct and enter date

+ Banner Featured

You can upload banner with text and link. This section can make like this

To do same with this image, you need add banner, add product countdown and continue for banner. Like this

 

 

 

11. Product No Carousel 

Show all product without carousel slider, you can choose total products to show, number product show at the first time and product per row

This block support ajax load, example when it show 8 products and from section you config total number to show is 12, so when click to load more products, ajax load will show 4 products

 

 

 

12. Product Tab

Allow you add product section with tabs, you can enter the title and click to add tabs and choose the tab you want show

 

 

 

13. Shipping Section

Allow you add additional information, like this

After add new element, you need enter width (and make sure summary of all element = 100%), and after that you can upload image or icon (click to link to get icon code), you also need enter some information (title, content) for the element

 

 

14. Slider show

Help you add slider section

Same as shipping section, you can add slider by click add the section and add image slider

Update v1.0.3

From v1.0.3 we updated more option, eg: fullwidth, enable/disable next, previous button, speed...

 

 

Claue support 5 header types.

You need go to theme customize > Header

You need enter to all fied from header option, example: Promo bar, Customize text and button, Logo, Navagation

So now you can choose the header type, this is screenshot for 5 header types

+ Header 1:

 

+ Header 2:

 

+ Header 3:

 

+ Header 4:

 

+ Header 5

 

You need go to theme customize / collection page . The section for setting will show

You can drag and order the filter attribute to change position

Filter made with tags, so all value from filter must exist from product. Example: We have filter by brand with values: CK, H&M, Mango, Nike, Zara . So from product, you need enter these tags from product page. Do the same with price, color, size....

Now you need edit content for About Us page by go to theme customize > section

 

The first if you want edit text section, click to "Text column" and start add new text content

 

 

You can also add the testimonial by click to "Testimonial" section

 

Do the same by click to add new member

 

You can read about Lookbook at: http://lookbook.teathemes.net/document/