Groham Shopify Theme

Documentation 1.0

• Created: 22 December 2016
• Latest Update: 22 December 2016
• By: Metizsoft & KL-Webmedia

Thank you for purchasing Groham Shopify theme.

The theme comes with this extensive documentation in order to help you with installation. Our theme documentation includes all kind of information, examples, and resources and provides you all the details you need to know to use Groham theme.

Before getting started with theme, it is suggested, you always check out this documentation. It is well organized and presented in several sections (Installation, Configuration etc) to make things a bit easier.

If you have any question not included in this help file, please feel free to post it on our forum HERE. Thanks so much! This documentation was only made with the Documenter

Ask for support? Please contact us via email: shopify@metizsoft.com
NOTE: This theme is designed for Shopify users.

Theme Installation

Installing Groham is easy and quick.

If you already had the Shopify site and want to change its current theme with this amazing theme, you need to just follow the instructions mentioned below:

Note: Extract package downloaded, use file the Groham.zip to upload to your Shopify site

1. In your back office go to: Online Store > Themes:

• Click on: Upload a theme

  

• Click on: Upload

  

2. In your back office go to: Online Store > Themes > Scroll to section Groham :

• Click on: Publish theme

  

• Click on: Publish

  

Customize Theme

It is very easy to customize the theme. Follow the below mentioned steps to customize theme's appearance and settings.

In your back office go to: Online Store > THEMES:

• Click on: Customize theme

  

In your Customize Theme:

• Overview:

  

Font

• There is no need to use default fonts. You can use fonts of your choice. It will allow you to change font type, size, text case and other font related properties.

  Go to: Customize Theme > General > Fonts

  

• Edit and Save

Change Logo and Favicon

Logo

Here you can set custom logo or favicon easily. You can choose the format (image or text) as per your need and also change its size.

• Go to: Customize Theme > Header > Site Logo/Favicon

  

• Edit and Save

Favicon

• Go to: Customize Theme > Header > Site Logo/Favicon

  

• Edit and Save

Color

You can change color of the texts, links, buttons from here.

• Go to: Customize Theme > Color >

  

• Edit and Save

• Review in front-end

Navigation

Navigation Main

• Go to: Customize Theme > Navigation

  

• Add the main link

  

• Edit and Save

• Review in front-end

  

Creating a Dropdown Menu

• If we want to connect any link to a sub-menu, we'll create a link list with the same name as said (parent) link. For example, a typical Main Menu in Shopify contains the following links:

  

• If we want to include a link called Shop by Brand:

  

• And we want that link to become a drop-down sub-menu to list brands in our shop with links to vendor collections, we will create a list of links called Shop by Brand:

  

• Again, make sure that the name and handle to match uith what you have chosen for the parent link:

  

• And we'd fill up the list of links with ones in our vendor collections:

  

• Edit and Save

  

• You can create the three level megamenu here , using customize theme setting, when you crete the third level menu form navigation and enable "Sub menu options from the theme setting you can see the megamenu like this".

  
  

• To turn any link of our Main Menu into a 'parent' link, create a 'child' menu for it by using the name of your parent link.

  Now, it's your turn to apply this theme smartly.

Link List Labels

• You can add the label like New ,Hot ,Sell to the submenu from the theme settings.

  

• You have to enter link title in Label Box.

  If you want to add Sell label to link title , then enter link title in "Sell label box"

  

• Edit and Save

• Review in front-end

  

Header

• Capture your visitor's attention quickly with attractive headline. Theme allow you to set Welcome Message that convey the proper message to visitors. Not only headline it will provide other options such as you can set currency you used, enable customer accounts and cart properties.

  Go to: Customize Theme > Header

  

• Currencies

  1. Go to: Customize Theme > Currencies

     

  2. Review in front-end

     

• Cart

  1. Go to: Customize Theme > Cart

     

• Customer links

  1. Enabling Customer Accounts

     To enable customer accounts, select Settings > Checkout > Customer accounts. There are three options available, as noted below.

     

  2. Review in front-end

Homepage

• Home page Dropdown

  1. See the below given screenshot to enable the slideshow , banners , featured collections , newsletter , featured products , blogs , brands etc into your site. Later, all these options are briefly explained in seperate sections.

     Go to: Customize Theme > Homepage

     

  2. To enable the slideshow , banners , featured collections , newsletter , featured products , blogs , brands etc from here.

  3. Review in front-end

Homepage Slideshow

• Go to: Customize Theme > Homepage Slideshow

  

• Edit and Save

• Review in front-end

  

Homepage banner

• Go to: Customize Theme > Homepage Banner

  

• Edit and Save

• Review in front-end

  

Homepage Featured Collection

• Go to: Customize Theme > Homepage Featured Collection

  

• Edit and Save

• Review in front-end

  

Homepage Newsletter

• Go to: Customize Theme > Homepage Newsletter

  

• Edit and Save

• Review in front-end

  

Homepage Featured Product

• Go to: Customize Theme > Homepage Featured Product

  

• Edit and Save

• Review in front-end

  

Homepage Blog

• Go to: Customize Theme > Homepage Blog

  

• Edit and Save

• Review in front-end

  

Homepage Brand

• Go to: Customize Theme > Homepage Brand

  

• Edit and Save

• Review in front-end

  

Footer

• Add contact information, payment icons, social icons and other relevant information you want to provide to your customer.

  Go to: Customize Theme > Footer > Footer Address

  

• Review in front-end

  

• Footer Link List

  1. Go to: Customize Theme > Footer > Footer Link list

     

  2. Review in front-end

     

• Footer Payment Icons

  1. Go to: Customize Theme > Footer > Footer Payment Icon

     

  2. Review in front-end

     

• Footer Logo

  1. Go to: Customize Theme > Footer > Footer Logo

     

  2. Review in front-end

     

Social Icons

1. Go to: Customize Theme > Footer > Footer Social Media

   

2. Review in front-end

   

Sidebar

• 1. Go to: Theme Settings > Sidebar

     

  2. Review in front-end

     

• Add Swatches

  ---

  This is the product variants in the products

  • Go to: Products > > Product list

    

  Please note:

  1. Click on the product which you’d like to add color variants to.
  2. Within that product scroll down to the Pricing section.
  3. At the bottom of the Pricing section you’ll see a title Variants. Click on the Add Variants button next to it to add different color variants, like so:
  

• Add Color Swatches as options

  1. Since we want to add multiple colors we will enter Color as the option name.

     

  2. If you scroll down a little, you will see the option to add different prices for every color variant and a barcode, if you want to set different prices/add a unique barcode.

     

     Afterwards, click save.

     Continue on if you want to add image variants for your color variations. You don’t need to add image variants though to use our swatches.

     If you don’t add image variations, your swatches will appear, but the product photo will not change when you click on different swatches. Otherwise, if you want your product photo to change along with the swatches, follow the instructions below.

• Image variants

  1. Scroll up to Images and click on Add Images.

     

  2. In order to link these images to the variants, scroll down to the variants, click on the picture to the left of the variant and choose the correct picture of your product in that color from the Select variant image.

     

  3. Great! Now we’ve set both the variants and added images for the variants, now you will be able to set up your swatches with Shopify.

• Filter By Tag

  1. Go to your Shopify Admin and click on the “Products” tab:

     Every product in your store has some search terms and keywords known as “Tags.”| Tags will be useful if your customers are searching for any keyword in your store. For example, if you enter “dress” as a tag, then your customer will see this product in their results when searching for the term “dress.”

     Here you need to write the name of the filter. i.e if you need to filter by Brand then you have to write tag like this .Brand_dress

     
     

  2. Review in front-end

     

• Links List

  1. Go to: Theme Settings > Collection page > Collection link list

     

  2. Review in front-end

     

• Popular Collection

  1. Go to: Theme settings > Collection page >

     

  2. Review in front-end

     

Collection Page

• Go to: Customize Theme > Collection Page

  if Collection image is blank then you can set the collection image from the customize theme.

  

• Edit and Save

• Review in front-end

  

Product Page

1. Go to: Customize Theme > Product Page

   

2. Review in front-end

   

• Sharing Icons

  1. Go to: Customize Theme > Social Media

     

  2. Review in front-end

     

Blog Page

• Adding a blog or article will help your visitor to get updates and new arrivals on your store. You can also share this information with the help of Social Media. Groham theme makes it very easy and hassle-free.

  Go to: Customize Theme > Blog Page

  

• Review in front-end

  

• Sidebar

  1. Go to: Customize Theme > Blog Page > Sidebar

     

• Comments

  1. 

Contact Page

• Creating or opening up your Contact Us page

  

• Adding some content to your Contact Us page (or not)

  

• Assign the page.contact.liquid template to your Contact Us page

  Go back to your Contact Us page in your shop admin.

  Select 'page.contact' in the Template drop-down like so:

  

• Go to: Customize Theme > Contact Page

  

• Edit and Save

• Review in front-end

  

Cart Page

Shipping Rates Calculator

• Go to: Customize Theme > Cart Page > Shipping Rates Calculator

  

• Edit and Save

• Review in front-end