General Information

Thank you for purchasing our theme. We are happy that you are one of our customers and we assure you will not be disappointed. We do our best to produce top notch themes with great functionality, premium designs, and clear code.

License

With ThemeForest regular license you are licensed to use this theme to create one single End Product (the final website customized with your content) for yourself or for one client.

What is allowed with the single regular license:

  1. You can create 1 website (on a single domain) for yourself or for your client. You can then transfer that website to your client for any fee. In that case, the license is also transferred to your client.
  2. You can install the theme for testing/development purposes (this installation should not be available to the public).
  3. You can modify or manipulate the theme, you can combine it with other works to create the End Product.
  4. The theme updates for the single End Product (website) are free.

What is not allowed:

  1. With a single regular license you are not allowed to create multiple websites. For multiple websites you will need multiple regular licenses.
  2. To resell the same website (Single End Product) to another clients. You will need to purchase an extended license for this.

For more information regarding license regulations and policies, see the links below:

PSD Files & Images

IMPORTANT! We do not include theme-related .PSD files into the theme package, because it significantly increases the theme archive size. If you need those files, feel free to submit a support request.

All the clipart images included in this theme are copyrighted to their respective owners and are not available for download with this theme. Clipart images can not be used without express permission from the owner and/or need to be purchased separately.

Nevertheless, you can request the clipart-related image IDs/references and .PSD files by contacting our support department.

Help and Support

Support Policy

PLEASE NOTE! As authors of this theme we do provide support only for the theme-related features.

We do not provide support for additional customization, 3rd party apps integration or any other compatibility issues that might arise. Nevertheless, there is an exception that is only applied to the app(s) we have developed and integrated ourselves.

If you have any questions that are beyond the scope of this help file, feel free to contact us. We will respond as soon as possible (within 24 – 48 hours, usually faster). We are open from 10am to 7pm (CET), from Monday till Friday.

Please be aware that some questions are posted on our website in "Common Questions" section. So, before submitting a new ticket, please try searching our website for an answer. Our website has its own inner search and also has been indexed by Google, so if you can not find your answer with our website search, it is worth typing it into Google too. Please make sure you have looked at all the available resources before submitting a support request.

Third-party Extensions

Unfortunately, we do not provide support for third-party extensions. Please contact the author of the extension if needed. If you feel that you might have troubles with installing an extension, we advise you to order a professional installation service.

Installation

Shopify Information

To install this theme you must have a Shopify store. If you don't have such, please follow this link to create a store first. Below are some useful links regarding Shopify information.

Theme Installation

Unpacking the Theme

Before installing the theme, please make sure you unpacked the archive, downloaded from ThemeForest, and extracted the theme file. Some of the folders names may slightly vary. Treat the screenshot below as an example only.

The main package contains archives with the main theme, demo products, demo settings, updates and documentation.

If you try to install the wrong files, you will get the "Zip does not contain a valid theme: missing template layout/theme.liquid" error. This is the most common error that means you are trying to install an incorrect package.

Theme Installation via Shopify Dashboard

IMPORTANT!Find craftis.zip file in craftis-theme.zip folder, downloaded from ThemeForest.

Please follow the steps below to install the theme:

  1. Log into your Shopify store, navigate to Online Store > Themes.
  2. Click "Add Theme" button and choose "Upload zip file".
  3. In a newly opened dialog window choose craftis.zip theme file and click Upload file. The theme will be added to the Theme library section in your admin panel.
  4. Now you need to publish your theme.

You can also view official article on how to install a Shopify theme.

Demo Installation

Our theme includes demo settings for skins (theme styles), page templates and demo content for single products, that allow your site to look exactly like on our demo.

Before any manipulations with the theme, please make sure that your theme is published.

PLEASE NOTE!Craftis theme contains 4 skins (theme styles) in one package that differ in design only.

Pottery

Leather

Bakery

Soap

IMPORTANT! By default, the "Pottery" theme style is applied (styles and page templates).
For "Leather", "Bakery" and "Soap" theme styles, please move to "Skin Installation" chapter of this documentation file.
Due to the fact, that the styles and page templates should be replaced separately you are free to combine them (use styles from skin 1 and page templates from skin 2) to create your unique website.

By default, Shopify themes are installed with default menu and 1 homepage, but without demo pages, posts, collections and images. You can import demo products, if needed. The rest pages and posts, as well as navigation you should create yourself, like it is described in this documentation file. The pages like "About" and "Contact" are created using templates with pre-built set of page blocks.

Import Products

Attention! Before you start your import, make sure that you have a backup of your product data. Importing a .CSV file that has been sorted by a spreadsheet editor such as Microsoft Excel or Numbers might cause your products to be removed from their relevant image links on the .CSV, and your product's images will be lost.

In case you would like to copy all demo products, follow the steps below:

  1. Proceed to Admin > Products > All Products section and click on Import button.
  2. Upload products_export_1.csv file from Theme folder > Demo Products. "Overwrite any current products that have the same handle" option overrides any data that is on Shopify. The product data remains unchanged for columns that aren't present in the .CSV file.
  3. Click on Import Products.

PLEASE NOTE! In case you are having issues with uploading your .CSV file, please use the Google Chrome browser.

Please also view official article or watch Shopify official video tutorial on how to import products.

Skin Installation

In this chapter we will show you how to switch the skin (theme style) or install "Leather", "Bakery" and "Soap" skins (theme styles).

Please make sure that your theme is published before any manipulations with the theme.

Our theme contains 4 skins (theme styles or themes) that differ in design only. Each skin has its own color scheme and page templates. By default, Pottery skin is applied.

Pottery

Leather

Bakery

Soap

In order to get a precise copy of any skin, like on our demo, you should perform the following actions before any manipulations with theme design:

  1. Apply a corresponding pre-built theme style (style preset);
  2. Replace page templates;

Importing/Changing Style Presets

Style presets include color schemes, fonts, header and footer layouts, ect.

To import or switch pre-built theme styles, please follow the instruction below:

  1. Choose the skin (theme style) you want to use while building your website.
  2. From craftis-theme.zip theme folder (the files you have downloaded from ThemeForest), open Demo Setting JSON > Skin > config folder with .txt file which stores demo settings for a particular skin (theme style). Open the settings_data.txt file in the text editor and copy all its content.
  3. Come back to your Shopify Admin panel and proceed to Online Store > Themes > Actions > Edit code.
  4. Find Config folder and open settings_data.json file.
  5. Remove all existing content in settings_data.json file.
  6. Paste the content you have copied from skin settings_data.txt file to settings_data.json of the current theme and click on Save button. The code may slightly vary. Treat the screenshot below as an example only!

IMPORTANT! The instruction above is for importing skin styles ONLY without page templates! By default, the page templates from "Pottery" theme style are applied.

Replacing Page Templates

The pages of pre-built skins contain different collection of sections. Each skin is provided with templates for homepage, about, contact, collections page and single product. By default, the page templates from "Pottery" theme style are applied.

Follow the steps below to replace page template:

  1. Choose the skin (theme).
  2. Unzip craftis-theme.zip, you have downloaded from ThemeForest. Open Demo Setting JSON > Skin > templates folder with .json files.
  3. Go back to your Shopify Admin panel and navigate to Online Store > Themes > Actions > Edit code.
  4. Find Templates folder and open the .json file you want to customize.
  5. Remove all existing content in .json file for a template you want to be updated.
  6. Drag the corresponding .json file with the same template from Demo Setting JSON > Skin > templates folder and drop it in place of the deleted content in your Shopify.
  7. Save your changes.

By default, Shopify themes are installed with default menu and 1 homepage, but without demo pages, posts, collections and images. You can import demo products, if needed. The rest pages and posts, as well as navigation you should create yourself, like it is described in this documentation file. The pages like "About" and "Contacts" are created using templates with pre-built set of page blocks.

Theme Update

This step is required if you received a notification that a new version of the theme is available. You can see this information in Changelog section at the bottom of the item's details page.

Before you go ahead with the update make sure to backup your old theme. You can duplicate your old theme in your Shopify Admin panel or download your old theme version to your computer locally.

IMPORTANT! Themes only update automatically when no code changes were made to your theme, and the theme update doesn't introduce new settings.

If you have made any customizations in js or code files of the old theme version and you would like to update theme without losing settings in Theme Editor, you should re-do all these customizations for your new theme version.

Below you can find two ways of updating theme manually through Admin panel.

Update Option 1. Upload as a new theme.

  1. Navigate to Online Store > Themes.
  2. Upload a file with a new theme version to create a new theme, like it was described in the Theme Installation via Shopify Dashboard section of this documentation file.
  3. Publish your new theme.
  4. Customize your theme by using the theme editor, if needed.
  5. Uninstall any apps that add code to a theme, if you are using any, and then re-install them from the Shopify App Store. If you're not sure whether an app needs to be re-installed, then contact the app developer for support. To contact the app developer, find the app on the Apps page of your Shopify Admin, and then click Get support.

Update Option 2. Update core theme files.

  1. Navigate to Admin > Online Store > Themes.
  2. Backup your current theme by duplicating it in your Shopify Admin panel or downloading it to your computer locally.
  3. Click on Actions of your current theme and proceed to Edit code.
  4. Open files (Updates folder) following your theme structure, replace the current code with the new code and save the changes. Some of the folders names may slightly vary. Treat the screenshot below as an example only.

Install Apps

In order to enhance the functionality of our theme, we have used the following apps on our demo.

Please watch this video tutorial or read official article on how to install apps on your Shopify theme.

Judge.me Product Reviews (free version)

This app allows you to add a customer review feature to your products. Please click here for more information about the app.

You can find the reviews section on demo single products just under the "Add to Wishlist" button.

PLEASE NOTE! We have inserted the "Review Widget" into the single product template through the global theme settings (Admin > Online Store > Themes > Customize > Products > Default Product).

All reviews can be viewed in Admin > Apps > Judge.me Reviews > Manage Reviews tab:

Proceed to the Admin > Apps > Judge.me Reviews > Settings tab to manage the app's settings:

Wishlist Hero (free version)

This app allows you to insrease sales with a customizable wishlist & Email reminders. Please click here for more information about the app.

Free plan has a limit of 500 wishlist items per month!

If you want to preserve the appearance of the wishlist functionality, like on our demo, please view the screenshots with the main app's settings below:

Theme Settings

PLEASE NOTE! Before any manipulations with the theme, please make sure that your theme is published.

Now let's navigate to Admin > Online Store > Themes > Customize to flexibly control the appearance and behavior of the whole website as well as individual posts, pages and collections.

At the bottom of left-hand panel find "Theme Settings" section.

These settings are responsible for managing your store's typography, colors, social media links, search behavior, checkout settings, uploading favicon, etc.

You can see the changes of the front-end right after the alterations - when the needed parameter is selected, without switching from admin to front-end each time. When you are done with the changes, you should click on "Save" button in the right top corner of the Customizer's window.

Please also view official article about theme settings.

Header

Settings of this group allow you to manage an overall look and behavior of the header elements: announcement bar and background color/image.

Announcement bar settings

"Show announcement" option enables a top announcement bar in the header area globally for all pages/posts.

Once the announcement bar is enabled in the theme settings, an "Announcement bar" section will appear in the Customizer. For further customization of the announcement bar proceed here.

Header Background-related settings

  • Apply these settings on home page - you can choose whether to apply the header background-related settings for the whole website or exclude them from your homepage.
  • Hide general background image on a breakpoint specified below - remove header background image on screen resolutions starting from your breakpoint and less.
  • Background color - specify header background color;
  • Background image - upload a header background image;
  • Background image position - choose the position of the header background image;
  • Background image size - specify the size of the header background image;
  • Background image repeat - select the way of stretching the header background image to the width/height of the header area;
  • Show image overlay - add overshadowing mask to the header area;
  • Overlay color - the color of the overshadowing mask for the header area;
  • Opacity - set the value from 0 to 1;

Navigation Area

Here you can manage the whole navigation area: choose a header style, set logo, apply main navigation, enable sticky header, search, account and cart icons, etc.

The main settings are:


  • Logo Image - upload your logo. If no image logo is uploaded, your domain will be used as logo text instead.
  • Custom logo width - set the width of your logo;
  • Menu - select the menu to output your main navigation;
  • Width - choose the width of the navigation area: default or fullwidth;
  • Style - select the style of the navigation area;

    Available Header Styles (navigation area):
    1. Style 1
    2. Style 2
    3. Style 3
    4. Style 4
  • Background color - the background color for the navigation area;
  • Elements color - the font color of navigation items and color for icons in the navigation area;
  • Elements link hover - the hover color of the navigation links and icons in the navigation area;
  • Show account icon - option enables an account icon in the navigation area; The icon will appear if customer accounts are enabled in Admin > Settings > Checkout > Customer accounts.
  • Show search icon - display a search icon;
  • Enable sticky header - enable sticky header, displaying when you scroll up the page;
  • Sticky background color - the background color of the sticky header;

PLEASE NOTE! A wishlist icon appears only if "Wishlist Hero" app is installed.

Page Title

Settings of this group are responsible for managing the page title and breadcrumbs area.


  • Content width - choose the width of content: default or fullwidth;
  • Page title width - specify the width of the page title in percentage;
  • Page title alignment - the alignment of the page title: left, center or right;
  • Background image - set the background image for the page/post/collection title. To add an alt text to page/post header title background, click on "Edit alt text" button below the image in the settings panel.
  • Background overlay color - specify the color of an overshadowing mask;
  • Background overlay color opacity - set the value from 0 to 1;
  • Page title background - specify the background color for the page/post/collection title if no background image is used;
  • Page title color - the color of the page/post/collection title;
  • Breadcrumbs color - the color of the breadcrumbs text/link;
  • Breadcrumbs link hover - the hover color of the breadcrumbs links;
  • Breadcrumbs font size - the font size of the text in breadcrumbs navigation;
  • Name of home page - the name of a starting point of the breadcrumb trail (the name of your home page);

Colors

The theme allows you to assign colors to specific parts of your website. This is useful for highlighting certain areas and giving them a distinctive look.

All website elements are divided into the following groups:

Text and Link

This group contains such elements:

  • Headings - the main color of titles and headings;
  • Body text - the main body text color;
  • Link - color used for content links, share icons on single posts;
  • Link hover - color used for link hovers;
  • Link 2 - alternative link color;
  • Link hover 2 - color used for some elements in the shopping cart widget in the header: item price, hover color for item title and hover for removal icon;

Alternative colors

Alternative color group is mostly applied to blocks that are output on some light background by default (the background is NOT added through the sections'/blocks' settings in the Customizer.

  • Alternative background color - background color for items in "Information Text Block" in style 2; background color for "Customer Reviews" and "Collapsible tab" blocks on single products; color of cover mask for inactive images in the slider on single product; background color for product item on cart page;
  • Alternative text color - text color in alternative blocks; quantity color in the shopping cart widget in the header; text color for "Information Text Block" section in style 3;
  • Alternative title color - color used for headings and titles in alternative blocks; prices and total values color on cart page; hover color of delete icon on cart page;
  • Alternative border color - color used for delimiters in "Customer Reviews" and "Collapsible tab" blocks on single products; color of delete icon on cart page;

Decorated colors

These settings are for some decorative elements to make them stand out from the rest.

  • Accent color 1 - color used for these elements: "Select Options" link in "Featured Collection Grid" and "Image with Products" sections, in products recommendation section on single products, on collection pages; "Add to cart" link in "Featured Collection" section; links in "Customer Reviews" section on single products; "Back to blog" link on single blog posts;
  • Accent color 2 - color used for such elements: star icons in "Featured Collection Grid" and "Image with Products" sections, in "Customer Reviews" section on single products, on collection pages; quote mark in "Testimonials" and "Testimonials Extra" sections; title wrapped in <span> tag in "Counter with Popup Video Section" section; item heading wrapped in <span> tag in "Main Slider" section; price, color and quantity selectors on single products; decorative elements under images in "Slider Collection" section; links hover color in "Customer Reviews" section on single products;
  • Accent color 3 - hover color used for: "Select Options" link in "Featured Collection Grid" section and on collection pages; "Add to cart" link in "Featured Collection" section; "Back to blog" link on single blog posts; as well as labels background color for wishlist and cart icons in the header area;
  • Sale label color - background color for sale labels on products;
  • Sale label text - text color in sale labels;
  • Out of stock label color - background color for Out of stock labels;
  • Out of stock label text - text color in Out of stock labels;
  • Product image background - image background color of single products if a product collection is not specified;

Extra colors

Extra color group is mostly applied to blocks that are output on dark background by default (the background is NOT added through the sections'/blocks' settings in the Customizer.

  • Extra Background color - background color used for: submenu items, account list in the header, "Image with Products" section; view icon color and its border color in "Blog Posts" section and on blogs; hover background color of view icon in "Blog Posts" section and on blogs; background and overlay colors in "Testimonials Extra" section; hover background color of social icons in "Team Items" section;
  • Extra title color - hover color used for titles in submenu items and in account list in the header; background color of view icon in "Blog Posts" section and on blogs; hover color of view icon in "Blog Posts" section and on blogs; title and cite colors in "Testimonials Extra" section; color for section title and item titles in "Image with Products" section; button color in "Image with Products" section; hover color of social icons in "Team Items" section;
  • Extra text color - color used for: titles in submenu items, titles in account list in the header, text in "Testimonials Extra" section, prices in "Image with Products" section;
  • Extra border color - color of item border in "Testimonials Extra" section;

Primary Buttons

  • Button Text - text color on static buttons; icon color on scroll to top; text hover color for buttons/labels with background color inherited from "Button Background Hover" option; text color for testimonial items in "Testimonals" and "Testimonials Extra" sections (style 2 for both);
  • Button Background - background color of buttons and scroll to top; hover background color used for: label in "Main Slider" section, date buttons in "Blog Posts" section and on blogs, button in "Call to Action" section, second button in "Image with Info" secton, checkout button in cart widget;
  • Button text hover - text hover color for buttons; text color for buttons/labels with background color inherited from "Button Background" option;
  • Button Background Hover - color of buttons' background hover; background color used for: label in "Main Slider" section, date buttons in "Blog Posts" section and on blogs, button in "Call to Action" section, second button in "Image with Info" secton, checkout button in cart widget, button in "Collection List" section (style 3); item background color in "Testimonals" and "Testimonials Extra" sections (style 2 for both);

Form fields

  • Text - color for input text in form fields;
  • Borders - borders color for form fields;
  • Background - background color for input form fields;

Image overlays

  • Text - collection title color in "Collection List" section (styles 1, 3 and 5) and on Collection List pages;
  • Background - hover overlay color in "Collection List" section (style 5) and on Collection List pages; overlay color in "Collection List" section (styles 1 and 3);
  • Opacity - value from 0 to 100%;

Page colors

  • Borders and Lines - color of borders and delimiters;
  • Body Background - overlay color in "Featured Collection Grid" and "Team Items" sections; background color used for: cart widget, testimonial items in "Testimonials" section (styles 1 and 3), social icons in "Team Items" section, collection titles in "Slider Collection" section, collection titles in "Collection List" section (styles 2 and 4), navigation arrows in slider on single products;

Preloader colors

  • Preloader background - background color for the preloader;
  • Preloader color - icon color of the preloader;

Typography

Here you can upload fonts from Shopify's or Google font library and adjust font settings for specific typography elements: headings and buttons, top navigation, body text.

You can config:

  • Headings: H1 - H6 headings;
  • Navigation: navigation menu elements;
  • Buttons: default buttons;
  • Body text: normal text on website;
  • Theme border radius: border radius for the form fields and buttons;

Fonts from Google font library

Please clicking this link to get the name of your Google font.

First choose Google font library as the fonts source:

Define the fonts names as well as the font size & font weight.

Fonts from Shopify font library

Shopify's font library includes system fonts, a selection of Google fonts and licensed fonts from Monotype. These fonts are free to use on Shopify online stores.

Choose Shopify font library as the fonts source:

Define the fonts names as well as the font size & font weight.

Sidebar

Here you can customize colors for sidebar elements, enable sidebar widgets and specify titles for them. The sidebar is available on blog and collection pages.

The list of widgets available for definite pages by default

Blog Pages

  • "Search" Widget
  • "Latest Posts" Widget
  • "Tags" Widget

Collection Pages

  • "Search" Widget
  • "Filtering and Sorting" Widget
  • "Categories" Widget
  • "Tags" Widget

Examples of pre-built sidebars

Sidebar on blog pages

Sidebar on collection pages

Social Media

Here you can specify all the necessary links (URLs) to your social profiles. Just paste the permanent URL addresses into the corresponding fields and click "Save."

You can config:

  • Social sharing options - choose the social networks for sharing;
  • Social accounts - specify the links (URLs) to your social profiles;

Favicon

This setting allows you to upload your favicon. The site icon (favicon) is used as a browser and app icon for your site. Icons must be square, and at least 32 pixels wide and tall.

Checkout

The settings of this section are responsible for managing the style of your checkout page. You can set a top banner image, add a logo and allign it, upload background image/color for main content area and order summary, choose fonts for headings and body text on this page, as well as specify colors for some page elements.

To customize more checkout settings, navigate to Shopify Admin > Settings > Checkout.

Checkout, cart, account, login pages are not a part of the theme. They are default Shopify pages. Please also view official article about checkout page customization.

Header Section

Our theme provides four header layouts. You can also add a top bar above the header if needed.

PLEASE NOTE! Please make sure that your theme is published before any manipulations with the theme through Customizer.

In order to manage the header area, navigate to Admin > Online Store > Themes > Customize.

IMPORTANT! The header settings from Customizer are global, regardless of the page type you are viewing.

Announcement Bar

A top announcement bar is disabled by default. You can enable it in Customizer > Theme Settings > Header section.

Once this is done, an "Announcement bar" section will appear in the Customizer.

Here is an example of how the top announcement bar may look like:

Announcement bar setttings include the following options:

  • Hide announcement on mobile - hide a top announcement bar on mobile devices;
  • Content Width - choose the width of the content area of the announcement bar: default or fullwidth;
  • Text - insert some information;
  • Link Text - enter some text that should be linked;
  • Link - add a URL, where the link from the "Link Text" leads to;
  • Announce font size - the font size of the text in the announcement bar;
  • Announce font weight - the font weight of the text in the announcement bar;
  • Text transform - choose the way to output text: uppercase, lowercase, capitalize or none;
  • Bar background - the background color for the announcement bar;
  • Text - the color of the text used in the announcement bar;
  • Text Hover - hover color for links;
  • Opacity text hover - choose the value from 0 to 1;
  • Language/Currency Selector - These settings enable language and currency selectors in the announcement bar. You can add a language and a currency in Admin > Settings > Languages/Payments sections. Please view this official article on how to enable selling in multiple currencies.

Header Area

The header settings can be customized through Customizer > Navigation Area section that duplicates some global header settings.

For more precise customization of the header area, please navigate to Customizer > Theme Settings > Header/Navigation Area/Page Title.

Let's look closer to the Customizer > Navigation Area section. The following options are available here:

Responsive setting

"Hide general background image on a breakpoint specified below" option removes header background image on screen resolutions starting from your breakpoint and less.

Sticky Header-related settings

  • Enable sticky header - enable sticky header, displaying when you scroll up the page;
  • Sticky background color - the background color of the sticky header;

Style-related settings

These settings allow managing the style of the header area, uploading a logo and specifying the main navigation.

  • Width - choose the width of the navigation area: default or fullwidth;
  • Menu - select the menu to output your main navigation. Please view "Create Menu" chapter of this documentation file for more information about creating a new menu or managing an existing one.
  • Style - select the style of the navigation area;

    Available Header Styles (navigation area):
    1. Style 1
    2. Style 2
    3. Style 3
    4. Style 4
  • Logo Image - upload your logo. If no image logo is uploaded, your domain will be used as logo text instead.
  • Custom logo width - set the width of your logo;
  • Show search icon - display a search icon.
  • Show account icon - option enables an account icon in the header area; The icon will appear if customer accounts are enabled in Admin > Settings > Checkout > Customer accounts.

Homepage

This section covers the information about customization of your Homepage. This page is available from the start, once you have installed a Shopify account.

PLEASE NOTE! Before any manipulations with the theme, please make sure that your theme is published.

Homepage Layout

Craftis theme comes with 4 skins (homepage layouts or theme styles) in one package that differ in design only.

Pottery

Leather

Bakery

Soap

Please choose a homepage layout, apply a corresponding theme style and update page templates before any manipulations with the homepage or color scheme. Please refer to "Skin Installation" chapter of this documentation file to learn more about importing pre-built homepage layout.

Homepage Customization

Now let's skip to homepage customization.

  1. Navigate to Shopify Admin > Online Store > Themes > Customize.
  2. In the Shopify drop-down menu select "Home page".
  3. Edit page through sections' settings. Please find the description of available content sections in Content Sections chapter of this documentation file.
  4. Save your changes.

PLEASE NOTE! The number of content sections on homepage is limited to 20!

Collection Pages

If you would like to group your products into collections to make it easier for your customers to find the needed products, this chapter is just for you. Please also view official article or video tutorial to learn more about collections.

There are 2 types of collections:

  • Manual
  • Automated - You can add up to 60 selection conditions and create up to 5,000 automated collections.

PLEASE NOTE! Before any manipulations with the theme, please make sure that your theme is published.

New Collection Creation

Below you can find an instruction for your further actions:

  1. In your Shopify Admin, proceed to Products > Collections and click "Create Collection" button.
  2. Specify a title and description for the collection.
  3. Select the collection type: manual or automated. For automated type specify the conditions.
  4. Upload a collection image. For the information about the sizes of images that you can use, see Image sizes article.
  5. Click on "Save" button.
  6. In the Products section add products to the newly built collection. Organize the order of products by simply dragging and dropping the products.
  7. Set the sales channels and Schedule availability.
  8. Save your changes.

Once you have created any collections you need to add them to your store menu.

Collection List Page

In case you want to customize the content of your Collection List Page, proceed to Shopify Admin > Online Store > Themes > Customize.

In the Shopify drop-down menu select "Collection List" and proceed to "Collection List Page" section.

Specify the collections to be displayed on the page and specify additional settings for Collection List page.

You can expand the template of Collection List pages by the content sections, available in the theme. Just click on the "Add Section" button and customize the page template to you needs. Please find the description of content sections in Content Sections chapter of this documentation file.

Collection Page

You can manage the style of collection pages in Shopify Admin > Online Store > Themes > Customize.

In the Shopify drop-down menu select "Collections > Default Collection". The settings from "Product Grid" section are global for all your collection pages.

Here you can choose whether to output your products in a list or grid style, organize the products on the page (for grid style), etc.

You can find sidebar settings in "Theme Settings" section just under "Product Grid" in the right settings panel. These options are automatically duplicated from global Customizer > Theme Settings.

"Add Section" button helps to customize the page template to you needs. Please find the description of content sections in Content Sections chapter of this documentation file.

Product Pages

Shopify allows you to easily import existing products or create new ones.

New Product Creation

In order to create a new product, please navigate to Shopify Admin > Products and click "Add Product".

We also recommend you to check this article for more information about products. If you want to add variants to products, like color, size, material or style, please click here.

Managing Default Settings of Product Pages

By default, a single product page consists of two content sections: info about the product itself and recommended products. You can easily expand the product template with available content sections.

PLEASE NOTE! Before any manipulations with the theme, please make sure that your theme is published.

The global settings for single products are available through Admin > Online Store > Themes > Customize.

Now choose Products > Default Product in the Shopify drop-down menu and find "Product Information" and "Product Recommendations" sections in the left-hand settings panel.

Product Information section

Settings of "Product Information" group are responsible for managing the width of the content section, as well as enabling sticky product information and video looping.

The content of the single product pages is also manageable through Customizer. These options are global. This means that you customize the template of product pages not the single ones.

"Product Information" section includes the following blocks:

  • Title/Price/Description - inherit content from single products (Shopify Admin > Products);
  • Variant Picker - choose between dropdown or button;
  • Quantity with button - enable dynamic checkout buttons;
  • Text - insert some additional information;
  • Share - add a share button;
  • Collapsible Tab - tab with additional information. The content can be specified in the block's settings panel or inherited from a definite page. The page in this case should be created through Shopify's rich text editor, not through Customizer.
  • Pop-up - a text label that triggers a popup window with content taken from a definite page. The page should be built through Shopify's rich text editor, not through Customizer
  • Wishlist Hero - display "Add to Wishlist" button, requires the Wishlist Hero application to be installed;
  • Reviews Widget - insert Customer Reviews section, requires the Judge.me Product Reviews application to be installed;

Product Recommendations section

Here you can specify a title for this block, choose image ratio, enable second image on hover, add image padding and choose whether to show the vendor or not.

You can expand the template of Product pages by the content sections, available in the theme. Just click on the "Add Section" button and customize the product template to you needs. Please find the description of content sections in Content Sections chapter of this documentation file.

Blog Pages

In this chapter we will deal with customizing blog pages and single articles (posts). Before you start, please view the official article regarding blogs.

Blog Pages

By default, a Shopify theme comes with "News" blog. You can rename it or create new ones.

Create a Blog Page

In order to create a blog page:

  1. Go to Shopify Admin > Online Store > Blog Posts > Manage Blogs. The "Manage Blogs" button appears when at least 1 single post is created.
  2. Click on "Add Blog" button.
  3. Type in a title and specify the behavior of comments.
  4. Save the changes.

Please don't forget to add blog pages to your store navigation.

Managing Default Settings of Blog Pages

PLEASE NOTE! Before any manipulations with the theme, please make sure your have published your theme.

You can customize the appearance of your blog pages in Shopify Admin > Online Store > Themes > Customize > Shopify drop-down menu > Blogs > Default Blog.

Select "Blog Posts" section in the left-hand settings panel. The settings of this group allow you to display a featured image of blog posts.

You can find sidebar settings in "Theme Settings" section just under "Blog Posts" in the right settings panel. These options are automatically duplicated from global Customizer > Theme Settings.

The content of the blog pages is also manageable through Customizer. These options are global. You customize the template of blog pages not the single ones.

"Blog Posts" section contains such blocks. The content for them all is inherited from single blogs, from Shopify Admin > Blogs.

  • Title - the title of the blog;
  • Excerpt - specify the length of the post excerpt, regulate output of date and author;
  • Link

Expand the page template by adding content sections, available under "Add Section" button. Please view Content Sections chapter of this documentation file for more information.

Blog Posts

Once you have created a blog, you can start writing your blog posts.

Create a Blog Post

Navigate to Shopify Admin > Online Store > Blog Posts and click "Add Blog Post" button.

Managing Default Settings of Blog Posts

PLEASE NOTE! Please make sure that your theme is published before any manipulations with the theme through Customizer.

The default settings for single posts are accessible through Shopify Admin > Online Store > Themes > Customize > Shopify drop-down menu > Blog Posts > Default Blog Post.

Click on "Blog Post" section and proceed to "Theme Settings" menu in the right settings panel. Here you can control social share media.

These settings are also accessible through global Customizer > Theme Settings > Social Media.

In order to customize the content area of post template, unwrap "Blog Post" section and manipulate with available content blocks and sections to achieve best results.

Setup Pages

This section covers the information about additional Pages in your website: pre-built page templates, customization of existing pages and adding new pages.

PLEASE NOTE! Before any manipulations with the theme through Customizer, please make sure that your theme is published.

New Page Creation

Please also view this official article on how to create pages.

Follow the steps below to create a new page:

  1. Proceed to Online Store > Pages in your Shopify Admin and click on "Add page" button.
  2. Specify your page title.
  3. Choose a page template. Learn more about pre-built page templates in Templates Overview section of this documentation file.
  4. Under Visibility select when the page should be published. "Set visibility date" option allows you to choose the day and time your page will become visible to public. View this article for more information.
  5. Enter content for your page through Shopify's rich text editor or omit this step and compose your page later through Customizer using pre-built page sections/blocks available for each page template.
  6. Click on "Save" button.

Templates Overview

Page Template Name Template Description Quantity Limit
Default page Default page. Infinity
about Template with pre-built sections for "About" page. Infinity
contact Template with pre-built sections for "Contact" page. Infinity

Edit Page

You can easily manage your webpage in Shopify depending on the way the content of your page was created.

For pages with content composed through Shopify's rich text editor:

  1. In the Shopify Admin, go to Online Store > Pages.
  2. Click on the title of a page.
  3. Update the content of your page.
  4. Save your changes.

You can also view this official article for more information about Shopify's rich text editor.

For pages with content composed using pre-built sections through Customizer
(homepage, about, contact or default page templates):

  1. Navigate to Shopify Admin > Online Store > Themes.
  2. Click on "Customize" button.
  3. In the Shopify drop-down menu select the page you want to customize in the "Pages" block.
  4. Edit page through sections' settings.
  5. Save your changes.

About Page

In this chapter you can learn how to create "About" page, like on our demo, and customize it.

Create "About" Page:

  1. Through Shopify Admin, please go to Online Store > Pages and click on "Add page" button.
  2. Specify your page title.
  3. Choose about page template to get the page with pre-built sections, like on our demo.
  4. Under Visibility select when the page should be published. "Set visibility date" option allows you to choose the day and time your page will become visible to public. View this article for more information.
  5. Click on "Save" button.

Now you need to add your new page to your store menu.

"About" Page Customization:

  1. Proceed to Shopify Admin > Online Store > Themes.
  2. Click on "Customize" button.
  3. In the Shopify drop-down menu select the Pages > About Us page. You can also redirect to the needed page through the website navigation (if you have already added the newly created page to it).

Available sections for "About Us" Page

Demo "About Us" page comes with the following pre-built page blocks:

PLEASE NOTE! You can find the description of content sections/blocks in Content Sections chapter of this documentation file. Just click on the "Add Section" button and customize the page template to you needs.

Contact Page

Now it's time to build and manage "Contact" page, like on our demo.

Create "Contact" Page:

  1. Navigate to Shopify Admin > Online Store > Pages and click on "Add page" button.
  2. Type in your page title.
  3. Select contact page template to get the page with pre-built sections, like on our demo.
  4. Under Visibility select when the page should be published. "Set visibility date" option allows you to choose the day and time your page will become visible to public. View this article for more information.
  5. Click on "Save" button.

Don't forget to add your new page to your store menu.

"Contact" Page Customization:

  1. Proceed to Shopify Admin > Online Store > Themes.
  2. Click on "Customize" button.
  3. In the Shopify drop-down menu select the page, you have just created, for example "Contact". You can also redirect to the needed page through the website navigation (if you have already added the page to it).

Available sections for "Contact" Page

Demo "Contact" page comes with the following pre-built page blocks:

PLEASE NOTE! You can find the description of content sections/blocks in Content Sections chapter of this documentation file. Just click on the "Add Section" button and customize the page template to you needs.

How to get embed code for your Google Map

If you want to insert a google map with your own location, please follow the steps below:

  1. Go to Google maps and find your desired location.
  2. Click on "Share" icon to open sharing options.
  3. Click "Share or embed map" to generate your embed code.
  4. Select the map size and copy the maps iframe code.
  5. Paste the code into the corresponding content section.

Default Contact Form

The form on "Contacts" page is added automatically if the page is created using the contact page template. You can't change the subject line for e-mails sent through default contact form on a Shopify store.

The default contact from sends all submissions to the e-mail address taken from the Shopify Admin > Settings > Store details > Contact information section, "Sender email" option.

Content Sections

In this chapter we will overview all content sections available for all pages (Shopify Admin > Online Store > Themes > Customize > a page > Add Section). For Header and Footer customization please view the corresponding chapters of this documentation file.

Unwrap content items in the left shopify's panel to get page blocks or click on any content section to open additional settings for a particular section.

In order to customize content blocks, just click on a block in the sections' panel and proceed to its settings.

PLEASE NOTE! Below you can find examples of content sections that come with "Pottery" skin.

Spacer Section

This section adds a spacer of a specified size.

Image Bar Section

Inserts linked images in-line, divided up to 8 columns.

Example:

Image with Info Section

This section inserts a promo block with one or two images.

Example:

Banner Information Section

This section displays up to 3 banners placed in-line with list and price blocks.

Example (from Soap skin):

Banner Simple Section

This section shows up to 4 banners.

Example:

Blog Posts Section

This section displays single posts from a selected blog.

Example:

Call to Action Section

This section inserts a "Call to action" block (text + button on background image).

Example:

Collection List Section

This section inserts available collections. Just choose what collections to display from the drop-down list, their quantity as well as a style of this page section.

Example:

Contact Form Section

This section displays a contact form with a heading placed to the left of the form. The contact form is inserted automatically. Please click here for more information about default contact form.

Example:

Counter with Popup Video Section

This is a compound block with counters and a button that triggers a popup window with a video.

Example:

Custom Liquid Section

This section inserts any object (banner, iFrame for video/map, audio, etc.) using custom HTML code, without editing your theme's code directly.

Example:

To find out how to get embed code for your Google Map, please click here.

Decorated Information Section

This section displays 2 info blocks on custom background image.

Example (from Soap skin):

Email Signup Section

This section creates a compound block with default Shopify subscription form. The content can be output in a form of a promo block (image + text block, set in two columns). 4 blocks are available for the text area: heading, subheading, info block and email form.

Example:

The e-mail address for the subscription from is taken from the "Sender email" option from Shopify Admin > Settings > Store details > Contact information section.

This section displays single products from a selected collection. Specify the collection to show the products from, a heading for the section, the number of products for output, enable product vendors and "View all" button if needed.

Example:

This section outputs single products from a selected collection in a form of grid gallery. Specify the collection to display the products from, a heading for the section, the number of products for output, enable product vendors and "View all" button if needed.

Example:

Image with Products Section

This section displays single products from a selected collection with side image.

Example:

Information Text Block Section

This section creates a compound block with content divided into up to 4 columns. Each column item contains a heading, image/icon and some text. Three styles of output are available.

Example:

Main Slider Section

This section displays content blocks (text block + image + label on image) in a form of a slider. Each slide is fully customizable. You can also manage a slider navigation: choose its style and position.

Example:

Newsletter with Video Section

This section outputs a compound block with default Shopify subscription form and a button that triggers a popup window with a video.

Example (from Soap skin):

The e-mail address for the subscription from is taken from the "Sender email" option from Shopify Admin > Settings > Store details > Contact information section.

Page Section

This section displays content of a selected page if this content is created through Shopify's rich text editor, not through Customizer. Please click here for more information about rich text editor.

Slider Collection Section

This section outputs collections in a form of a slider.

Example (from Soap skin with first collection viewed on hover):

Tabs with Popup Video Section

This section allows you to show some text block with tabs and an image with a button, that triggers a popup window with a video. The content of the section is divided into two columns.

Example:

Testimonials Section

This section displays a block with testimonials. You can add up to 3 testimonial items placed in-line. Three styles are available.

Example:

Testimonials Extra Section

This section creates testimonials block with side image. You can add up to 3 testimonial items placed in-line. Three styles are available.

Example:

Video Popup Section

This section allows you to display a video file.

Example:

Team Items Section

This section also creates a compound block with content divided into columns. Each column item contains an image, options to display a name and social icons on hover. The global section's settings include a section title and alignment of a title.

Example (with the first item viewed on hover):

Theme Translation

We recommend viewing official article before you start.

To translate the theme to your language, please follow these steps:

  1. Navigate to Shopify Admin > Online Store > Themes.
  2. For your published theme, click on Actions > Edit languages.
  3. Click "Change Theme Language" in the upper right corner.
  4. In the popup window select the language from the drop-down list.
  5. Save the changes.

If there is no language you want to use in the language drop-down list, you need to create a translation for your theme.

Sources and Credits

In this section you can find additional information regarding fonts, clipart, .PSD files used in this theme.

  • Fonts (google fonts):

    1. Pottery Skin: "'Work Sans', 'sans-serif'";
    2. Leather Skin: "'Work Sans', 'sans-serif'";
    3. Bakery Skin: "'EB Garamond', 'serif'"; "'Work Sans', 'sans-serif'";
    4. Soap Skin: "'Lora', 'serif'"; "'Open Sans', 'sans-serif'";
  • Clipart and icons:

    1. Images were taken from http://www.depositphotos.com/, http://peopleimages.com/, https://www.shutterstock.com/ and https://unsplash.com/.
    2. IMPORTANT! Please be aware that all clipart images included in this theme are copyrighted to their respective owners and are not available for download with this theme. Clipart images can not be used without express permission from the owner and/or need to be purchased separately.
      Nevertheless, you can request the image IDs/references by contacting our support department.
  • PSD Files:

    IMPORTANT! Please note that we do not include theme related .PSD files into the theme package, because it might significantly increase the size of a downloadable archive. In case you need these files you can always request them by contacting our support department as well.

Website Customization

Custom Websites are usually the most important part of an online marketing campaign. A properly built custom website can help you get the most results from your marketing efforts. Our team can do it for you.

Please, find some of our offers below:

Theme instalation

Theme instalation

Get the theme installed on your website with all the dummy content.

BUY THIS OPTION
Ready-To-Use Website

Ready-To-Use Website

The theme setup including data and images replacement for 6 pages.

BUY THIS OPTION
Must have plugins

Must have apps

Installation and configuration of the apps for SEO, security, and cache.

BUY THIS OPTION

You can check the full list of offers here.

Thank you for purchasing our theme. We are happy that you are one of our customers.
If you come up with any theme-related questions that are beyond the scope of this help file, feel free to contact us. We will respond as soon as possible (within 24 – 48 hours, usually faster). We are open from 10am to 7pm (CET), from Monday till Friday.