Theme Documentation
Alba is a contemporary Shopify theme that elevates your products with large & focal imagery and a minimal grid layout. Highly customisable and with engaging features including Quick Shop & Quick Cart modals, Alba is perfect for a diverse range of industries. Try it out today for your store!
Feature Overview
Homepage features:
Add up to 6 slides with overlaying text and links. Display your slideshow in 2 variations or hide it entirely. Allow your customers to shop immediately with Frontpage collection. Add more personality by adding any page to your homepage and newsletter sign-up module.
Settings flexibility:
Alba orders a multitude of options and settings to get the most out of your store. Adjust your settings for image, colours, layouts and typography and much more. Optional layouts include 2 product page layouts, 2 product grid layouts and 2 homepage slideshow layouts enabling you to create a unique experience for your store.
Large focal product imagery:
Studies show that large product images can increase online sales by up to 9%. Our product pages use beautiful focal imagery to optimise your sales.
Additional features of note:
With intuitive Quick Shop and Quick Cart modals users are instantly able to select and buy your products within several clicks, removing fuss and getting to whats important for both merchant and customer. Alba is perfect for any size inventory with refine and filter snippets.
SEO Friendly:
Alba uses Google Rich Snippets to optimise your product search listings.
Language Support:
Alba has international language support for English (default), French, Spanish, German and Portuguese.
Recommendations
- We recommend that you upload all product imagery with the same image dimensions (the image width and height). This will make the collections’s page layout more consistent and attractive.
- We recommend that you upload all product imagery with the same image dimensions (the image width and height). This will make the collections’s page layout more consistent and attractive.
- For your home page slideshow use strong landscape imagery to attract your customer and make a great initial impression. If you don’t have access to good imagery, then start with this Shopify article.
- We recommend particular image dimensions for your home page sideshow images, if you are using the standard full width image slideshow then make your images 1440px by 598px and if you choose to use the alternative slide layout then make your images 1360px by 511px.
- If you have enabled the 2nd product image on hover option, located in the ‘Collection Page’ section in the Customize Area then we recommend that you upload product images with consistent aspect ratio, otherwise the 2nd image will not display. Learn more.
- We recommend that if you want to use the full image gallery option then they should upload product images with minimimum width of 1200px to prevent images displaying poorly.
FAQ's
Q: What font should I use?
Alba comes with 2 presets with some carefully selected fonts already chosen for you. If these aren’t quite right for you, you can easily select from over 40 web-safe or Google Web Fonts, just go to Customise theme > Typography.
Q: Can I add a font I’ve selected myself?
Alba comes with a selection of standard web-safe fonts as well as a great choice of Google Web Fonts all free to use. If you wish to add a more custom font then you would probably need to hire a developer to write the code for your store.
Q: How do I achieve the slide effect on click of the 'Shop’ button in the main menu, just like the demo store?
Simply select that your 'Shop' link, links to 'Web address' in the drop-down and add the following in the input field, ‘/#featured-products' see image below for example.
Q: How do I add page content to my Home Page?
Simply go to the Customize Theme > Home Page > Homepage - Page Content section towards the bottom and choose which page you want to display.
Q: Does this theme support Variant Images?
Yes, simply apply an image to the each variant in your store admin and Alba will display that when you select the variant on the product page.
Q: Why aren't my product images scaling up?
To ensure that your image scale up, go to 'Customise theme > General Settings and check the enable scalable images checkbox'.
Q: How do I add a dropdown menu to my navigation bar?
It couldn’t be simpler, simply toggle on the Main Navigation Drop-down setting in your Customize area located in the General Settings and then follow this Shopify tutorial to add a dropdown menu.
Q: Where do my sidebar link-lists go on the mobile version of my store?
On mobile versions, all of the sites core navigation is placed inside the mobile menu which can be accessed by the 'Shop' button. To ensure your sidebar link-lists are carried through to the mobile version of the store, an additional link-list needs to be created containing links to your sidebar link-lists. To add this second-level navigation, simply follow this guide. Notice in the image below, how the links in the 'Shop' link-list match the titles of the sidebar link-lists.
Q: How can I add second-level navigation lists in my mobile menu?
To add second-level navigation lists, simply follow this guide.
Q: I want to include vendors for some, but not all my products, how do I achieve this?
Shopify automatically adds the name of your store to the product vendor field when adding a new product if you do not want the default to display then simply type ’None’ in the input field.
Customization Walk-through
Shopify is a powerful yet simple platform to use, but if you're new to it all then you might like to start with the Shopify Manual.
Brand your theme:
Upload and enable both a favicon and your logo for your store, to replace your site title text that comes as standard.
Logo Size:
It is required that you enter the height (pixels) of your logo, so it displays properly and scales as it should. The maximum logo dimensions are 450px wide by 200px high. The uploaded file will be resized to fit within those constraints. Create a retina logo which will display on devices with a higher pixel density (e.g iPad Retina Display). They are simply double the dimensions of a regular logo so for example, regular size at 100px x 50px would be 200px x 100px for retina.
Presets:
Alba comes with 2 pre-constructed Presets (East and West) for you to get going immediately but you can adapt settings and options and then save your own preset. Simply adapt the store as you wish through the other sections in the Customize theme area and then go to 'Presets > Save current as new preset’.
Typography:
Alba offers you a choice of changing the font and weight for both your heading and body text content with a great choice of Google Web Fonts and Web-safe fonts.
Colors:
Completely customize your theme with an array of options, simply adapt the store to adhere to your brand colors.
General Settings:
Here you can toggle off/on the Quick Shop feature if you would prefer. To add drop-downs to your main navigation simply toggle the setting on and follow this tutorial to add the link-list in your navigation settings.
Header:
Here you can choose to use your custom logo and favicon as well as the font choices for the fall-back logo font.
Footer:
Toggle on/off your choice of link-lists as well as add content to your brief About section, you can also choose to show a copyright and social media links.
Sidebar:
Here you can add sidebar navigation with up to 5 link lists as well as optional elements including displaying sort by, shop by type, shop by vendor, shop by tag.
Home Page:
This section enables you to add up to 6 slides for your home page slideshow with accompanied text titles and links. Also choose how many products to display on your frontpage collection (6, 8 or 12) and add your choice of additional page content to the home page.
Collection Page:
Choose from 2 product grid layouts (Level or Staircase), a selection of how to display Collection titles and descriptions and how to present products within the product grid layout. Simply toggle on/off depending on which one you prefer.
Product Page:
In this section, Alba gives you the choice of 2 product page content layouts, 2 displays for product variants (swatches or drop-downs and the ability to show related products on each product page as well as other features.
Blog Page:
Here you can adapt both the main blog page and individual article pages with choices of which relevant content to display.
Cart Page:
Allow customers to leave a note with their order or disable the Ajax Quick Cart Modal Drawer so that instead of opening the Quick Cart you can adopt the traditional link which directs to the full cart page.
Pages:
Simply show Page Titles e.g About, Contact and so on.
Contact Page:
This section allows you to enable additional contact page content whether that be a brief message or a postal or store address. To ensure that this page displays as a contact page select the template ‘page.contact’.
Window Pop-ups:
A popular feature within e-commerce, you have the choice to show a newsletter or offers/information pop-up window on load of your store. If you are using the Newsletter Pop-up then fill out the fields on the Customize Theme > Newsletter section as well.
Newsletter:
This is where you can toggle on your homepage newsletter section for customers to sign-up to your Mailchimp mailing list. Mailchimp is simple to use and once you are signed up follow this tutorial on how to find your Mailchimp form action URL.
Social Sharing:
Insert your Social Media account links for Facebook, Twitter, Pinterest and more as well as enabling your Product Page Sharing Links for individual products
Register / Login Pages:
Add additional page text content for customer register and login pages.
Money Options:
Here you can add additional currency selectors for international customers to use, simple add your preferred choices and then follow this tutorial to add the functionality to your shop.
Shipping Rates Calculator:
Allow your customers to calculate how much it will cost to ship with this useful Shipping Rates Calculator located on the Cart Page.
Checkout:
A choice of custom backgrounds and images to follow through onto the Checkout stage of your store.
If there is something we haven’t covered or that you are struggling with then we are happy to help, just contact us at support@hatchinc.co with as many specifics about your issue as you can and we’ll get back to you.