- Overview
- Theme Installation
- Configuration
- General Settings
- Page Setup
- Setup of Navigation
- Homepage Sections Configuration
- Collection Page
- Product Page
- Product Variants
- Theme Support
Shopify Theme Developed by
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact support@creatives9web.com. We will be happy to help you and serve you best. Thanks so much!
1. Download the theme package (the file is in zip format) and extract it
2. Now, From your Shopify admin, click Online Store, and then click Themes
3. Click Upload Theme button and upload any package from lofty-theme-packages folder you want. "lofty-theme-demo-X.zip" i.e. X stands for demo number. eg. lofty-theme-demo-1.zip , lofty-theme-demo-2.zip , lofty-theme-demo-3.zip etc... Choose any demo package zip and follow below steps :
Please watch out below video for installation of theme :
VIDEO FOR INSTALLATION
Below is simple steps to install theme.
4. Once you upload theme package, Click on publish button to activate theme.
1. Please Install Product Review app which is absolutely FREE , Provided by Shopify (GET IT NOW!)
2. To have product review feature, you can install this free app below:
3. Next, You will be redirected to your shopify store for further installation step as below :
1. From your Shopify admin, click Settings, then click Checkout.
2. Check Accounts are optional and click Save..
To enable shipping calculator, please configure your shipping rates by following below guide:
1. From your Shopify admin, click Settings, then click General:
2. Scroll down to Standards & formats area, you'll see your Currency setting. Update details according to below guide:
From your Shopify admin, click Online Store. Click Customize theme for the theme you want to customize. Click General Settings..
Go to: Online Stores >> Themes >> Customize theme >> Theme Settings >> General
Header Opacity : You can set header opacity by just scrolling it and Save it..
Site Layout : if you enable fullwidth layout. Your store theme layout will appear as full screen like LOFTY DEMO 2
You can set product image swap effect from below :
You can enable option to show currency conversation.: Enable/Disable
Money format: You can set with currency code or without.
Supported currencies: You can set support currencies by space separated.
Default Currency: You can set any defauly curreny for your conversation dropdown.
Enable animation effect: When you enable it, Site will be loaded with animated style.
Enable Lazyload: When you enable it, Product listing and collection product listing will be load as Lazyload for increase loading time.
Supported currencies: You can set support currencies by space separated.
Show move to top button: You can enable, Move to top arrow button which appears on right bottom corner.
Mailchimp form url for newsletter: Enter your mailchimp subscription form url which will be used for Newsletter Popup & Newsletter Subscription Section.
API Key: This is GMAP API Key which is use for contact us page for Google Map.
Enable social sharing for post: When you enable this option, Social sharing icons will appear in your post/article.
Blog layout setting: Choose any layout from Full width, Left sidebar, Right sidebar
Blog listing setting: Choose any style from Grid Style, Masonry Style
Number of posts per row eg. 4 , 3 etc
Number of posts per page eg. 10 , 12 etc
Enable Related Articles : Enable/Disable
Using this color settings, you can change color of site with sevaral parts easily (eg. Theme base color, Header, Footer, Product Bedges etc) and make your site completely different quicky. ( Each color option describe where it used. )
Smart Mega Menu Color Settings
1. You can set Default Font Family fron dropdown and set Google Font by Type name in textbox.
2. You can set Font Size here for your store
Set promobar in top of site and manage it, through its settings.
Promotional bar settings
Set recently product bought notifier.
Someone Bought Notification settings
Newsletter popup settings.
Cookie policy settings.
Cart notes : Enable Notes on Cart page
Mini Cart Settings : you can choose option to set minicart.
1. Hovericon Styles: You can choose product item hover Style 1, Style 2. Style 3.
2. Product image size(ratio): You can set ratio from availabe ration sizes in dropdown eg. width:height.
3. Product detail view: Using this option , you can remove "Quick View" icon from on hover of item.
4. Enable Add to Cart : You can enable/disable "Add to cart" icon from on hover of item.
5. Enable Add to Wishlist : You can enable/disable "Wish list" icon from on hover of item.
1. Disable Product type : You can enable/disable "Product Type" from Quick View window.
2. Disable Product vendor : You can enable/disable "Product Vendor" from Quick View window.
3. Disable Product SKU : You can enable/disable "Product SKU" from Quick View window.
You can choose any swatch style from below:
1. Small Cube with Option Name
2. Circle
3. Sqaure
4. Variant Images
1. Layout : You can choose collection page layout eg. Fullwidth or Within Container.
2. Enable color swatches in product list: Once you enable this feature, it will show you color swatches like below.
3. Show Collection Header: You can enable/disable part of collection header, Which contains >> Collection Image , Collection name, Description.
4. Collection Sidebar Setting : You can choose any one from - 1. Left Sidebar , 2. Right Sidebar , 3. No Sidebar
5. Number of Columns in Listing
6. Enable 2 columns layout on mobile
7. Show/Hide Toolbar
1. Enable Sticky AddtoCart : It will show sticky add to cart box once you scroll down page after "Add to cart" button of product.
2. Show Review In Sticky AddtoCart
3. Product gallery image size(ratio): You can set thumbnail gallery images size using predefined sizes given in dropdown.
1. Display Recently Viewed Products? : Enable/Disable recently viewed products.
2. Social sharing: Enable/Disable Social sharing icons.
You can apply settings for Banner , Logo , Main Content Area , Order Summary , Typography and Colors of Shopify Checkout Page
Go to: Online Stores >> Pages >> Add page (click on button)
Or
Visit this link How to create a page
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Blogs ( Now click on dropdown which is appearing on top of window like below )
1. If you have not created any blog article then please create it from admin:
Please follow this guide to create blog article/post >> How to create blog post/article
2. Blog Sidebar Settings:
Go to: Online Stores >> Pages >> Add page (click on button)
Go to: Online Stores >> Pages >> Add page (click on button)
Go to: Online Stores >> Themes >> Customize theme >> Sections ( Now click on FAQ page link which you set in Menu.)
Once FAQs page opened, it will show you section settings like below :
Go to: Online Stores >> Pages >> Add page (click on button)
Go to: Online Stores >> Themes >> Customize theme >> Sections ( Now click on Lookbook page link which you set in Menu.)
Once Lookbook page opened, it will show you section settings like below :
Once clcik on it, it will show all settings , You can upload image/banner, set banner size in percentage , add text, link :
1. Set lookbook withing container or fullwidth
2. Enable/Disable scale up effect
3. Enable/Disable overlay effect
Go to: Online Stores >> Pages >> Add page (click on button)
Go to: Online Stores >> Themes >> Customize theme >> Sections ( Now click on Lookbook page link which you set in Menu.)
Once Lookbook page opened, it will show you section settings like below :
Once clcik on it, it will show all settings , You can upload image/banner :
Go to: Online Stores >> Pages >> Add page (click on button)
Go to: Online Stores >> Navigation >> Add Menu (click on button)
1. From your Shopify admin, click Online Store, then click Navigation:
2. On Main Menu menu, click Edit menu.
3. Click Add menu item to create a link in main menu.
3. Click Add menu item to create a link in main menu.
Create Smart Megamenu, Just click on Online Store, then click Navigation:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Header (Scroll down)
Dropdown Menu:
Smart Menu Style 1:
Smart Menu Style 2:
Smart Menu Style 3:
Home Link:
Click on "Add content" >> Home Link
then click on Save buttonSingle Page Link:
Click on "Add content" >> Single Link
then click on Save buttonDropdown Menu:
Click on "Add content" >> Simple Dropdown
Here you can simply create new menu and add links in it and assign created menu here.
Create Menu and Add Menu items in it and SAVE it.
After Menu Created, Assign it and SAVE it.
There are 3 styles of Smart Mega Menu eg. Smart Menu Style 1, Smart Menu Style 2, Smart Menu Style 3. You can choose any style from it.
Smart Mega Menu Style 1:
Click on "Add content" >> Smart Menu Style 1
To make menu linklist like Smart Menu Style 1, You need to create multi-level dropdown mega menu.
For example: If you want to show smart megamenu for "HOT WEARS"
Go to: Online Stores >> Navigation >> Add Menu (click on button)
A. Please follow below snapshot guide to create menu and its menu items.
Next, Create Menu with same name of above menu items eg. Men's wear, Men's wear, Accessories .
B. Now, just assign main parent menu eg. "Hot Wear" to your navigation.
To Add Product in Menu Dropdown: You can assign single product in menu dropdown.
Smart Mega Menu Style 2:
Click on "Add content" >> Smart Menu Style 2
You can follow same steps which is shown in Smart Menu Style 1 above
In this menu you have several settings :
Set Label on top of menu eg. NEW , HOT, OFFER, SALE
Set Promo banner at bottom of Megamenu
Smart Mega Menu Style 3:
Click on "Add content" >> Smart Menu Style 3
You can follow same steps which is shown in Smart Menu Style 1 above
In this menu you have several settings :
Set Label on top of menu eg. NEW , HOT, OFFER, SALE
Set Single Promo banner
BUY NOW! Button Navigation:
Click on "Add content" >> Single Link
You can see setting below:
Manage your store using sections:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Header
Header Style : Header Style 1, Header Style 2, Header Style 3, Header Style 4
You can choose any header style from below:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Slideshow
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Product List
Product List Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Brand Slider
Brand Slider Settings:
Brand Slide Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Product Tabs (Latest Collections)
Display Type : Carousel , Grid
Product Tabs Settings: You can add up to 10 tabs.
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Collection List (Trending Collections)
Collection List Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Blog Post List
Blog list Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Newsletter ( Our Newsletter Subscribe )
Newsletter Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Testimonials ( Recent feedback )
Newsletter Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Instagram
Instagram Settings:
Please fill out all setting as per your choice in this section and set your own User ID, Client ID, Access tocken..
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Footer
Footer Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Video (YouTube or Vimeo)
Video Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Image with text overlay ( FASHION )
Image with text overlay Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Image with text
Image with text Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Modern Banner
Modern Banner Settings:
Banner Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Text columns with icons
Text columns with icons Settings:
You can add up to 6 icon with columns
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Collection Pages ( Now click on dropdown which is appearing on top of window like below )
Collection Header Settings:
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Collection Pages ( Now click on dropdown which is appearing on top of window like below )
Category/Collection List Box:
Advance Filter:
>> You can filter products through advance filter, There are total 5 different filters <<
IMPORTANT: To make this filter working, You must have to add same filter options name as TAGS in relative products.
1. Color Filter
2. Size Filter
3. Price Filter
4. Brand Filter
5. Tag Filter
Go to: Admin >> Products >> Search or Click on any product
Now, please go to right side in product edit.
Once all tags you entered, You can see product in filter result.
Featured Products
SETTINGS :
Static Content
SETTINGS :
Banner
SETTINGS :
Go to: Online Stores >> Themes >> Customize theme >> Sections >> Product Pages ( Now click on dropdown which is appearing on top of window like below )
1. Step 1:
1. Step 2:
Click on "Product Detail". It will show you all settings below:
Click on "Related Products". It will show you all settings below:
To create product with color variant as in our demo page (Variant Color Demo):
1. Add images to your product variants :
Go to: Online Stores >> Products
2. In Variants section, click on the image icon to assign an image to that variant:
3. Select a product image or click Add image to upload a new image:
4. SAVE it
If you have any questions, please do not hesitate to contact us at support@creatives9web.com. We are happy to help!