Documentation
Pocket - Mobile Shopify Theme
Pocket is sleek and simple theme designed for mobile devices. It customizes easily and completely, perfectly matching any non-mobile theme you choose.
Pocket: Features
- Four handcrafted presets: Dark, Minimal, Vintage, and Stylish.
- Modular homepage with togglable sections .
- Complete control over all colours and typography, with access to 24 fonts from Google Web Fonts.
- Optional Boxy Style mode for added element and module definition.
- Round UI option to soften/round corners throughout the theme.
- Easy-to-setup Video slides for the homepage slideshow.
- Simple integration of MailChimp and Campaign Monitor mailing lists, plus a built-in customer contact form.
Pocket: Documentation
For a complete list of customizable fields/options, go here.
Layout Options
Colors and Fonts
Pocket provides an unprecendentedly large array of color options, making sure you're able to finely-tune pocket to match your desktop theme and brand perfectly.
Pocket also comes packed with 24 fonts, including: Lato, Montserrat, Arimo, Roboto, Karla, Open Sans, Source Sans Pro, Helvetica/Arial, Archivo Narrow, Oswald, Fjalla One, Titillium Web, Merriweather, PT Serif, Alegreya, Lora, Droid Serif, Crimson Text, Times, Georgia, Arvo, Rokkitt, Robot Slab, and Bitter.
Round UI
By default, user interface elements have standard hard/90° corners. Enabling Round UI in **Global Settings** changes these to softer, rounded corners.
Setup: Boxy Styles
Pocket's Boxy Style layout gives you additional colour, background, border, and dropshadow options for your store, helping you better differentiate each section and element.
To enable Boxy Style, simply check "Enable boxy style layout" in **Global Elements**. Boxy Style options apply to:
- Home page - featured collections, featured products, recent articles
- Collections page - collections
- Collection page - products
- Blog - articles
Header
Pocket's header or "utility" bar contains two slide-out panels: a navigation panel self-explanatory, and another for a mini-cart, where users can access account pages and checkout.
If you'd rather your users be able to access these elements at all times, simply enable the 'sticky utility bar' option, and it will always remain visible at the top of your store.
Home page
Setup: Video Slides
Setting up a video slide is super simple. All you need to do is copy/paste the provided Embed code from your video host of choice (e.g., Vimeo, Youtube, Kickstarter) and paste it into the appropriate field. Here's an example of some embed code from Vimeo:
<iframe src="//player.vimeo.com/video/82012299?title=0&byline=0&portrait=0&badge=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
**Hint**: sometimes video service providers will add a short sentence or link after the video, make sure to remove this text from the code you're pasting in.
If you enable the video slide it will convert the slideshow into a video viewer and your other slides will be hidden.
Mailing lists
Pocket supports both MailChimp and Campaign Monitor email platforms.
Setup: MailChimp
MailChimp remains one of the easiest and best options for integrated mailing lists in Shopify. Setup is wonderfully simple:
- Login to MailChimp and select 'Lists' from the left sidebar
- Select 'Signup forms' from the row of tabs ([screenshot](http://cl.ly/image/0i2O3V1P2N2E))
- Select the 'Embedded forms' option
- Scroll to the "Copy/paste onto your site" box and locate the form's action attribute ([screenshot](http://cl.ly/image/0m2F103Q2M3C))
- Copy and paste the action URL into the appropriate field in your theme's settings.
Setup: Campaign Monitor
Campaign Monitor is another great mailing list service, and is just as easy to setup:
- Login to Campaign Monitor and select the 'Lists & Subscribers' tab
- Click the 'Attract new subscribers' button ([screenshot](http://cl.ly/image/1E3k1z2i2t1F))
- Select the 'Copy/paste a form to your site' ([screenshot](http://cl.ly/image/3Z2T1I3P0U2B))
- On the right side, uncheck the name field and click 'Get the code' ([screenshot](http://cl.ly/image/3W3u0V3g3d1l))
- Copy and paste the form's action and the email input field's name into the respective settings in your Shopify admin ([screenshot](http://cl.ly/image/070W0c1q0t0f))
Custom Forms
In some cases you may want to add custom forms to your products, pages, or posts. To make sure that these elements are styled correctly, please use the following as a guide on how to markup your forms:
<form class="hide-labels">
<div class="input-wrapper">
<label for="name">Full name</label>
<input type="text" name="name" placeholder="Full name" value="">
</div>
<div class="input-wrapper">
<label for="name">Email</label>
<input type="email" name="name" placeholder="your@email.com" value="">
</div>
<div class="inline-input-wrapper">
<input type="checkbox" name="newsletter-signup">
<label for="newsletter-signup">I'd like to receive the newsletter</label>
</div>
<div class="inline-input-wrapper">
<input type="radio" name="newsletter" value="html">
<label for="newsletter-html">HTML newsletter</label>
</div>
<div class="inline-input-wrapper">
<input type="radio" name="newsletter" value="plain">
<label for="newsletter-plain">Plain text newsletter</label>
</div>
<div class="input-wrapper select-wrapper">
<div class="selected-text">Favourite chocolate bar?</div>
<select name="chocolate-bar">
<option value="" disabled selected>Favourite chocolate bar?</option>
<option value="mars">Mars</option>
<option value="snickers">Snickers</option>
<option value="mr-big">Mr. Big</option>
</select>
</div>
<div class="input-wrapper">
<label for="additional-instructions">Additional instructions:</label>
<textarea cols="40" rows="8" name="additional-instructions" placeholder="Additional instructions"></textarea>
</div>
<div class="input-wrapper">
<input type="submit" value="Submit">
</div>
</form>
If you'd rather show the labels, just remove the `hide-labels` class from the `<form>` element, and remove the `placeholder` attributes from all of the `<input>`s.