Editorial Theme Overview
- Global Settings
Related products and blog posts
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.
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.
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:
Display each alternate product with the image on the right and the text on the left.
The product text will include the first paragraph of the description.
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:
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.
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.
Check this box to display the search icon in right side of the header.
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 the search icon in the sidebar.
Show Social Icons
Show your social icons in the sidebar.
Show a message to customers at the very top of the header. Message is customisable.
Rich text allows you to display a paragraph of copywriting or inspiration directly on your front page. Choose from different text colours and sizes.
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.
Allows you to choose the font size of your font.
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.
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).
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.
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:
- latest articles
- articles by tag
- articles by blog
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.
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.
The main text shown to customers, can be blank.
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.
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.
Similar to the rich text section but without a call to action.
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.
Used to highlight a single product such as a new release or a particularly popular offering.
Will allow the user to order more than one at once.
Will show the entire product description underneath the product title. This description is only shown if a short description hasn't been provided.
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.
Shows a group of four products from a collection of your choosing. You can also opt to show a link to the collection page.
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.
Image with text overlay
Displays an image overlaid with text including a call to action button.
First and smaller line of text. This line of text is optional.
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.
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).
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).
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.
Include the full video URL for a single embedded video.
Use your Youtube channel name or ID to include multiple videos from your channel.
Provide a playlist ID to display multiple videos from a playlist instead.
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.
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.
The Editorial Theme is based off a main palette of 5 colours.
Main colour for text and buttons
Main accent colour used for content, blogs and articles.
Secondary accent colour used for notice bar, newsletter and footer.
Accent colour for collections and products.
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.
There are two background colours used within Editorial Theme.
This is the background for the whole webpage. This is the colour visible behind the header.
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).
Editorial Theme includes the footer colour customisation within the general colour settings.
This is the main colour for the footer.
This is the colour used for the divider bars between the upper and lower content.
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:
This is the typeface used for all text except body text and headings.
This is the typeface used for all heading text including the main text in a rich text section.
This is the typeface applied for all body text.
There are five different kinds of text for which the font weight and the case rules can be specified:
- section titles
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.
Dates shown with blog posts can be displayed in one of two ways: time ago or standard.
Standard displays the date in Month Date, Year format for example:
February 10th, 2017
March 31st, 2020
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
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: