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.
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!
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!
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.
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.
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.
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.
The default blue color used in the demo is #63d0fd.
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.
In this section, you can choose the font styles and typefaces you want to use in your headings and standard text throughout the site.
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 provides options for your site's logo, favicon, and your main navigation menu. Here are the options you can choose:
In order to setup your main navigation, you must use Shopify's "link list" feature. To access link lists, click on the Navigation link in the menu in your Shopify dashboard. A link list is a term within Shopify to create, you guessed it, lists of links. Your site's main navigation is controlled by a link list (or multiple link lists). When you first create your store, a link list called "main menu" is already created by default. This is link list is used for the main navigation in your theme. Link lists are useful in other areas of your site besides navigation, so it will be helpful to know how to create your own.
To create a drop-down menu for your main navigation, follow these steps:
Note: Shopify only officially supports only one level of drop-down menus.
The options for setting up your homepage may seem daunting, but worry not, it's actually pretty simple to make your homepage look beautiful.
By default, the homepage consists of up to seven main sections. You can turn individual sections on and off as needed. The sections are
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:
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.
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 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.
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:
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.
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.
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:
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 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.
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.
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.
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.
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:
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.
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.
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!