Jitensha Theme Manual

jitensha8

Table of Contents

Basic theme setup

This section covers some basic settings to get your theme up and running.
Customization options and advanced settings can be found in the sections below.

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 jitensha.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.

JitenshaUpload

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

jitenshadem

Jitensha comes packaged with four theme presets that curate your store’s colors, fonts, and styles for you. Check out our store demos to see the Clean, Black, Chic, and Trendy presets.

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

Note: applying a preset to your theme will overwrite your current style settings.

Add your first product

To add your first product, click on Products in your dashboard sidebar. From the Products page, click Add product At minimum, you’ll want to add a Title, Description, Image, and Price.

See Shopify’s product manual for a detailed walkthrough. You may also want to check out how to configure variant images, set sale prices, or set up digital or service products.

Upload a 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 General section. The maximum recommended size for logo images is 250px x 60px.

We also recommend uploading a copy of your logo that is optimized for retina displays, which display images with a higher than normal pixel density. Using this option will ensure that your logo looks great on all devices (e.g., iPad with retina display). Retina logos should be uploaded at exactly double the dimensions of your regular logo. So if your regular logo is 140 x 80px then your retina logo would be 280 x 160px.

Important: If using a retina logo, the ‘logo height’ field is required. Enter the height of your regular logo.

To center your logo or site title, toggle on the Center logo (or site title) option

Add a contact page

Jitensha comes with a built-in customer contact form that is available for use on any page. Once you’ve create a new page, edit that page and change its template from page to page.contact.

The contact form will appear in your newly created and edited page’s sidebar.

Set up a navigation menu

Now you can add a link to your contact page — or any other page — in your 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.

Dropdown menus

jitensha-dropdowns

Creating custom dropdown menus is painless. From your main menu, head to the navigation tab and create (and name) your desired ‘parent’ menu (e.g., “All Brands”).

Then, create a new menu list with exactly the same name as your parent menu. From here, it’s only matter of populating that menu list with ‘child’ links (e.g., “Brand 1,” “Brand 2,” etc.). For further information on the creation of sub-menus, see our guide on setting up a dropdown menu.

Create a slideshow

Grid’s slideshow supports up to 5 images with an overlaying title, subtitle, and call to action button. The overlaying content can be set to align left, right, or center within the slide image.

The slideshow has a user defined rotation speed and can be set to appear at the full-width of the screen or constrained to the content width.

Add your slides’ link location, title, price and description in the corresponding fields. Then click Save.

Product management

This section covers how to manage and customize your products and collections.

Collections

Jitensha allows you to control how many products are displayed on a single page. Simply enter the desired number in Products per page.

Once you find the balance of the right amount of products, you may choose the display style of your collections as either Grid, which scales product images to mathc, or Flow, which gives more leeway to the natural size of your images while still aligning them neatly on the page.

Finally, you have the additional option to control the height of your images: would you like squares or rectangles? Change the number by multiples of 100 for the best results.

Social sharing tools

Screen_Shot_2011-11-29_at_5.38.46_PM_large

Fully integrated into every product page is an animated share this product widget, which allows your customers to share your store’s goods via Twitter, Facebook, Tumblr and email. No setup required!

External Links

Linking to external content is simple – just make sure to include “http://” before your desired address.

Customize your store

This section covers how set up theme features and customize the styles and layout of your store.

Background

jitensha7

You can upload a high-quality image for your background and control how it is displayed and positioned in your theme settings. You can also change the Background attachment option from Scroll to Fixed so the background does not scroll with your site’s content.

Jitensha’s background can also be set to a solid color using a hex input in the Theme Settings. Check out Color-Hex to find the right colour and its matching hex value.

Additionally, Jitensha comes with a preset Dark background image, in place of a custom image or solid colour.

Fonts & Colours

All of Jitensha’s fonts and colours are customizable. Jitensha’s Theme Settings allow you to customize the theme’s Text, Header, Secondary Header and Button fonts.

Promotional Area

The Promotional Area allows you to feature up to three custom images with a link. This space is great for sales or highlighting your best sellers. To span the full width of the container at all breakpoints, we recommend that your images be at least 1320px wide.

Featured Products

The first four products that appear on your homepage are fetched from any collection of your choosing – same for the secondary product list.

If you don’t want to fetch from a preexistent collection, you can always create a new collection that show products handpicked to be on your front page. And don’t worry, you can select Hide Collection from Listings, to hide this list from your catalogue.

Sidebar

The sidebar lets you feature recent blog posts on your home page. For a more compressed section, select the option to show posts without excerpt.

The sidebar also includes two navigational drop-down menus. Below your featured blog posts on your home page, customers can Shop by category or Shop by brand. Both options can also be toggled off.

Footer

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

Social Links

Jitensha allows you to easily set up links for Facebook, Twitter, Google+, Tumblr, and RSS in your footer. Enter in your personal links in the fields provided.

Payment Options

Jitensha 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.

Cart and checkout

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

Under the Shopping Cart section of your theme editor, you can enable or disable Cart Comments, which gives your customers the ability to provide special instructions for shipping upon checkout. You can also set the Row border color by using the color selector provided.

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

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.