Regolith Shopify Theme Documentation

Author: Planetshine
Support: Support Forums
Newsletter: Subscribe

If you have any questions that are beyond the scope of this documentation, please contact us via our support forums.
Please note that we only provide support in case of errors in our product or to advise you about using our product’s features.

Table of Contents

  1. Installing Theme on your Shopify.com store
  2. Layout and browser support
  3. Uploading your custom logo
  4. Editing colors, fonts and backgrounds
  5. Creating dropwdown menu
  6. Setting up homepage slider
  7. Adding "SALE" icon to products
  8. Creating a contact form
  9. Newsletter
  10. Adding thumbnails for blog posts
  11. Using font icons with the theme
  12. Considerations for content of posts, pages etc.
  13. Installing apps that display content on shop

A) Installing Theme on your Shopify.com store - top

Go to Shopify.com and register an account. If you already have an account login to your store admin. Once logged in, go Themes section. Click "Upload a theme" button in the top right corner of the page.

Now use the upload form in the popup window, and select regolith.zip. It's one of the files that is INSIDE the folder you downloaded from Themeforest, so you have to unzip the downloaded folder first and look for regolith.zip there.

Once the theme has been uploaded, click Publish button to activate it.

Congratulation, you have installed Regolith! In case you see this error: "zip does not contain a valid theme: missing template "layout/theme.liquid" you have uploaded the WRONG folder.


B) Layout and browser support - top

This theme has a responsive layout that is laid out horizontally. Regolith has 2 different layout modes - full screen and mobile (for screens smaller than 650px). Adjust your browser window size to explore them closer. It should be noted, that mobile version uses traditional vertical layout, instead of horizontal.

Probably most unique feature of this theme, is that it changes itself to adjust to your browser height. For example, on very large screens it will show products in 3 or more rows, but decreasing the screen height will cause the theme to dynamically reshape itself and decrease the row count. At times the theme will start to hide elements, like sidebar blocks if there is not enough space to hold them all.

Regolith uses CSS3, so it will NOT support legacy browsers such as Internet Explorer 6 and 7, however there is limited support for Internet Explorer 8. Safari, Chrome, Firefox, Internet Explorer 9 (and later) are fully supported.


Go to theme settings and open tab "Logo and sidebar settings". There you will find an upload field with label "shop logo". For best results use 167px wide logo.


D) Editing colors, fonts and backgrounds - top

Regolith offers the possibility to edit all of the main colors used in the theme. This can be done in "Aestetics" tab. Just click on the color code box and a color picker will appear.

Theme also allows you to edit background images and the main fonts that are used. The background settings allow you to upload a custom background image or pick one of the pre-existing ones. There also exists the possibility to use parallax background image. This works by checking the "enable parallax scrolling" box and selecting a secondary background image. It should be noted that images used for parallax have to be specifically prepared and just any other image won't work.


To create a dropdown menu, first decide on which menu item in your Main Menu you would like to have as a dropdown. From the Navigation tab in the Shopify Admin, create a new "link list". The title of this "link list" must be the same as the title of the menu item from your Main Menu. For example, if you have a Main Menu with a link called "Collections", create a new "link list" with the title "Collections". Each link in this new "link list" will appear as a dropdown under "Collections".

For more information regarding Shopify drop down menus, please refer to this article.


F) Setting up homepage slider - top

You can setup homepage slideshow in theme settings page under the "Homepage Slider" tab. You can have at max 5 slides, whom you can enable one by one using checkboxes given. It's recommended to have the slides at least 600 x 1000px in size.

Slider settings also allow you to control the interval between slide change and the duration of the slide animation. Both of these values have to entered in miliseconds.


G) Adding "SALE" icon to products - top

To add icon with text "Sale" to a product, you just have to specify a compare price in the management page for the specific product.


H) Creating a contact form - top

There is a special page template specifically for contact forms. To use this layout, you'll need to select the page.contact template when editing a page.

Google maps

There is also an option to embed a goole maps directly into the contact page. Go to Google maps and find your desired location. Then copy the maps iframe code and paste it in a text editor.

You need to extract the src attributes content. See example of google maps embed code below. The highlighted part is what you need to copy.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100940.14245968236!2d-122.43759999999999!3d37.75769999999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan+Francisco%2C+CA!5e0!3m2!1sen!2s!4v1401476503027" width="600" height="450" frameborder="0" style="border:0"></iframe>

Now go to theme settings > Other and paste this into the field "Google maps iframe url".


I) Setting up newsletter - top

We are using MailChimp to configure the newsletter form, but there are a lot of services you can use. Follow these steps:


J) Adding thumbnails for blog posts - top

The blog posts of Regolith use large images to increase your customers interest in the content. To make use of this you must insert an image at the top of every blog post. The theme will automatically pick the first image found in the post and use it as a thumbnail.


K) Using font icons with the theme - top

The theme uses font icons in various places - most notably in homepage headline block. You can replace the default icons with others that suite your shop better. To do this go to fontawesome website and choose an icon you like by clicking on it. In the page that opens, you need to copy the icons name. For example "icon-bar-chart" and paste it in the appropriate place in theme settings.


L) Considerations for content of posts, pages etc. - top

The theme does a good job resizing content of pages, posts, portfolios etc. to fit the limited screen height. This is achieved by intelligently splitting content into dynamic columns. If however a post contains a non textual item, such as large image or custom html code, that can not be split, some of the contents may overflow the edge of screen and become invisible. The theme can only work well, if the content is edited in way, that allows it to be split into columns.


M) Installing apps that display content on shop - top

Since Regolith uses horizontal layout, custom content like apps can't be simply dropped in. Everything that's in your shop by default - products, posts and pages get's monitored by theme and resized, split into columns etc., as soon as there is not enough space for something. With 3rd party apps this simply does not happen because majority of apps are built for regular - vertically scrolled themes. For this reason installing apps requires a little bit of special approach.

As an example, we'll show you how to integrate the amazing Product Reviews app.

This app required a piece of liquid code to be inserted into the product page. This enables the review form. See the piece of code below:

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

To integrate this app with Regolith you need to wrap it inside a code for scrollable column. See below:

<div class="post-column-wrapper app-container">
  <div class="post-column scroll-wrapper">
   <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  </div>
</div>

Then you need to place this combinded code inside product.liquid, just before the end of post wrapper. The same principle applies for all apps that display large horizontally scrollable content on your shop. This will make the app display it's content into a single, vertically scrolled container, that won't affect the rest of the shop.


Planetshine

Go To Table of Contents