NAV Navbar
  • Introduction
  • Installation
  • Theme settings
  • Claue homepage
  • Homepage sections
  • Static sections
  • Changelog
  • Introduction

    Claue is a feature packed Premium Shopify theme for Shopify with a modern design, minimal feel, bundled with powerful plugins for creating versatile online stores.

    After many months design and development raking over every detail of what a modern online retailer needs, Claue is ready to take your online empire to the next level.

    With clever integration of social networks like Instagram for building traffic and clickable links, to it's incredibly fluid responsive design for all of today's modern devices and much more, we know you are going to love Claue.

    Installation

    1. New Install

    After the payment on Themeforest is complete, there will be a download link which you can follow to download the theme's ZIP file. An email will also be sent containing this download link.

    After the theme has been downloaded, Unzip the package you will see the theme package. Remember that don't upload the package dowloaded from Themforest. After that, log in to your Shopify Admin and go to Online Store > Themes. Upload the entire ZIP file and then publish it as your 'Main' theme when the theme is ready to be published (note that it will also be used on mobile devices).

    Claue theme install

    2. Updating the theme

    We frequently update our themes to include new options, support for new Shopify features, improvements and bug fixes. In most cases, if you have edited your theme files, added any Shopify Apps or made any custom changes you will need to manually update the theme to the latest version.

    When you manually add an updated version of a theme, a second version of the theme is added to your online store. The new version is in its default state, with none of your customizations applied. The older version is unaffected by the update, and still has all of your code customizations.

    1. Create a backup copy of your existing theme.
    2. Visit ThemeForest to download the latest version
    3. Upload new version and publish the theme

    3. Why are there no automatic updates on themes in Shopify?

    This is because themes are often customized by merchants, and automatic updates would overwrite those customizations. Software and apps can be routinely updated, but themes are designed to be customizable by you to suit your needs and reflect your brand. If we ran automatic updates on themes, you would lose all of your customizations. Organizing your themes by Shopify

    4. How to update Claue theme without loosing theme settings

    1. Upload the updated theme.

    2. Duplicate the current version of the theme on your store.

    3. Right click on customise on the copy of the current theme and click open in a new window.

    4. Right click also on the updated theme and click open in a new window.

    5. Go to Changelog Section and look at the various files changes were made to.

    6. Copy the file from your copy of your current theme to the original text section at Diffchecker.

    7. Copy the same file also from the Updated theme and paste it into the changed text at Diffchecker.

    8. Scroll Down On Diffchecker and click find differences. The changes made would then be highlighted in green for you to copy and then paste in your copy of your current theme.

    9. Repeat 6-8 until you have made changes to all the files on changelog, save and publish your copy of your current theme.

    10. Remember to always preview after each change to make sure you have it right.

    Theme settings

    To view this area, From your Shopify admin, go to Online Store > Themes > Customize > Theme Settings. The settings here will applies styling and layout for whole store.

    Claue theme settings

    General settings

    Parameter Default value Description
    Content width 1170 Setting width for content, this setting apply for whole layout of your store, the value defined in pixels, don't add the unit.
    Wrap content into container Uncheck Wrapping your content into a box, the width is Content width setting, by default it's 1170 pixel
    Preloader Uncheck Display an animation while the rest of the page’s content is still loading
    + Preloader type - Made via CSS code: Displaying a progress bar
    - Display an image: Upload your animation image, you can download the loading image here
    Favicon - Upload your favicon

    Color scheme

    GENERAL COLORS

    Parameter Default value Description
    Primary #56cfe1 This color applies for the primary button background and when mouse hover on the links
    Secondary #222222 This color applies for the secondary button background, links.
    Body background #ffffff Setting color for background of your website, It just works when you enabling Wrap content into container in General settings section
    Body text #878787 Color of body text
    Heading #222222 Color of heading tag, from H1-H6. It's not includes the heading tag in Footer section

    HEADER COLORS

    Parameter Default value Description
    Topbar background #f6f6f8 Background color of Top Bar section
    Topbar text #878787 Text color of Top Bar section
    Header background #ffffff Background color of Header
    Menu #222222 Color of menu text on Header
    Menu hover #56cfe1 Color of menu text when mouseover
    Sub-menu #878787 Color of sub-menu text
    Sub-menu hover #222222 Color of sub-menu text when mouseover
    Sub-menu background #ffffff Background color of sub-menu
    Parameter Default value Description
    Footer background #ffffff Background color of Footer section
    Footer text #878787 Text color of Footer section
    Footer heading #222222 Heading color of Footer
    Footer link #878787 Link color of Footer
    Footer link hover #222222 Link color of Footer when mouseover

    Typography

    Claue theme come with the variety of google fonts to choose from, already “built-in” and ready to use!

    BODY FONT

    Parameter Default value Description
    Body font family Poppins Font family of body text, you can choose the Web safe fonts or the most popular Google font
    Body font weight 400 Font weight of body text, If you choose google font you need to check the font weight available here, See How to check?
    Body font size 14px Font size of body text

    HEADING FONT

    Parameter Default value Description
    Heading font family Poppins Font family of heading tag, from H1-H6
    Heading font weight 400 Font weight of headung tag

    Currency settings

    To offer multiple currencies on your online store, you must first edit your store's currency formatting.

    1. From your Shopify admin, go to Settings.

    2. In the Standards and formats section, find the Currency setting

    3. Click Change formatting.

    4. Find the HTML with currency and the HTML without currency formats

    5. In each text field, copy and paste <span class=money> in front of the formatting text. Do not put quotation marks around the word money in the span tags. Adding quotes will break the code.

    6. In each text field, copy and paste </span> after the formatting text. You might notice that by default the original HTML without currency field does not include a currency descriptor, such as USD or CAD. For this tutorial, we recommend that you do add the descriptor, to avoid any confusion between currencies later.

    7. Click Save.

    Place the span tags in the HTML with currency and HTML without currency text fields only. Do not place the tags in the Email with currency or Email without currency text fields.

    Sale pop settings

    Display purchase activities on your store via real-time notification popups

    Parameter Default value Description
    Enable sale pop Checked Font family of heading tag, from H1-H6
    Choose product from collection - Choose collection to display a product, the product will display random in the choosen collection
    Background #ffffff Background color for sale pop
    Title color #222222 Title color for sale pop
    Product title color #222222 Product title color
    Time color #878787 Time color

    Social media

    SOCIAL SHARING IMAGE

    Shown when sharing a link on social media. Learn more about image thumbnails.

    SOCIAL SHARING OPTIONS

    Display the social sharing bar in Product detail, see this image for more detail

    Claue homepage

    Claue has 9 different homepages called Nike, Hermes, Adidas, Prada, Gucci, Zara, Chanel and Dior

    How do I change the homepage?

    To change the Theme Style, you'll need to login to your Shopify admin, then go to Sales Channels > Online Store > Themes. Once you are there, click on Action > Edit code, this will bring up your theme editor. Open file settings_data.json inside Config folder. Remove the content in this file and copy the content of the homepage file which you want to use in Home folder of download package into this.

    Homepage sections

    Claue includes 11 dynamic sections to help you building a stunning homepage. To add section to Your home page, you'll need to login to your Shopify admin, then go to Sales Channels > Online Store > Themes > Customize.

    Blog posts

    Display blog post as grid layout

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Choose blog Empty Choose blog which you want to show the post. This is required parameter.
    Posts 3 Choose the number of post which you want to show.
    Show author Checked Show post author.
    Show date Checked Show publish post time.

    Collection list

    Display list of collection

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Collection per row 4 Choose the number of collection which you want to show.
    Content Empty Choose the collection which you want to show. Maximum of 12.

    Image background

    The section displays image with text overlay

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Image Empty Choose the image.
    Background overlay #000 A mask overlay image to make your text easier to read.
    The first text Empty The first text content
    The first text size Empty Size of the first text. the value defined in pixels, don't add the unit.
    The first text color Empty Color of the first text
    The second text Empty The second text content
    The second text size Empty Size of the second text. the value defined in pixels, don't add the unit.
    The second text color Empty Color of the second text
    The third text Empty The third text content
    The third text size Empty Size of the third text. the value defined in pixels, don't add the unit.
    The third text color Empty Color of the third text
    Make the third text as button? Uncheck If you checked this option, the third text will displays as a button.
    Link to Empty The link when click on the button.

    Masonry layout

    Display the content as Masonry layout. This section supports 5 types of content, Image, Product, Collection, Custom HTML and Promotion banner

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Gutter width 0px The clear empty space between element.
    Element sizing 50% Choose this option equal with the smallest block width. For example, If you have 4 blocks, the smallest block is 25%, this parameter must be 25%. This is important parameter
    Content Empty The content of section.

    Text with icon

    Display text and icon

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Item per row 3 Choose the number of item which you want to show.
    Content Empty The content of section. Maximum of 20.

    Video background

    The section displays video with text overlay. Remember that, you need to click on the save button to see the video work on Theme Customize sceen

    Parameter Default value Description
    Full width section Checked Make the section full width.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Youtube video ID Empty How to get Youtube video ID
    The first text Empty The first text content
    The first text size Empty Size of the first text. the value defined in pixels, don't add the unit.
    The first text color Empty Color of the first text
    The second text Empty The second text content
    The second text size Empty Size of the second text. the value defined in pixels, don't add the unit.
    The second text color Empty Color of the second text
    The button text Empty The button text content
    Link to Empty The link when click on the button.

    Instagram feed

    Display your Instagram feed as grid layout

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Instagram access token 3 How to get access token
    Limit 8 The number of image which you want to show.
    Column per row 4 Number of column in a row
    Image size 320x320 Which takes values between 150x150 and 640x640. This is size of Instagram, you can't add the custom size.
    Gutter width 0 The clear empty space between element.
    Enable slider Uncheck Display the feed as slider. Remember that, you need to click on the save button to see the slider work on Theme Customize sceen

    Promotion banner

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Content Empty The content of section. Maximum of 4.

    Slideshow

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Section height 350 Height of section, the value defined in pixels, don't add the unit.
    Enable pagination Uncheck Show dot indicators
    Enable navigation Uncheck Show Prev/Next Arrows
    Enable autoplay Uncheck Enables Autoplay
    Autoplay speed in milliseconds 5 seconds Autoplay Speed in milliseconds

    Snapppt

    You need to install Snapppt app if you want to use this section

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Shoppable gallery code Empty How to get embedded code

    Product list

    Display list of product

    Parameter Default value Description
    Full width section Uncheck Make the section full width. By default, the width of section is 1170px.
    Margin Empty Create space around the section, outside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Padding Empty Generate space around the section's content, inside of any defined borders. Example: 5px 6px 7px 8px (top is 5px, right is 6px, bottom is 7px, left is 8px). Learn more abour Margin
    Heading The latest post form blog Title of section
    Sub heading Empty Sub title of section
    Content Empty Choose the collection which you want to show.
    Product per row 3 Choose the number of product which you want to show.
    Column per row 1 Number of column in a row
    View all button Empty Show view all button

    Static sections

    Top bar

    Top bar section

    Parameter Default value Description
    Show top bar Checked Show or hide topbar section
    Wrap topbar into container Checked Wrapping your content into a box, the width is Content width setting, by default it's 1170 pixel
    Left content Empty The content on the left of section, See (1) in the above image
    Center content Empty The content on the center of section, See (2) in the above image
    Right content Empty The content on the right of section, See (3) in the above image
    Parameter Default value Description
    Layout Left logo & one text menu Choose the layout for header
    - Center logo & hamburger menu: See this layout
    - Center logo & two text menus: See this layout
    - Left logo & one text menu: See this layout
    - Center logo above text menu: See this layout
    Enable header sticky Checked Make your header sticky scroll the browser
    Make header transparent Uncheck Enable this option if you want to make your header looks like this
    Wrap header into container Checked Wrapping your header into a box, the width is Content width setting, by default it's 1170 pixel
    Show search icon Checked Show or hide search function on Header
    Show cart icon Checked Show or hide cart icon on header
    Logo settings - Upload logo for your site
    -Logo for header normal: Upload logo for normal header
    -Logo for header transparent: Upload logo for transparent header
    -Logo width: The recommended size is maximum of 150px. The value defined in pixels, don't add the unit.
    Menu settings - Choose the menu which you want to display
    -Main menu: It applies for 3 header layout, excluded layout Center logo & two text menus
    -Left Menu and Right menu: It displays on header layout Center logo & two text menus only
    Parameter Default value Description
    Copyright - Add your copyright text. The HTML code is allowed
    Menu - Choose menu which you want to display at the bottom of the site
    Content - Add the content in footer column. Maximum of 5.

    Changelog

    1.0.7 - August 14, 2018

    File changes

    - config/settings_schema.json
    - layout/theme.liquid
    - sections/blog.liquid
    - sections/page.liquid
    - sections/account.liquid
    - assets/claue.scss.liquid
    - locales/en.default.json
    - snippets/product-single-image-carousel.liquid

    1.0.6 - August 07, 2018

    File changes

    - config/settings_schema.json
    - layout/theme.liquid
    - sections/blog.liquid
    - assets/claue.js.liquid
    - assets/claue.scss.liquid
    - snippets/option-selector.liquid
    - snippets/swatch.liquid

    1.0.5 - June 20, 2018

    File changes

    - config/settings_schema.json
    - layout/theme.liquid
    - sections/product-detail-main.liquid
    - sections/product-releated.liquid
    - assets/claue.scss.liquid
    - snippets/logo.liquid
    - snippets/preloader.liquid
    - snippets/countdown-stock.liquid
    - snippets/product-tabs.liquid

    1.0.4 - June 12, 2018

    File changes

    - config/settings_schema.json
    - layout/theme.liquid
    - sections/product-detail-main.liquid
    - sections/blog-sidebar.liquid
    - sections/collection-sidebar.liquid
    - sections/instagram-feed.liquid
    - assets/claue.js.liquid
    - assets/claue.min.js.liquid
    - assets/claue.scss.liquid
    - assets/vendor.js
    - snippets/swatch.liquid
    - snippets/swatch-colour.liquid
    - snippets/option-selector.liquid
    - snippets/google-fonts.liquid
    - snippets/header-cart.liquid
    - snippets/currencies.liquid
    - snippets/product-single-thumbnail.liquid
    - templates/product.quickview.liquid

    1.0.3 - May 31, 2018

    File changes

    - config/settings_schema.json
    - layout/theme.liquid
    - sections/product-detail-main.liquid
    - sections/blog.liquid
    - sections/instagram-feed.liquid
    - sections/product-related.liquid
    - sections/slideshow.liquid
    - sections/article.liquid
    - sections/collection.liquid
    - sections/products.liquid
    - assets/claue.js.liquid
    - assets/claue.min.js.liquid
    - assets/claue.scss.liquid
    - assets/vendor.js
    - locales/en.default.json
    - snippets/product-single-image-carousel.liquid
    - snippets/product-single-image-center.liquid
    - snippets/product-single-image-grid.liquid
    - snippets/product-single-image-left.liquid
    - snippets/product-single-thumbnail.liquid
    - snippets/product-grid-item.liquid
    - snippets/swatch.liquid
    - snippets/countdown-timer.liquid
    - snippets/option-selector.liquid
    - templates/product.quickview.liquid

    1.0.2 - May 14, 2018

    File changes

    - assets/claue.js.liquid
    - assets/claue.min.js.liquid
    - assets/claue.scss.liquid
    - assets/vendor.js
    - layout/theme.liquid
    - locales/en.default.json
    - snippets/swatch-colour.liquid
    - snippets/swatch.liquid
    - snippets/header-cart.liquid
    - snippets/header-search.liquid
    - templates/search.json.liquid

    1.0.1 - May 9, 2018

    File changes

    - assets/claue.js.liquid
    - assets/claue.scss.liquid
    - assets/vendor.js
    - config/settings_schema.json
    - layout/theme.liquid
    - locales/en.default.json
    - snippets/sales-pop.liquid

    1.0.0 - May 4, 2018

    Initial realease