Theme documentation

1. Theme installation

To install theme you need to visit Shopify.com and register an account. If you already have an account, login to your Shopify admin.

  • From your Shopify admin, click Online Store, then click Themes (or press G W T).

    If your Shopify admin doesn’t have Online Store link, then you will find it under the Sales channels menu instead.

  • Click Upload theme at the top right-hand corner:

  • From the Upload Theme dialog, click Choose File to select the polaris.zip file.
  • Click Upload:

  • To publish the theme on your storefront immediately, click Publish theme:

2. Storefront editor

The storefront editor is a tool for changing and previewing theme settings in real-time. To access the storefront editor click Customize theme for Polaris in the Themes page of your Shopify admin.

Storefront editor's sections which corresponds to all views are:

  • Colors
  • Header
  • Footer
  • Megamenu
  • Social media

6. Setting up Homepage

To achieve the result similar to the demo you will need to do a lot of work like going through shopify settings, adding products, creating blog posts and menus. The Shopify has its' own Getting started guide. It will introduce you with things which are needed to start selling. In the same time you will be few steps closer to finish your homepage.

6.1. Setting up homepage Layout

From storefront editor choose Home page and the settings of Home page sections will show up.

Here you can choose which homepage sections show and in the same time change their order.

6.2. Setting up homepage Sections

In storefront editor each homepage section's settings are placed separately and their titles starts with keyword Home page.

Slider accepts up to 6 slides and each of them has very powerfull option set.

Welcome message has 5 input fields - Title, Description, Button link, Button text and Image. Title, Description, Image can be empty and these elements will not appear on storefront. The button will appear only in case if both - Button title and Button text fields will not be empty.

Promo banners section allows to place 5 different banners. 2 of them takes 1/2 of page width each and 3 of them takes 1/3 of page width each.

Dynamic collection switcher allows to switch between collections dynamically without reloading page. This element accepts up to 5 collections and allows to display products in 3 or 4 column layout.

Featured content section allows to place page content in a homepage which is made in Shopify's Page editor.

Icons for features uses Font Awesome icons. Icon codes up to version 4.5 are supported. Find icon code on Font Awesome cheatsheet page. It is also possible to choose up to 3 pages (template page should be chosen) where these icons will be displayed.

Main promo has 5 input fields - Title, Description, Button link, Button text and Image. Title, Description, Image can be empty and these elements will not appear on storefront. Title and description inputs accepts HTML code. The button will appear only in case if both - Button title and Button text fields will not be empty. We suggest to use PNG image with transparent background to let apply color transition on section's background.

Collection slider allows to switch between collections dynamically without reloading page and displays products in one row which stands as carousel. This element accepts up to 5 collections and allows to display products in 3 or 4 column layout.

Contacts map section allows to place map on homepage. This feature uses Google maps API and to set it up API key is needed. These settings are also used to display map in pages which uses contacts page template.

Newsletter popup appears only once in 24 hours. Alongside section settings MailChimp form action URL field must be also filled under section Footer to enable this feature. Shopify has its' own guide how to get a MailChimp form action URL.

7. Filtering collections

Polaris allows to apply filters to products. Filtering is based on product tags as there is no other reasonable way to do this due the Shopify restrictions.

Polaris has two predefined filters - color and size filter. Each of them has different styling. Alongside these two, it is possibility to define your own filters which will be displayed as checkboxes with labels.

As the filters are based on tags it should be possible to recognize them between other tags and making groups of filters. The groups in this case are colors, sizes, brands and so on. To make it possible Polaris uses tags with prefixes, which are already chosen for predefined filters, but for custom filters you make the choice. For example, prefix for color filter is color and for size filter it is size. Prefix is separated from the filter value with underscore (_), for example, color_red.

7.1. Setting up filters

From storefront editor choose Collection page and the settings of Collection page will show up. Scroll down till you see title Color filter:

Now you can set up colors by using color picker and also change their names. 16 colors in total.

When all the colors are set up, make sure you have enabled color filter.

Size filter setup is very similar, but it requires to define all its' values in one textarea input field by separating them with vertical slash ( | ).

Custom filter requires its' name, prefix and possible values.

7.2. Assigning filters to products

  • From your Shopify admin, click Products (or press G P P).
  • Choose a product you want to make filterable.
  • Add product tags according to the filter setup, in form prefix_filtervalue. For exaple, brand_D & G:

  • Be aware - it may require to add same tag for at least two products, to make it visible in Frontend. Sometimes Shopify needs forcing, to make it register changes, that tag is added.

8. Custom style modifications

  • From your Shopify admin, click Online Store, then click Themes (or press G W T).

    If your Shopify admin doesn’t have Online Store link, then you will find it under the Sales channels menu instead.

  • Click on the "..." button and click Edit HTML/CSS:

  • From the Edit HTML/CSS page, under Assets, open modifications.scss.liquid file and add your custom code. modifications.scss.liquid file is empty by default. You can use it to adjust colors, sizes etc. Use CSS or SCSS code for modifications.

9. Layout

This theme has a responsive layout with one or two columns (varies for different sections). It's based on Bootstrap 3.3 and it's markup is structured according to bootstrap best practices. This theme has 4 different layout modes:

  • Large (for 1200px or wider screens)
  • Medium (for 992px to 1200px screens)
  • Tablet (for 768px to 992px screens)
  • Mobile (for screens smaller than 768px)

Adjust your browser window size to explore them closer. Polaris uses lots of HTML5 and CSS3 features, so it will NOT support legacy browsers such as Internet Explorer 6, 7, 8, 9 & 10.

10. Updating the theme

When theme update comes out with bug fixes and added features, those changes are not automatically added to your own theme. There is no automatic way to run updates on your installed theme.

10.1. Find your theme's version

10.2. Create a backup copy of your existing theme

  • From your Shopify admin, click Online Store, then click Themes (or press G W T).

    If your Shopify admin doesn’t have Online Store link, then you will find it under the Sales channels menu instead.

  • Find the Polaris theme, click on the "..." button and click Download theme file:

  • Check email associated with your staff account to ensure backup .zip file is received.

10.3. Update theme

  • Download the update from Themeforest. You will receive archive file themeforest-16918303-polaris-modern-powerful-shopify-theme.zip. Unzip the archive file, theme update file polaris.zip will be inside of it.
  • From your Shopify admin, click Online Store, then click Themes (or press G W T).

    If your Shopify admin doesn’t have Online Store link, then you will find it under the Sales channels menu instead.

  • Click Upload theme at the top right-hand corner:

  • From the Upload Theme dialog, click Choose File to select the polaris.zip file.
  • Click Upload:

  • To apply all the changes made in storefront editor and/or code files to the newly uploaded theme, follow avoid losing customizations guide.
  • To publish the theme on your storefront immediately, click Publish theme:

10.4. Avoid loosing customizations

Be aware that after all update steps you will have 3 uplouded themes with same names. To avoid this you can change polaris.zip file name to something different before uploading. To make it easier recognize which one contains all the updates.

  • From your Shopify admin, click Online Store, then click Themes (or press G W T).

    If your Shopify admin doesn’t have Online Store link, then you will find it under the Sales channels menu instead.

  • Click on the "..." button and click Edit HTML/CSS:

  • From the Edit HTML/CSS page, under Config, copy the content of the settings_data.json file from the current theme to the new theme. settings_data.json file contains all the changes made in storefront editor!

  • If you have made any custom style modifications - from the Edit HTML/CSS page, under Assets, copy the content of the modifications.scss.liquid file from the current theme to the new theme.

  • If you have made any custom code modifications - replicate all changes you made to the code files in old theme.
  • Download both themes, copy your images from the old theme's Assets folder to the new theme's Assets folder.
  • Upload new theme again.

Thank you so much for purchasing this theme!