Overview

Installation

To install theme, first unzip file you downloaded. Then find annabelle-theme.zip and upload to Shopify.

Support

If you have any problem or question, feel free to contact us via e-mail.

Contact E-mail
support@spacesquirrel.net

Theme Options

This theme comes with lot of options that you can customize to fit your needs.

After you install theme, you can go to Theme Options Page in Shopify Admin and start modifying options

Below in Fig. 1 you can see how theme options should look like after you install theme.

General

Here you can define general options for whole site.

Theme Layout

Theme comes with 2 different layouts:

• Full Width Layout
• Use Full width layout for full width container, spanning the entire width of your viewport.
• Boxed Layout
• Use boxed layout if you want width of container to be maximum 1170px

*both layouts are responsive, they will addapt to different screen sizes

Check examples below to better understand difference between full width layout and boxed layout.

Wishlist

We added Wishlist function to this theme. In order to setup wish list you need to complete this steps

1. Enable Wishlist in Theme Options
2. Create new page called Wishlist and change page Template to "page.wishlist" See Fig. 2
3. Select newly created page in Theme Options under 'Wishlist Page' selector

Favicon

Simple option to add Fav icon to site. You can read more about Favicon

Favicon image must be in PNG format

Blog

Set number of blog posts per page.

Payment Icons

Select Payment Icons you want to show on 'View Cart' page.

Colors & Fonts

You can change main theme colors and fonts.

Fonts: Theme is using Google Fonts. When you want to change Font, choose new one on Google Fonts and then copy just font family parameter from Google Fonts URL, for eg. check Fig. 4. below. All I need to do in this example is copy font family name as: 'Open+Sans:400,700'

Header

Here you can set logo as image and you can set message in header. Check out Fig. 5. to see where message is in header. For message text you can use icons from FontAwesome library

Here is default example for message in header:

<i class='fa fa-truck'></i> Free shipping on all orders
			

And here we can see how it looks on site:

Navigation

By default, main navigation will use link list called 'main-menu'. Just find that link list (or create one if you don't already have it) fill it with links and they will appear on site.

Shopify has no concept of drop-down menus.

Drop-down menus in Shopify themes are a hack that relies on a naming convention. To create a drop-down menu, the merchant must create a link list that has the same name as the link he wants the drop-down for.

For example, if he wants a drop-down under a 'Shop by brand' link (say, he has such link in his Main Menu), he needs to create a linklist called 'Shop by brand', and populate it with links. Once he has done that, there'll be a drop-down under 'Shop by brand'.

Shopify has a visual how-to guide:

The naming convention hack won't work well if a shop's navigation uses non-English characters. There's a much more verbose coding solution that handles non-English characters :

Mega Menu

Mega Menu works similar to drop down, all you need to do is to change mega menu trigger in Theme Options. Mega menu trigger should be link text under wich you want mega menu to appear. Except that you should also fill all other mega menu options: choose submenus (3 in total) and 2 mega menu images

Footer

• Footer Menus (up to 4 link list)
• Social Icons - links to your social profiles
• Copyright message at the bottom of site

Collection Page

Products per row

You can choose between:

• 2 products per row
• 3 products per row
• 4 products per row
• 5 products per row

Number of products per page

How many of products you want to show on one page. Combine this with your 'Products per row' selection to get best results (eg. you choose 3 products per row and 9 products per page to have nice layout - products will finish at the end of page)

Show 2nd image on mouse hover

When you hover product in collection page, 2nd product image will be showed if this option is checked.

Show Color Swatches on collection page

This option will put interactive color swatches on collection page. Checkout Fig. 6. for screenshot

Highlight every # of product with large box

With this option, you can highlight every # product with large box and description of product. This adds interesting dynamics to catalog page.

Show Quick View

Each product on catalog page will have icon to quick view.

Filters

Filters works together with link lists. Here are steps to setup filter:

1. First you define link list that you want to put in filters, for eg. create new link list 'Colors' with links Red,Blue,Black,White... Checkout Fig. 8. to get idea how it looks
2. Now you can tag related products with tags that corespond with link list. So if our product comes in Black and Blue color, we will put 2 tags in product: black, blue (checkout Fig. 9.)
3. Last step is just adding configuration to theme options. Check 'Show Filter on top of collection page' and then select Filter Link Lists that you created (in our case Colors).

Another option you can add is "Sory By" widget on collection page. You can toggle it with 'Show Sort By on top of collection page' property in Theme Options

Product Page

Layout

Layouts are related to section of product page below product images & price. Look Fig. 10.

You have following sections:

• A - Default - Description section - different for every product (pulls description from shopify product)
• B - Custom section (you define fixed text across all products. for. eg. 'Size Guide', 'Shipping info', etc... )
• C - Product Reviews section - Shopify App Product Reviews needs to be installed to use this section

B- Custom section in Theme Options you can enter text that will be showed on all product pages. Addition to text, you can use Size Chart widget zoom. So you need to upload 2 images. Size Chart Small Image and Size Chart Full Image. Small Image will link to Full image. When user click on Size Chart Small, popup with Full Size Chart Image will be showed

You can place widget inside your custom text using %SIZECHART% tag. Here is example of custom text and size chart that was inserted at the end of text:

<h2>SHIPPING</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<h2>SIZE GUIDE</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.%SIZECHART%
			

Show Color Swatches

Instead of showing text swatches (like size, Fig. 11) you can use Color Swatches Fig. 12

For Color Swatch we used offical Shopify Guide Adding color swatches to your products. There you can find all details.

Enable Ajax on Add To Cart button

If chcked then Add To Cart button will not realod page. It will only refresh and drop-down My Cart section.

For this options we used offical Shopify Timber Theme Solution http://shopify.github.io/Timber/#ajax-cart

Related Products

You can enable Related Products carousel on product page. Again here we used offical Shopify Guide - Related Products

Share buttons

You can enable/disable specific social networks that you want to show on product page share buttons

Home Page

You can add lot of sections to home page. Check Fig. 13 to see overview of what is possible to add

Each section can be enabled/disabled. Don't forget to enter all data into theme options such as links, titles, subtitles...

Slideshow

There are two types of slideshow: Overflow & Full Width. Check Fig. 14 to see how they look

Overflow slideshow is specific because it will go over menu items. Depends on what colors you choose, you need to modify Slideshow colors for overflow slider, because default colors might not be visible in front of slides.

On Fig. 15 you can see overflow slideshow and custom white color links. If you go to our Demo 1 Shop you can see it live. That white color of links will change to black on other pages except on homepage. On homepage where we have overflow slider and white color looks much better then black one. To change color options look under Slideshow Colors

Money Options

You can add currency switcher to your site. Orders will be processed in store default currency and not selected currecny. For this feature we used offical Shopify Guide Show multiple currencies in a drop-down list on your storefront

Newsletter

You need to setup MailChimp newsletter and grab from action URL. Here is guide how to do it: Get a MailChimp form action URL

Newsletter subscription from comes on 3 places in theme:

1. Header (dropdown)
2. Footer
3. Popup (after page is loaded)

You can choose where to show it (we suggest to show it on all 3 places)

Instagram Integration

For Instagram integration, you first need to grab Client ID from Instagram site

To grab Client ID:

1. Login to Instagram (if you haven't already) and go to http://instagram.com/developer.
2. Click on "Manage Clients" in top right corner.
3. Click on "Register a New Client".
4. Enter data in form
5. Click on "Register" and after that find & copy your "Client ID".
6. Enter the "Client ID" on Theme Options under Instagram - Instagram Client ID

Now you can enable 'Show Instagram Feed on Homepage', put hashtag you want to track and modify other options like title, button, link...

After you save options, your homepage should have Instagram Feed.

Other

Contact Page

Theme supports contact page template with nice contact form. All you have to do is to create new page and select 'page.contact' as page template

PSD Elements

Theme comes with Photoshop PSD source file for some of the site's elements. We have:

• Anabelle-slides.psd big overflow slideshow
• Anabelle-slides_small.psd full width framed slideshow
• banners.psd small banners below slideshow
• Size_chart.psd size chart elements
• mega_menu_banners.psd small banners for mega menu dropdown

You can find them in /PSD subdirectory

Translation

Annabelle theme supports translation. It comes with default English language. Look into Shopfiy Guide Translating your theme into another language to see how to create new language (or change existing one)

Change log

• 1.0 - 8. July 2015 - Initial version