Posted October 05, 2011
Pixel Union's Jitensha defines storefront minimalism. Japanese for “bicycle,” Jitensha offers clean typography and easy usability, including full color, font, logo, and footer customization. With painless social media, mailing list, and blog integration, Jitensha gorgeously accommodates every aspect of your business.
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. Jitensha also supports custom (hex) colours for nearly any text field, including: header, footer, background, logo, and sidebar text; primary and secondary text; titles; accents/over-accents; links, active links, link background and hover text; and blog tags. We don't recommend straying far from the already beautiful design, but we won't be upset if you do.
Adding a logo of your own is simple: The optimal size for a logo of your own is 250 x 60 px. However, if you want to use our pre-rendered title you can customize its font and color.
Featured Product Marquee: The Featured Product image at the top of the page (e.g., the Hand-Polished Framesets, in the demo store) can be set to any image of your choosing, with an optimal image size of 960 x 405 px. You can easily alter all of the information in the tag from the backend.
Slideshow: Jitensha offers a 5-slide frontpage slideshow instead of the static marquee image. The image rotation frequency can be set to 5, 10, 15, or 30 second intervals, and the title and content colors can be customized as well. To set up your slideshow, head to the Theme Settings submenu titled “Slideshow.” Enable your chosen number of slides and upload your desired images; then, simply input your slides‘ link location, title, price and description in the corresponding fields.
Drop-Down/Sub-menus: Creating custom drop-down 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, simply create a new link list with exactly the same name as your parent menu. From here, it's only matter of populating that link list with 'child' links (e.g., "Brand 1," "Brand 2," etc.). For further information on the creation of sub-menus, see Shopify's wiki entry on this subject.
Product Lists: 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 called "Frontpage" and only show your best products. And don't worry--this special Frontpage collection won't appear in your Catalogue, so long as you select "Hide Collection from Listings."
“Share this Product:” 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.
Setting up Twitter in Jitensha is simple.
1. Go to twitter.com/settings/widgets
2. Click on "create new."
3. Click "create widget," don't worry about any of the options.
4. Find the number in the code after "data-widget-id" and copy it, then head back to your shopify themes settings page.
5. Head to the Twitter feed section, and paste the widget id you copied into the "Twitter Widget ID" field. Just make sure you've input your Twitter username/ID as well, and you're all set!
“List Form Action URL:” We've designed our themes to integrate with MailChimp in the easiest way possible. This field sounds esoteric, but all it's asking for is a specific URL found in your MailChimp list menu. After creating/logging into your MC account, go to your Lists page and click to view your preferred mailing list (or create it, then view it). From this List page, select the "For Your Website" dropdown menu and then the first submenu, "Signup Form Embed Code." Scroll down to the bottom of the wall o'HTML to find <form action="____"> and copy ONLY the URL contained in this action.
Now, head back to Shopify. Go to your theme settings and under either "Footer" or "Mailing List Options" (depending on which of our themes you're using) you'll see a box for "MailChimp list form action URL." Paste. Done!
Contact: As with all of our themes, if you have any questions, concerns, or suggestions regarding Jitensha, please don’t hesitate to contact us at firstname.lastname@example.org.
Styles: Check out the styles page, here.
[Updated regularly, we’ll be posting important update and version information here.]