Editions Theme Manual

Our documentation is for the latest version of the theme. If you need help with an older version of the theme, please send us a support request (found to the right). Below, you’ll find instructions for all theme settings and features, roughly in the same order as the sections in your theme editor panel.

editions11

Table of Contents

Basic theme setup

This section covers some basic settings to get your theme up and running.

New to Shopify?

If you’re setting up a Shopify store for the first time, we recommend taking a gander at the Shopify help center for a full overview of the platform.

In our article Getting Started: Shopify Basics, we cover the essentials for getting your store up and running, including adding some products, setting up collections, and creating a blog. Once you’ve got some of these things set up, you’ll be in a good position to start customizing your theme.

Upload your new theme

If you purchased your theme directly from pixelunion.net, you will receive your theme as a .zip file named something like editions.v1.0.0.zip.

Once you’ve downloaded the theme file, go to your Shopify admin dashboard and navigate to Online Store > Themes. Then click Upload theme in the top-right corner. Select your theme file from your computer and click Upload.

Your new theme will show up below your current theme. Once you’re ready, click Publish theme to show your new store to the world.

If you purchased the theme directly from Shopify, the uploading of your theme is all handled for you.

Choose a style preset

Editions comes packaged with three theme presets that curate your store’s colors, fonts, and styles for you. Check out our store demos to see the LightSpring, and Modern presets.

Select the preset you would like to use under the Presets section of your theme editor.

editions-presets

Note that applying and saving a preset to your theme will overwrite your current style settings. Before switching to a preset, you can save your current style settings as a new preset, so you can revert to your original saved styles.

Typography

Editions features two global font controls: the Body text font and the Accent font. The Body text font applies to virtually everything except menu titles, buttons, and navigational headings, which are the domain of the Accent font.

And while we’ve included numerous alternatives, we do recommend the default fonts—Neuton and News Cycle (in the Light Preset), and PT Sans and PT Serif (Dark).

Colors

And virtually every colour in Editions is customizable too, with clear, self-explanatory names in the Theme Settings. You can also choose between light and dark versions of the theme’s feature elements.

Screen Shot 2016-07-26 at 1.48.42 PM

Click on the swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors. Alternatively, you can enter in a specific hexcode in the bottom right corner.

Layout Options

Header

Logo

Your store’s logo provides branding for your site and a clickable link to return to the homepage.

To replace your store title with a logo, upload a logo image in your theme editor, under the Header section. The maximum recommended size for logo images is 580px wide or 100px tall.

Favicon

A favicon is the small graphic that appears to the left of the page title at the top of your browser window.

To upload a custom favicon for your store, first create a square 16 x 16px image. We recommend that the image be saved as a PNG.

In the Header section, enable Use a custom icon optionand click Choose file to upload your image.

Navigation

To add links to your navigation menu, go to Online Store > Navigation. You’ll find two pre-populated two menus: Footer and Menu. You may edit these menus or create your own.

Multi-tiered Menu

editions-multi-tier

Display a multi-tiered list of your collections and products. First toggle the Enable multi-tiered menu option.

Menu

Display a footer menu by choosing one from the dropdown provided.

Payment Options

And, last but not least, Editions’ footer features convenient and clear icons for denoting what payment types your store accepts—including Visa, Amex, Mastercard, Cirrus, Discover, and Paypal—each togglable within the Theme Settings.

Home Page Features

Home Page

Page Layout

Under the Home page section of the theme editor, there are two page layout style options: Minimalist and Bold. Changing this option will make subtle adjustments to the footer, header, and to borders. Minimalist has been optimized for the Light preset and Bold has been optimized for the Dark preset.

Content Layout

There are two options for the content layout for your home page, which can be set to Single Column or Double column.

Background

Under the theme editor’s Home page section, you can upload a large high-quality image — ideally 1024 x 768px — for your background and control how it is displayed and positioned in your theme settings. You can also select the option to Fix background position, so the background does not scroll with your site’s content.

You can also toggle the option toe Show background image on all pages.

Featured Text

The Heading and Subheading, displayed beneath the slideshow on the homepage, are toggleable and customizable.

Slideshow

Editions’ customizable product slideshow can hold up to five slides, each linking to a page or product of your choice. Simply upload your desired images – ideally 940 x 444px – then set each slide’s desired Link Url page and select your preferred option for the Rotation interval (5, 10, or 15 seconds).

By default the next / previous buttons are translucent white. If this doesn’t work well with one of your images simply select the Invert slideshow control colors option, enabling translucent black buttons.

Featured Collection

Show up to three featured collection by using the dropdowns provided. The featured collection section has a customizable title, and you can toggle on or off the options to Show collection titles or Show product count.

Featured Products

The featured products section has a customizable title, and can be customized to display 4, 8, 12, 16, or 20 products from any of your collections.

Featured products on Editions’ homepage also feature a slick one-click overlay, with two buttons: the top, “eye” link to the product’s page, and the other “plus” button, a simple single-click add-to-cart button.

edition_overlay

For items with variations (size, color, etc.), an additional item-option dialog will display after clicking the add-to-cart “+”

editions_dialog_shot_2_grande

Twitter Feed

Editions’ Twitter feed displays your 3 most recent tweets in the footer. In the Home page – Twitter section of your theme settings, you will find an option to enter in your Twitter account information.

Simply enter in your username and choose whether you would like to display your retweets. Voila!

Instagram Feed

The Instagram widget allows you to display either images from your personal/company Instagram feed, or images with a particular tag from the Instagram community. Enabling the Instagram widget requires an access token, which you can grab from here.

Featured Blog

Show your most recent blog post on your homepage by toggling on the option under Home page – featured blog and provide a title for this section.

Products and Collections

Product Page

Related Products

Enable related products to display products of the same collection at the bottom of each product page.

Image Zoom

You can also enable image zoom, to let your customers so your products in closer details. For zoom to work, we recommend that images be 900px wide.

Collection page

Editions allows you to control how many products are shown on a single page by setting the Number of products per row and Number of rows.

Change the page navigation from click to loadinfinite scroll, or traditional pagination.

Tell you customers what products are on sale or are sold out by toggling the option to Enable ‘sale/sold out’ banner.

Putting products on sale is simple. When editing a product, select edit on the variant your want to update (found in the Inventory & variants sections. Enter your sale price in the price field and the original price in o the Compare at price field in your when editing a product.

Finally you can disable quick shop.

Social media icons

Editions will list social icons to link to your social network URLs. To set this up, go to Social media section of your theme editor to enter in your URLs into the fields provided. Accepted networks include: Facebook, Twitter, Google+, Instagram, Kickstarter, Vimeo, and Youtube. Editions also supports an icon for Email.

Newsletter

Setting up MailChimp

  1. Login to MailChimp and select Lists from the menu.
  2. Click the settings icon and select Signup forms from the row of tabs.Screen Shot 2015-09-08 at 11.53.26 AM
  3. Select the Embedded forms option.
  4. Scroll to the Copy/paste onto your site box and locate the form’s action attribute.Screen Shot 2015-09-08 at 11.56.27 AM
  5. Copy and paste the form’s action URL into the corresponding field in the Footer or Newsletter section of the theme settings page.

Setting up Campaign Monitor

  1. From the Campaign Monitor dashboard, select Lists & Subscribers and then click on your desired list.
  2. Click the Sign up forms  in the right hand sidebar.
  3. Select Copy/paste a form to your site.
  4. Leave the email box checked and uncheck all other boxes, then click get code

    slack-imgs.com

  5. From the form you need to grab 2 things: the Action URL and the Input IDslack-imgs-1.com

  6. Add both to your Newsletter section in your Theme Customizerslack-imgs-2.com_-1

Cart and Checkout

Both the cart and checkout come with a slate of settings to customize your customer’s shopping experience

Under the Cart section of your theme editor, you can toggle on the special instructions feature, which gives your customers the ability to provide special instructions for shipping upon checkout.

You may also show a shipping calculator to let your customers calculate shipping fees before proceeding to the checkout. Use the field to set a default country.If a customer is logged-in, their default shipping address country will be selected.

Under the Checkout section of your theme editor, you’ll be able to add custom banner images, logos, and backgrounds, as well as customize the fonts and colors.

Advanced

This section covers more ‘under-the-hood’ advanced settings and customizations.

Adding Google Fonts to your store

While we have hand-selected a group of web-safe fonts to match the theme, it is possible to add your own fonts with a bit of editing of the code in your back-end. We’ll walk you through each step to select the font you want and then integrate it into your theme.

There are other fonts services available, but we’ve selected Google Fonts because they’re great to work with: they’re free, open-source, and guarenteed web-safe.

Select a Font

Go to Google Fonts to find a font you want. As an example, if you want Open Sans Condensed, click on the button with the right arrow for quick use.

openSansCon

You’ll then want to select which styles of the font you’ll want. In the screenshot, all three available styles are selected:

Image 2015-11-25 at 2.27.30 PM

Then scroll down to the section entitle  Add this code to your website. Click on the standard tab and copy the code provided.

Keep the Google Fonts page open, as you’ll want to return to it later.

Add the font to your store

From your store dashboard, navigate to Online Store > Themes and then click the ‘more’ () button and Edit HTML/CSS.

In the layout folder, click on theme.liquid.  Find the </head> tag in the code editor and then paste the code you copied from Google Fonts on a line above the </head> tag.

Then click Save.

Add the font to your settings

Staying within the code editor, go to the Config folder and click on settings_schema.json

Search for “Fonts” or “Typography” in the code. Then find the section you would like to add to (e.g. Body,  Store Title, Heading, Button, etc.). Directly under  "options": [ paste:

     {
       "value": "",
       "label": "",
       "group": "My added fonts"
     },

Then, back on the Google Fonts page, in the Integrate the fonts into your CSS section, copy the CSS code. Past this code inside the quotation marks of the value attribute.

Delete the font-family: text and the semicolon ; from the CSS code that you pasted.

Type the font’s name inside the quotation marks of the label attribute. The name you type here will appear in the font selection drop-down menu on your Customize theme page.

 

     {
       "value": "'Open Sans Condensed', sans-serif",
       "label": "Open Sans Condensed",
       "group": "My added fonts"
     },

Click Save.

When you go to the typography section of your theme editor, you will know find your new font in the dropdown(s) provided.

World-class customer support

Our support staff is committed to helping you solve any problems you encounter along the way. Exceptional, human support matters to us a great deal. Contact us or check our help centre if you need any help at all.