Garbini Shopify Theme


We tried to make the theme settings as easy to follow as possible. If you have questions after reading this documentation, please don't hesitate to contact me and I'll do my best to help you.

Thank you for your interest in the Garbini Shopify theme! Installing the theme is fast and easy. If you don't already have a Shopify store setup, you can start a free 14-day trial (no credit card required). Once you have a store setup in Shopify, login to your admin area and click Themes in the left navigation menu. From there, click Upload a theme in the upper-right corner of the screen. A window will appear. Click the Browse button and navigate to the vector.zip file from your ThemeForest download. Note: If you have downloaded the full installation and documentation file from ThemeForest, you will first need to extract the zip file. Inside, you will find the file called garbini.zip.

install-1

Once the file finishes uploading, the Garbini theme will show up as an unpublished theme. To active it, click the Publish button. A new window will appear. Choose Publish as Main and then click the Publish theme button to make Garbini your active theme. Note that this theme is fully responsive so there's no need to publish a separate mobile theme!

install-2

The theme is now installed and ready for use! Now click on the Theme Settings link and continue on with the next section.

By default, Shopify does not include any product review integration. The good news is, Shopify created a free app you can install to add this functionality. Setting up this application normally requires some basic theme modifications, but we've integrated these modifications into the Garbini Theme so this great application will work right out of the box!

Setup and Installing the App

To use the product review integration, you first need to install the application. To do so, follow these instructions:

After installation, you may be prompted to setup the app by modifying your theme files. This is not necessary! We have made the modifications for you! Once the app is installed, you can enable the integration with the theme. This setting is found under the Setting Up Your Product Page section in theme settings. More information can also be found later in this documentation.

You can access the theme settings page anytime. While in your Shopify dashboard, click the Themes link in the left-hand menu. Look for the Garbini theme, then choose Theme Settings.

Theme Presets

theme-presets

We have built-in two Theme Presets that you can access on the left side of the Theme Settings page. The two options are Blank Slate and Theme Demo. If you like the look of the demo theme, choose the Theme Demo option and the settings form will automatically fill out with most of the settings we used in the demo theme. If you'd prefer to start from scratch and make all selections yourself, choose the Blank Slate option.

Navigating the Theme Settings Page

The Theme Settings area contains a series of menu items that you can expand and collapse by clicking on them. This is where you choose all your options for the theme. We've tried to make the settings as intuitive as possible. When you first enter the settings page, the Page Layout panel (shown below) should be expanded by default.

This is pretty simple. You choose whether you want your site layout to be Wide or Boxed. In Wide mode, many elements of the site, such as the top bar, the home page slider, and the footer extend to fill the full width of the browser window. In Boxed mode, the site contents are displayed in a fixed-width "box." If you choose a Boxed layout, you have the opportunity to set a background color or image. See the next section for more details. We will now go through the rest of the Theme Options settings one-by-one.

In this section, you choose the colors for your site. The includes background colors for sections like the top bar and footer, as well as text colors. Let's explore the options one at a time.

Primary Color

The Primary Color option is one of the key features of the Garbini theme. With this one setting, you can change the entire look and feel of your site! This color controls the appearance of many site elements, including link colors, buttons, navigation hover states, headings, and much more. Simply change this one color setting and the theme does the rest! Below is a screenshot that gives you an idea of what all elements this setting controls. Click on it to enlarge.

garbini-primary-color

The default blue color used in the demo is #63d0fd.

Body and Text Colors

Top Bar

Select the background color for the top bar here. The top bar appears at the very top of the page and displays user login information, the search box, and shopping cart information. The default background color is #f8f8fd.

Footer Colors

garbini-footer

In this section, you can choose the font styles and typefaces you want to use in your headings and standard text throughout the site.

Heading Fonts

Body Fonts

Body fonts are chosen in the same way as heading fonts above. You can choose Google or standard fonts. The default body font used in the demo is Raleway.

This section contains text fields to enter your store's link to many different Social Media sites. These links are used to display the social media icons in the footer of all your site's pages. The most popular sites for e-commerce stores have been selected for you. Simply paste in the links for the networks you use. If you don't have an account at a particular network, just leave the field blank.

The options for setting up your homepage may seem daunting, but worry not, it's actually pretty simple to make your homepage look beautiful.

 


Overview of the Homepage

 

By default, the homepage consists of up to seven main sections. You can turn individual sections on and off as needed. The sections are

Setting Up the Slideshow

The homepage slideshow allows you to add up to seven slides that will automatically rotate at the top of the screen. Unless you choose a boxed layout, these images fill the full width of the user's screen regardless of the size of their monitor, so you'll want to upload high-resolution images for these. We recommend at least 1600px wide (1200px in a boxed layout). For best results, keep all your slider images the same aspect ratio (e.g. 1600px x 450px). Here is an overview of the options you can add to each slide in your slideshow:

Using Page Content

If you wish, you can display the contents of any page you've created in your Shopify dashboard on the homepage. To create a page, click the Pages link in the main menu of your dashboard and click the Add a Page button in the upper right-hand corner. Showing page content on the homepage is turned off in the demo.

Three-Column Ad Section

Showcase three things about your site in style with these column ads. Images should be sized at or around 370px x 275px for optimal viewing. You can also supply caption text for these. Here's a rundown of your options for this section:

Setting Up Featured Collections

Setting up featured collections on the homepage is a two-step process. First, you have to create your collections within Shopify and assign products to those collections. For more information on how to do this, please consult the Shopify documentation. Secondly, you have to create a link list specifically called "Featured Collections" (without the quotes) and create links to the collections you want to feature.

The images for the featured collections are pulled automatically from the first product in that specific collection. They are displayed in a carousel that rotates automatically or by using the arrows on either side. This carousel is mobile-friendly and can be controlled using touch/swipe gestures on mobile phones or tablets.

Full-Width Ad Section

This is yet another ad section you can optionally show on your homepage. It displays a subtle image background that scrolls with a beautiful parallax effect. It can be used for just about any purpose, so be creative! Here's more information on the options for this section:

Featured Products

homepage-5

Setting up the featured products section is very straightforward. You simply enter a title that will appear as a heading above the carousel, and choose a collection to feature. This section will then automatically show up to eight products in an attractive grid.

Blog Entries

homepage-6

Displaying the latest blog posts on your homepage is also an easy process. Simply give the section a title, and choose which Blog you would like to display posts from. You can also specify how many blog entries you want to show on the homepage, and how they should be formatted (2, 3, or 4 column grid).

The Garbini theme includes several options to help you setup your collection pages.

garbin-collection-image
 

Product Display Options

Sidebar Options

You can optionally show a sidebar on your collection pages. There are various widgets built in that you can enable.

We wanted the product page to be as flexible as possible. Let's take a look at the options you have for laying out your product page. There are three possible ways to lay out your product descriptions:
 

garbini-product-tabs
Product Tabs
garbini-product-tabs
Product Accordion
garbini-product-tabs
Description Only

Product Reviews Integration

The Garbini theme includes integration with Shopify's free Product Reviews application. If you wish to enable this functionality, you'll need to install the application (instructions are in the Product Reviews Integration section earlier in the documentation), then simply check the Enable product reviews checkbox and the theme will do the rest.

Social Media Meta Tags

Social meta tags include Facebook and Pinterest Open Graph Tags and Twitter Cards. These are enabled by default to make the store more accessible on different platforms, and more readable for search engines. Simply enter your Twitter handle with the "@" symbol before it to take advantage of this feature.

Related Products

To begin setting up your blog, you first need to create at least one blog category in your Shopify admin area. Then, you need to create some blog posts and publish them in the category you setup previously. For more information about creating blog categories and posts in Shopify, please review the Shopify documentation.

How to Assign a Featured Image to a Blog Post

Unfortunately, Shopify does not come equipped with an option to select a featured image for your blog posts by default. In order to enable this functionality, we're using the Excerpt section of the blog post to populate the featured image. To use this, access the blog area in your Shopify dashboard and look for the Blog Excerpt field. Then click the icon to insert an image.

blog

Browse your computer for the image you want to use, choose it, and it will display in the window. Save the blog post and that image will be assigned as the featured image of the blog post. Note: it is important that you do not enter other text or images into the excerpt area. There should only be one image in this box and no text. The suggested resolution for these images is at least 1200px wide.

Sidebar Options

The Garbini theme comes with multiple sidebar options to display on pages of your site. These widgets allow you to show content such as recent blog posts, your product tags/categories, or products on sale The options in the theme settings for the sidebar are fairly basic in nature. First, you can specify whether or not you want to show the sidebar, then you can select which widgets to display and give them titles. The following widgets are available:

Since the options for these three categories are fairly short and simple, we have combined them into one section. Here's what you need to know:

Cart Page

The only option available for the cart page is whether or not you want customers to have the option of adding notes to their orders when they check out. If enabled, a text area will display on the cart page and the data entered there will be stored in your Shopify dashboard with the rest of the order information.

Contact Us Page

In order to setup your Contact Us page, you must first create the page in the Shopify dashboard, and assign it the Contact page template. To do this, follow these steps:

We've also included support for a Google Map on the contact page. You can optionally turn it on or off in the theme settings area. In order to show the proper location of your store on the map, you need to provide the latitude and longitude coordinates. To get the coordinates for your address, visit this page and enter your store's address in the box at the top. The latitude and longitude coordinates will be displayed in the box below the map. The format should be something like 29.920426, -85.046652. Simply copy and paste these coordinates in the appropriate fields and the map will display properly.

Search Settings

We have included three different options to display your search results page. This page appears after a customer performs a search. First, you must decide whether or not your search results should return only products, or if it should search the entire site (pages, blog posts, etc.). Once you've made this determination, you can select accordingly. Here's what each option will display:

Confused? Have questions? Please don't hesitate to contact me and I will try to help. Thanks for your interest in the Garbini theme!