grokery Shopify Theme

INSTALL THEME

Welcome to grokery

We are pleased that you have chosen grokery Shopify theme for your online store and we will not disappoint you with your choice.grokery is an excellent theme develop with a concise approach.The code written is a clean and well structured.

grokery is the most powerful & responsive theme with all the modules and functions involved with an attractive design.

grokery theme is build focusing on your business with endless features and works perfectly fine in all the browsers and we are making sure you get all your shopify stores features.

grokery theme includes total 1 pre-built home page layouts, 16 inner pages, 12 product pages, and 8 shop pages.

We request to have a look at our grokery manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the manual before jumping to start!

  • language switcher   :  Translate your shop into multiple languages.
  • Responsive design   :   Looks great on desktops, laptops, tablets and mobiles. Give it a try on your iPhone or iPad now.
  • Drag and Drop sections   :  Option to change the home page layout order using drag and drop option.
  • product Group   :   Group product images section, easy customization.
  • Supports multi-currency   :   The currecies GBP,EUR,NZD,AUD,CAD,USD,INR,JPY are inbuilt with theme.
  • Facebook chats   :  Live chat with your customers using Facebook Messenger.
  • Ajax Product Filtering   :   You can let customers filter your collections with product tags,product branda,colors,size etc..
  • Dynamic One click checkout button   :   Customers can use the dynamic checkout button to quickly buy the product they're viewing
  • amazing instagram shop   :   Let shoppers discover, shop, and buy your products directly from your Instagram posts and stories.
  • Product Infinite scrolling   :   Products can be endlessly loaded on the collection page.
  • Product 360 view   :   360 degree spin is the perfect way to view products!
  • Cart urgency reminder   :   Bring Back Your Store Visitors with Cart Reminder
  • Custom lookbook module   :   Custom lookbook module to easly buy products.
  • Product Filtering   :   Products filter base on color,sixe etc.

Once you buy our grokery Theme , you will find our theme in your ThemeForest Downloads page.Once you Download theme just unzip it , you will find :

  • documentation - This folder contains the documentation for the theme.
  • Theme folder - Theme zip for your shopify store for upload on your store.

Theme Installation

Step 1   :  Open your Shopify admin panel and go to Online Store -> Themes-> Upload a theme in the top menu.
Step 2   :   Select the zip file containing on your download package and click Upload.
Step 3   :   After installing theme successfully, choose Publish theme then continue to do other settings.
Step 1   :   After Installing grokery theme Successfully , you are able to import available products:
  • From Shopify Admin panel , please go to Settings > General
  • From Store Currency block , please select default currency and save it
  • From Store Currency block, please select change formatting.
  • Add Red Html Code in opened block Currency formatting.
  • <span class=money> your currency </span>
  • If you want to enable Auto curency switcher based on user geo location, you must check mark currency setting on theme setting page.
  • Add New Currency in Theme and Enable Auto Currency Switcher.

From Shopify Admin panel go to Settings / Checkout, In the Customer accounts select Accounts are required.

images

Metafield App is used for product addtional functions to install it please follow steps :

image image
Attention:
You don’t need to do any changes described in their documentation. All code changes for this application we have already implemented in our theme’s code.

Get Product Review Feature on your products , To install product review app follow steps :

images

Update Your theme

When our developer and designer updates our shopify theme with bug fixes and more features , those are not automatically added to your own theme ( limited shopify restriction ) . There is no automatic or manual way to get updates on your installed themes.

  • just download the latest version of theme.
  • Install the latest version of theme as unpublished theme.
  • Go to your Theme Manager , On Themes page, you can customize the theme while it remains unpublished.

To customize new theme to look as older version , you will required to do :

  • use the theme settigns to choose box layout , choose background images , tweak colors , etc.
  • Replace any changes you made in liquid templates from your older theme to new theme
  • Uninstall any apps that add code to a theme and re-install them from the Shopify App Store to re-add code in theme.
  • Preview the changes that you have made to any theme by clicking Preview button
  • When your customized theme is ready, publish it by clicking Publish them button
Attention:
Your old theme will be saved as an unpublished theme. In case you have forgotten to do a few things or missed out settings to your updated theme, you can keep the older one as a reference or safe side.

Theme Settings

  • You Can Config theme Settings like body background images , layout direction ( RTL / LTR ), Box Layout and other options , please go to Themes -> Customize Theme -> Theme Settings -> General.
images
  • Rtl option:Tick option to enable Rtl layout.
  • Lazy loading blur option:Tick this option to enable blur image on lazy loading.
  • Box layout Option:Enable box layout and choose layout design.
  • Body Background Image Option:Set box layout background image.
  • Open your Shopify admin panel and go to Online Store -> Customize -> general theme settings -> click on Loader & favicon.
images
  • grokery allows you to customize custom google font, that can be used for titles, menus and other texts in theme. To do that you must paste the include URL for your desired font in the text box for Fonts Name (Themes -> Customize Theme -> Theme Settings -> Typography). Here's an example
image

To config color of body, header, menu, footer, button, please go to Themes -> Customize Theme -> Theme Settings -> Color.

image

To config header layout, sticky header option, add to cart method and navigation menu label badges please go to Themes -> Customize Theme -> Theme Settings -> Header layout.

image

Setup pages

Create a page - official documentation images
Page Template Name Template Description Quantinty Limit
page Default pages. Infinity
page.about About page template. Used for about pages and set page with section and blocks. Multiple
page.contact Template with page.contactUsed blocks and map iframe. 1
page.faq Template with page faq configured by blocks for faq questions and answer. Multiple
page.lookbook Template with page lookbook configured by lookbook blocks. Multiple
page.wishlist Template with page wishlist. 1
Attention:
Every page must be assigned to the respective template file while creating it.
  • About page must be assigned to the template page.about while creating it.
  • To config About page add images and content in blocks.
  • Add tean and testimonials images.

Contact page options can be easily configurable using these settings.

  • Contact page have an option to embed google iframe map with enable/disable features.
  • It includes Google Map.

Google Map Ifame

  • Google Iframe: Copy The Content Of Google Iframe and Pest Into the Section Google Map.

  • Assign page.faq template while creating faq page.
  • Go to themes > customize > faq page > faq template in section.
  • Assign page.wishlist template while creating Wishlist page.
  • Assign Portfolio.wishlist template while creating Portfolio page.

Blog Page

Blog - official documentation image
  • Blog Settings: Customize > Shopify menu dropdown > Blog > Edit section
  • Article Settings: Customize > Shopify menu dropdown > Blog Post > Edit section

header sections

  • Header colors you can find in Customize Theme > Theme Settings > Colors
  • Header layouts and label color option,you can find in Customize Theme > Theme Settings > header layout.
image
  • Open Your Shopify Admin Panel And Go To Online Store -> Customize-> Sections .
image
  • Open Your Shopify Admin Panel And Go To Online Store -> Customize-> Sections-> header .
image image
images

home sections

Collections pages

Collections - official documentation

Collection page contains following options.

  • Sorting:  Sorting the products as low-price,high-price,best-products,new to old,old to new.
  • Grid view
  • List view
  • Product Filtering

Product page

Products - official documentation

You can add supported variants by default such as size, color, material in any products.

Variants - official documentation

Product detail page includes:

  • Product Image zooming.
  • Product color variant displayed as color swatches .
  • Product availiability Option,Product vendor and Product type,SKU, Inventory bar.
  • Add to cart option and product quantity.
  • Add to wishlist.
  • Social sharing.
  • Related products.
  • Product tabs/accordian and size guide option.
  • If you enable product review , don't foreget to install Product Review app.

    Products Template Name
    product template
    product.full-page
    product.gallery-template
    product.sidebar-layout
    product.right-image
    product.three-column
    Attention:
    If you want to display diffrent templates in products, you must be assigned to the respective template file while creating product.

    product-template

    product-template

    product-template

    product-template

    product-template

    product-template

    product-template

    product-template

  • If you want to add diffrent size chart modal in each product, follow this steps:
  • Go to shopify admin > apps > MetaFields Editor > select product > Add New Metafield.
  • Add Namespace size-chart , add Key size-chart-content, add size chart image or html in value and save it

product-template

  • If you want to add same size chart modal in each product, follow this steps:
  • Go to shopify admin > pages > Creatte size-chart page > Add size chart image or html.
  • Go to shopify admin > customize > product page > selecy size-chart page.

product-template

product-template

  • To add countdown timer in each product, follow this steps:
  • Go to shopify admin > Product > select product .
  • Add this [countdowntimer-date-start]div class="timer_date" data-date="oct 4,2019"[countdowntimer-date-end] in product description.

product-template

product-template

product-template

product-template

Horizonal tabs

product-template

Verticle tabs

product-template

Accordian

product-template

Cart page

Trobleshooting

Theme features

Support