Editorial Theme Overview

Contents


Features

Let your customers read about products in your blog or lead your blog readers to your products by linking the two together. Simply tag the related products and articles with the same tag.

To use this feature, you first need to turn it on. To turn it on, open up the theme customisation page and navigate to either a product page or a blog post. Once the feature is activated, giving products and blog posts the same tag will allow the blogs to show up on the product page and vice versa.

How it works

All that you need to do to get this feature to work is to enable it. You can do this by customising the theme and navigating to a blog post. The sidebar menu will change to reflect what sections you can customise for that page:

If you select Article pages you will see the customisations available for an article page:

By selecting the Enable related products checkbox, you will enable related products for all blog posts. You will also need to do this same process to enable blog posts to show on your product pages. First, navigate to a product page within the theme customiser, this will show the sections for customisation including Product pages:

By selecting Product pages you can turn on Enable related articles to enable this feature on all product pages:

You can also then select which blogs to source the related articles from. You don't have to turn the feature on for both articles and products, you might choose only to show related products with articles or vice versa.

Once you have the feature enabled, it is simply a matter of having the product and article have the same tag. Here is a screenshot of a product taken from the product editor in Shopify admin:

You can see the tags listed in the lower righthand corner with little crosses: #summer #outdoors #canada.

Here is a similar screenshot taken of from an article in the article editor also from Shopify admin:

You can see that this article has the #outdoors tag in common with the backpack shown above. Therefore the article may now appear on the product page and vice versa. That's all it takes.

Please note that this feature can only link products and blog posts. Collections can't be assigned tags the same way products can be so you cannot relate blog posts to collections. 

return to top

Two Collection Templates

The Editorial Theme supplies additional customisations for the collection templates. The collection templates determine how the collection pages are viewed. Editorial Theme provides additional options for customising how each of these templates appear for a given collection.

Before customising you should ensure that the collection is using the preferred template. This is configured in the collection settings page not the theme customisation area. To configure this, from the Shopify dashboard go to Products > Collections and look for the "Theme templates" option on the lower right side of the page. Once the template setting is saved, you can jump across to the theme customisation area for the collection and customise the various options listed in this section.

Now return to the Shopify dashboard and navigate to Online Store > Customize. From here select the collection pages option from the dropdown in the top left corner.

The following options are available to both templates:

No. of products per page

Use this option to set the number of products viewable at a time. You can choose from 4, 8, 12 or 24 products.

Enable filtering by product tag

This will display a set of tags under the description. The customer can select one of the tags to only show the items in the collection with that tag. If collection sorting is also selected, the tag list will become a drop-down menu which the customer can use to select the tag instead.

Enable collection sorting

This will display a drop-down menu to the customer to select options for sorting the collection.

Collection Template

The collection template shows the products in a grid. You can customise the collection template using any of the previously mentioned options.

Collection List Template

The collection list template provides even more options to customise the display of products in a list. In addition to all the options provided for the collection template, the list template also allows the following options:

Alternate rows

Display each alternate product with the image on the right and the text on the left.

Show description

The product text will include the first paragraph of the description.

return to top


Sections

Header

The header section appears on every page of the website. The desktop version features customisable drop-down menus on the lefthand side and on the righthand side includes icons for viewing user account information, searching the store, and viewing the shopping cart contents. You can also choose to include social icons on the righthand side in addition to the store-related icons.

On a mobile, the shopping cart icon is retained while the user account, search, and social media icons are hidden. The menu drop-downs are moved to a sidebar menu activated through the mobile menu button ('hamburger' icon). The account functions are included in the sidebar menu, along with the drop-down menus.

In the header section editor, you can edit the following:
Custom Logo

Upload you store logo. We recommend a logo image with dimensions of 800 x 300px.

Custom Logo Width

Use this slider to adjust the width of your logo. By default this is set to 160px.

Menu

Use this to select the menu that will appear on the left side of the header. Note: when menu exceeds max available space, mobile menu button will be shown instead.

Show Search

Check this box to display the search icon in right side of the header.

Secondary menu

Choose an additional menu to be shown under the main menu. You can also opt for the menu to include the search option and whether to also display social media icons. Note: This menu has limited support for dropdown items.

Show Search

Show the search icon in the sidebar.

Show Social Icons

Show your social icons in the sidebar.

Notice bar

Show a message to customers at the very top of the header. Message is customisable.

return to top

Rich Text

Rich text allows you to display a paragraph of copywriting or inspiration directly on your front page. Choose from different text colours and sizes.

Text

You can enter formatted text into the text field. The displayed text will respond to italic and underlined text, but not bolded text. By default, the text in the first text field will be displayed on both device sizes (desktop and mobile) but you can also customise the text for display on the mobile version.

Text - Mobile

Allows you to display different formatting/text on mobile. 

Font Size

Allows you to choose the font size of your font.

Font Color

Allows you to edit the color of the font. Note: if you would like to change these colors, go to the Theme Settings within the Shopify Customise Editor.

Highlight Color

Changes the color of the underline in the calls to action (read below).

Call to action

Give your customers a chance to respond to your words with calls to action. You can add as many call to actions as you want but don't go overboard! The colour of the line under the call to action is determined by the highlight colour option (previous).

Link text

The text that the customer will see.

Call to action URL

The URL or search query that will be called when the customer clicks the link. This is required for the call to action to cause any action.

return to top

Blog Posts

Since Editorial Theme provides so many blog-related features, you can expect the blog posts section to be feature packed and it is! You can choose up to five blogs to be the source of content presentable in three different ways:

  1. latest articles
  2. articles by tag
  3. articles by blog
Latest Articles

If selected, the latest six articles from the provided blogs (up to five) will be shown with the most recent article being featured. Note that the six latest articles are chosen by date alone so if all of your six most recent posts come from a single blog, only those posts from the one blog will be shown.

You can customise the title of the block of articles, otherwise it will default to Blog. The latest articles block will always appear first (when other article content is added).

Articles by tag

This block sources 4, 8 or 12 blog posts from the provided blogs (up to five) where each post has the provided tag. By default, each articles by tag is titled tagged [chosen tag] but this can be customised. You can add as many articles by tag blocks as you like with different tags. If the latest articles option is selected, the articles by tag will automatically skip blog posts which are already featured in the latest articles block.

Articles by blog

Here you can display 4, 8, or 12 blog posts from a specific blog. Similar to articles by tag, you can add as many of these blocks as you like, and each block will automatically skip over articles that are already shown in the latest articles block if latest articles is enabled. The block is titled with the blog name by default, but this can be customised.

return to top

Newsletter

Section for allowing customers to sign up to your newsletter by providing an email field. Subscription data will be available in the customers section of your Shopify store admin.

Title

The main text shown to customers, can be blank.

Text

Additional text about your newsletter offering. This can also be left blank, but you probably want text in at least one of either title or text.

return to top

Featured Store Content

The featured store content is where you can display products or collections from your store. The section has a title option, but it can have multiple content blocks added. There are four kinds of content blocks which can be added which are detailed here.

Feature text

Similar to the rich text section but without a call to action.

Text

Text to be displayed. This text is always shown in the big screen (desktop) version of the site.

Text - Mobile

Alternate text only shown in the smaller screen (mobile) version of the site. If left blank, the mobile version will see the same text as the desktop version.

Single product

Used to highlight a single product such as a new release or a particularly popular offering.

Show quantity

Will allow the user to order more than one at once.

Show description

Will show the entire product description underneath the product title. This description is only shown if a short description hasn't been provided.

Short description

Enter a custom description shorter than the existing description. This can be useful when a product has a detailed description which quickly clutters the single product block layout. A non-blank short description will override any existing description.

Featured collection

Shows a group of four products from a collection of your choosing. You can also opt to show a link to the collection page.

Collection list

Show up to two collections side by side. The collection image is shown with the collection title over the image. The colour of the title text is configurable.

return to top

Image with text overlay

Displays an image overlaid with text including a call to action button.

Subtext

First and smaller line of text. This line of text is optional.

Main text

Second and larger line of text. This line of text is also optional.

Call to action URL

URL callback for the call to action button. This is where the call to action button will take your customer. This is required.

Call to action button text

Text which is displayed on call to action button. This text can be left blank, but that would be pointless, wouldn't it.

Text and button colour

Determines the colour used for the text and the call to action button. The available colours depend on the store colours.

Content position

Determines where is the image the text and call to action button will be located. Nine different locations are available consisting of each of top, middle and bottom vertical positions combined with left, centre and right horizontal position (think 3x3 grid).

return to top

Instagram feed

You will need your Instagram Access Token. You can get one from    here. Once you have it, paste it into the “Instagram Access Token” textfield. You can also choose to display either five or ten posts (images).

return to top

Videos

Display a video or a whole Youtube channel on the home page. You can provide a custom section title otherwise it will  default to Video. There are a couple of video embedding options.

Single video

Include the full video URL for a single embedded video.

Youtube uploads

Use your Youtube channel name or ID to include multiple videos from your channel.

Youtube playlist

Provide a playlist ID to display multiple videos from a playlist instead.

return to top

The footer can contain up to two menus, some about text and social media icons. The theme credit is optional but we sure appreciate a mention.

About text

This multiline text can be used to display a physical address and contact details or any other textual information you want displayed.

Social media icons

These are displayed down the bottom right hand corner of the page. The actual icons themselves are configured in the global theme settings.

return to top


Global Settings

Colours

General Colours

The Editorial Theme is based off a main palette of 5 colours.

Primary

Main colour for text and buttons

Main Accent

Main accent colour used for content, blogs and articles.

Secondary Accent

Secondary accent colour used for notice bar, newsletter and footer.

Shop Accent

Accent colour for collections and products.

Borders

This colour is used for the borders on the customer order history when they log in to view it. You probably won't need to change this colour.

Background Colours

There are two background colours used within Editorial Theme.

Background

This is the background for the whole webpage. This is the colour visible behind the header.

Section background

This is the background applied within each section. All the elements within each section sit atop this colour so its recommended to keep it fairly subtle. The default provided will work in nearly all cases (unless you flip to a dark colour scheme).

Footer customisation

Editorial Theme includes the footer colour customisation within the general colour settings.

Background

This is the main colour for the footer.

Accent

This is the colour used for the divider bars between the upper and lower content.

return to top

Typography

Choosing Typefaces

Editorial Theme uses groups text into three different categories for the purposes of typography. Each category can be rendered with a different typeface. The following categories are available:

Main

This is the typeface used for all text except body text and headings.

Headings

This is the typeface used for all heading text including the main text in a rich text section.

Body

This is the typeface applied for all body text.

Configuring Typefaces

There are five different kinds of text for which the font weight and the case rules can be specified:

  • headings
  • section titles
  • navigation
  • buttons
  • meta

The font weight can be set to either regular or bold. The case of the text can be modified by settings the text transform option to either uppercase (where all text will be in caps) or capitalize (where the beginning letter of each word will be in caps). Setting text transform to none will leave the text as originally typed.

Section titles also have the option of selecting which typeface from the aforementioned categories (Main, Headings, or Body) it will display.

return to top

Dates

Dates shown with blog posts can be displayed in one of two ways: time ago or standard.

Standard

Standard displays the date in Month Date, Year format for example:

February 10th, 2017
March 31st, 2020

Time ago

Time ago displays the date by showing how long ago the post was uploaded from the current time, for example:

3 months ago
1 hour ago
2 years ago

return to top

Social Media

All social media links are all defined within the social media tab of general settings. By putting the URL link to your account for each of the services listed, a social media icon will be created which will take users to the link you provide. A sample URL for each of the available social media services has been provided as a guide to determining the link for your particular account.

The following social media sites are currently available for use with the Editorial theme:

  • Twitter
  • Facebook
  • Pinterest
  • Instagram
  • Tumblr
  • Snapchat
  • Youtube
  • Vimeo

return to top