Install Theme

Install Default Demo – Home 1

1. Download theme package from Themeforest. https://themeforest.net/downloads

2. Extract/Unzip all files from downloaded package. Find "Optimal-install-me.zip" file. This is Home 1 Default Demo zip file. Install this zip file on your shopify store.

   You will also find Demo Preset folder which contains preset/data files for other home skins/demos, User guide file and read me text file.

3. Logging into your Shopify store and Navigate to Themes : Store Admin -> Online Store -> Themes

4. Click "Add theme" -> Upload zip file. Click here

   

5. By Default your uploaded theme is unpublished. You can publish new theme when you are done with theme configuration and setup.
   To publish new theme click on Publish button

   To install other premade home skins, Follow below steps

Install Other premade Home skins

This include from Demo 2 to rest all other demos

1. Follow above step 1 to step 4
2. Now go to "Demo Preset" folder which you downloaded from themeforest.net
   
   

   

   All you need to do is copy all data from index.json and settings_data.json file from any preset folder file and paste it on same theme file on your store. Explain in below steps..

3. In Preset folder, You will see folders for all available skins. Please open any skin folder which you would like to install.

   Click here to see all available home skins/demos

   You will see 2 files index.json and settings_data.json. You need to copy these file data one by one

   

4. Now Go to Optimal theme which you just uploaded. Click three dot icon –> Edit Code

   

5. Find Templates folder and open index.json file.

   Select and Remove all data from this file. Now paste preset data. ( index.json file data you copied in Step 3) And Click Save.

   

6. Find Config folder and open settings_data.json file.

   Select and Remove all data from this file. Now paste preset data. ( settings_data.json file data you copied in Step 3) And Click Save.

   

7. You can publish new theme when you are done with theme configuration and setup. To publish new theme click on Publish button

Recommended Apps

1. Shopify Search & Discovery - Free

   Customize your store search, filtering, and product recommendations, so you can enhance your products’ relevance and sell more.

   click here to get this app

2. Loox Product Review app [Paid] - Get an extended 30-day free trial

   • Product reviews with photos build more trust.
     To enable Loox Product Review, please install this app: click here to get this app

3. Weglot Translate[Paid] - Get 20% off for Avone theme

   • To enable multiple language on your store, please install this app: click here to get this app
   • Read this well written app article to enable multilangular store.

4. Vitals: Reviews, Bundles, AI - Get 40 days Free trial

   • All-in-One Marketing App with AI Studio: Reviews, Bundles, Upsells, Page & Video Generator
   • click here to get this app and discount

5. Appstle Subscriptions App - Free to install. Free trial available.

   • Appstle provides Shopify’s most powerful and customizable subscription features
   • click here to get this app and discount

6. Parcel Panel Order Tracking - Free plan & trial available.

   • Improve customer satisfaction & boost your sales with a branded post-purchase tracking experience.
   • click here to get this app and discount

7. PageFly Landing Page Builder - Free to install

   Craft stunning web pages without code. More advanced customization to convert your visitors. PageFly caters to everyone, from first-time store owners to fast-growing merchants and expert agencies.

   click here to get this app

8. AI Search, Filter & Recommend - Paid

   Create effortless shopping experiences that boost conversion & maximizes AOV with Boost AI Search and Discovery. A powerful search app that uses AI to deliver lightning-fast & most relevant search results. Help shoppers find their next favorite product with AI recommendations

   click here to get this app

9. UpPromote Affiliate & Referral - 14-day free trial

   Complete, easy referral & affiliate program app, trusted by top brands & experts for a revenue boost. Discover UpPromote's powerful influencer marketing & referral program, winning the hearts & brands' trust through real testimonials

   click here to get this app

Store Configuration

Please do follow below required settings on your store.

Enable Customer Accounts

Go to Store Admin -> Settings -> Customer accounts

Click on Edit Link and Do as below and click Save

Set up Shipping Rates

1. Go to Store Admin -> Settings -> Shipping and delivery

2. Click here to read more in details

Currency Settings

Go to Store Admin –> Settings –> Store details

• Scroll down to Store currency block and click on Change formatting link

• Update these fields

  HTML With currency to Copy Line

  HTML without currency to Copy Line

  
  

  

Navigation

Displaying a menu at the top of your store helps your customers browse your store and find important pages.
With only some simple steps, you can add menu items that link to your webpages, collections, products, store policies, blogs, email links, external websites, etc.

Before you start setting up menus in your store, please have a look at the links below that explain in detail how to create or edit menus and collections.

• How to create a new menu ?
• How to create a dropdown menu?
• How to create a collection?
• How to create a smart collection?

How to create new menu

1. You can create a link list of collections,products,pages or blogs in menu

   Go to: Online Store -> Navigation -> Select Add Menu button

   

Single Link (No dropdown or megamenu)

Preview of Single link menu

1. Go to Online Store –> Customize –> Click Main Navigation –> Add block –> Add Single Links

2. This is very easy. Set Link Name and Select Menu Link. Repeat this steps for all menu items you want to display.

   

Dropdown Menu

Preview of dropdown menu

1. How to create dropdown menu? Click here to read more in detail
   
   

   

2. Go to Online Store –> Customize –> Click Main Navigation –> Add block –> Add Dropdown Menu
3. Set Link Name, Menu Link and Select Dropdown MenuM

   

Megamenu Simple

• Display menu column up to 6
• Display image banners on right or bottom
• Display bottom banners Up to 4
• Display right column banners up to 4

• Preview of Megamenu Simple

  

1. Go to Online Store -> Navigation -> Add Menu with Sub Menu Items As display below ( below screenshot is only for reference )





2. Go to Online Store –> Customize –> Click Main Navigation –> Add block –> Add MM Simple
3. Add Link Name, Select Menu, Set Columns, Set Product or Featured Image(Optional) and Set Bottom Images(Optional).
   
   

   

   

Megamenu Top Image Banners

• Display up to 5 column with 5 image banners and title

• Preview of Megamenu top image banners

  

1. Go to Online Store -> Navigation -> Add Menu with Sub Menu Items
2. To use this Megamenu, Please create different menus for each columns.
   I.e. If you want to display 4 columns to Display Women, Men, Kids, and Accessories collection then create 4 different menus with sub menu links for each column.
3. Follow this article to read more in details : How to create Menu?

4. Go to Online Store –> Customize –> Sections –> Main Navigation –> Add block –> Add MM Top Image Columns

   

Megamenu Background Image

• Display Up to 6 Columns with Background Image

• Preview of Megamenu Background Image

  

• Go to Online Store -> Navigation -> Add Menu with Sub Menu Items (below screenshot is only for reference)
  
  

  

• Go to Online Store –> Customize –> Click Main Navigation –> Add block –> Add MM Background Image

  

  

Megamenu Links with Image

• Display Image with Title in Columns
• Select Image Column Up to 6

Preview of Megamenu Links with Image



• Go to Online Store -> Navigation -> Add Menu with Menu Items (Without Sub menu item)
  
  

  To use this megamenu, you need to create simple Menu with menu items. as shown in below screenshot

  

• Go to Online Store –> Customize –> Click Main Navigation –> Add block –> MM Links with Image

  Set Link Name, Menu Link, Select Menu and Select Columns

  

Megamenu Products

• Display products columns Up to 6
• Display featured products on left
• Display banner with text on right side(Optional)

• Preview of Megamenu Products

  

1. Go to Online Store –> Customize –> Click Main Navigation –> Add block –> Add MM Products
2. Set Links Name, Menu Link and Select Collection to display featured products.
3. Set Products Limit, Number of Columns for products and Button.
4. Set Featured Column with image, title, subtitle, buttons and link.

Megamenu Custom HTML

• Display Custom HTML - You can put html code here

• Go to Online Store –> Customize –> Click Main Navigation –> Add block –> MM Custom HTML

  

Menu Labels (Optional)

• Go to Online Store –> Customize –> Click Main Navigation

• Set Menu Label 1 to Menu Label 5 as required

  

• Set menu labels with main menu items

  

• Set menu labels with sub menu items

  Online Store -> Navigation -> Select Menu --> Click on Menu items

  

  

Page Setup

You can create as many pages as you want. Here is shopify official link to learn - How to create a pages?

Click here to learn how to create custom page and add sections.

Templates for different pages are as below

• About Us - about, about2, about3
• Contact Us - contact, contact2
• FAQs - faqs
• Wishlist - wishlist
• Brand Page - brands
• Lookbook - lookbook

About Page

Theme must be published to select page template!

We have added 3 in-built template for about us. These templates are about,   about2,   about3. You can use these template for 3 different pages.
Now with shopify 2.0, It's easier for you to create more page template by yourself without coding knowledge.

1. To create about us page, Go to: Online Store –> Pages –> Click Add page:

2. Set page Title, choose Template about and click save button

   />

3. Add page details from :

   Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Pages –> about

   

   You can add/edit page details here. Click on "Add section" link to add more section on this page.

   

4. Repeat same steps to use about2 and about3 template.
5. Click here to learn how to create more about us pages if you want to add more than 3 about pages.

Contact Page

Theme must be published to select page template!

We have added 2 in-built template for contact us. These templates are contact,   contact-2,   You can use these template for 2 different pages.

1. To create contact us page, Go to: Online Store –> Pages –> Click Add page:

2. Set page title, choose template contact or contact-2 and click save button

   

3. Add page details from :

   Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Pages –> contact

   

   You can add/edit page details here. Click on "Add section" link to add more section on this page.

4. To add/edit contact field, please follow below guide:

   • Adding fields to the Liquid Contact Form

FAQs Page

Theme must be published to select page template!

We have added 1 in-built template faqs   for FAQs page.

1. To create FAQs page, Go to: Online Store –> Pages –> Click Add page:

2. Set page title, choose template faqs and click save button

3. Add page details from :

   Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Pages –> faqs

   

   You can add/edit page details here. Click on "Add section" link to add more section on this page.

4. Click here to learn how to add more faqs page.

Wishlist Page

1. To create wishlist page, Go to: Online Store –> Pages –> Click Add page:

2. Set page title, choose template wishlist and click save button

3. Now go to : Online Store –> Click Customize –> Theme Settings -> General Settings -> Wishlist =====

   Enable wishlist option and select wishlist page which you just created from admin

Lookbook Page

Theme must be published to select page template!

Watch Video  

We have added 1 in-built template lookbok   for lookbook page.

1. To create Lookbook page, Go to: Online Store –> Pages –> Click Add page:

2. Set page title, choose template lookbook and click save button

3. Add images and text from :

   Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Pages –> lookbook

   Click on "Add section" link to add more section on this page.

4. Click here to learn how to add more lookbook page.

Collection List

Click here to preview Collection List page

1. To create Collection List page, Go to : Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Collections list

   

2. Click on Collection List Page from left sidebar

   Select collection block Or Click on Add Collection link

   Select collection, upload image and add title.

   

3. Click on "Add section" link to add more section on this page.

Sub Collection List

Click here to preview Sub Collection List page

1. To create Sub Collection List page,

   Go to : Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Collections -> Click on "Create template"

   

2. Add template name and select sub collection template

   

3. Now go to store admin create sub collection and select template you created in previous step.

   

4. To add collections on sub collection page and customize page looks,

   Go : Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Collections -> Select sub collection template which you created in step 2

   

5. Click on Sub Collections from left sidebar to customize look

   

6. Click On "Add section" and add Carousel/ List banners section to add collections

   

   Select collection block and on right side bar select collection, upload image and add title.

7. Click on "Add section" link to add more section on this page.

Brands List Page

Click here to preview Brands List Page page

1. To create Brands List page, Go to: Online Store –> Pages –> Click Add page:

2. Set page title, choose template brands and click save button

3. Customize brands list page from : Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Pages -> brands

   

   

4. Click on "Add section" link to add more section on this page.

Blog Page

1. Follow below url to create blog page

   Shopify official article - How to create a blog and write an article

2. To customize look of blog pages, Go to : Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Blogs -> Default blog

   

3. To customize look of article pages, Go to : Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Blog posts -> Default blog posts

Header

Preview header styles →

To customize look of the header

Go to : Online Store –> Select Theme –> Click Customize –> Click on Theme settings icon –> Click Header

Start customizing the header according to your requirements.

Please feel free to create support ticket if you find any difficulty to set header styles as available on demo stores

Settings and Options

Footer

Preview footer styles →

To customize look of footer

Go to: Online Store –> Select Theme –> Click Customize –> Footer ( Scroll down to bottom on left sidebar )

Start customizing the footer according to your requirements.

Settings and Options

Theme Sections

Sections allows user to easily add or move content on their homepage with just a few clicks. You can preview your changes in real-time in either desktop or mobile view

There are 30+ Sections and 99+ content block available to use. You can add,update,reorder and delete any sections any time as per your requirements.

Online store 2.0 make it very easy to add sections on every page without coding knowledge

Top Promotion Bar

Go to   Online Store –> Customize –> Home page –> Top Promotion Bar

Featured Product

Go to   Online Store –> Customize –> Home page –> click Add section –> click Featured Product

1. Section Preview

   

Products Columns

Go to   Online Store –> Customize –> Home page –> click Add section –> click Products Columns

Products Rows

Go to   Online Store –> Customize –> Home page –> click Add section –> click Products Rows

1. Section Preview

   

2. Settings and options

   

Products Slider

Go to   Online Store –> Customize –> Home page –> Add Section –> click Products Slider

1. Section Preview

   

2. Settings and options

   

Tabs + Products

Go to   Online Store –> Customize –> Home page –> click Add section –> click Tabs + Products

1. Section Preview. Preview Tab styles.

   

2. Settings and options

   

Hero Banner(CTA)

Go to   Online Store –> Customize –> Home page –> click Add section –> click Hero Banner(CTA)

1. Section Preview. Preview Styles.

   

2. Settings and options

   

Collection List

Go to   Online Store –> Customize –> Home page –> click Add section –> click Collection List

1. Section Preview.  Preview all styles

   

2. Settings and options

   

Grid Banners

Go to   Online Store –> Customize –> Home page –> Add Section –> Grid Banners

There are 7 different grid style in this section.

1. Section Preview. Preview few grid styles.

   

2. Settings and options

   

Hero Banner

Go to   Online Store –> Customize –> Home page –> Add Section –> Hero Banner

1. Section Preview. Preview style

   

2. Settings and options

   

Masonry Banners

Go to   Online Store –> Customize –> Home page –> Add Section –> Masonry Banners

1. Masonry banners use flexible image sizes.  Preview more styles. You would like it for sure :)

   

Round Banners

Go to   Online Store –> Customize –> Home page –> Add Section –> Round Banners

Slideshow

Go to   Online Store –> Customize –> Home page –> Add Section –> Slideshow

Image Slideshow

Go to   Online Store –> Customize –> Home page –> Add Section –> Slideshow(Image Only)

You can display image slideshow without image crops anywhere on your pages. (Display image only not text)

2 Columns Banners

Go to   Online Store –> Customize –> Home page –> Add Section –> Image & Text(2 Columns)

4 Columns Banners

Go to   Online Store –> Customize –> Home page –> Add Section –> Image & Text(4 Columns)

Image with Text & Features

Go to   Online Store –> Customize –> Home page –> Add Section –> Image with Text & Features

Text Columns & Top Images

Go to   Online Store –> Customize –> Home page –> Add Section –> Text Columns & Top Images

Section Preview.

FAQs

Go to   Online Store –> Customize –> Home page –> Add Section –> FAQs

Icons & Text

Go to   Online Store –> Customize –> Home page –> Add Section –> Icons & Text

Section Preview.

Promotion Bar

Go to   Online Store –> Customize –> Home page –> Add Section –> Promotion Bar

Section Preview.

Rich Text Block

Go to   Online Store –> Customize –> Home page –> Add Section –> Rich Text Block

Section Preview.

Testimonials

Go to   Online Store –> Customize –> Home page –> Add Section –> Testimonials

Preview all styles

Instagram

Go to   Online Store –> Customize –> Home page –> Add Section –> Instagram

Display instagram gallery as a List or Carousel

Instagram Shop

Go to   Online Store –> Customize –> Home page –> Add Section –> Instagram Shop

Logo List

Go to   Online Store –> Customize –> Home page –> Add Section –> Logo List

Lookbook Shop

Go to   Online Store –> Customize –> Home page –> Add Section –> Lookbook Shop

1. Preview grid style

   

2. Settings and options

   

Newsletter

Go to   Online Store –> Customize –> Home page –> Add Section –> Newsletter

Section Preview.

Image Gallery

You can display images in grid and on click it will display image in lightbox popup.

Go to   Online Store –> Customize –> Home page –> Add Section –> Image Gallery

Video

You can display youtube video or MP4 video either in popup or background

Go to   Online Store –> Customize –> Home page –> Add Section –> Video

Blog List

Go to   Online Store –> Customize –> Home page –> Add Section –> Blog List

Custom Block

Collections and products display using custom block.

Go to   Online Store –> Customize –> Home page –> Add Section –> Custom Block

Section Preview.

Map

Go to   Online Store –> Customize –> Home page –> Add Section –> Map

Section Preview.

Masonry Block

Go to   Online Store –> Customize –> Home page –> Add Section –> Masonry Block

Section Preview.

Themes Settings

Go to : Online Store –> Click Customize –> Click Theme settings icon

Layout Style

In Theme Settings, Click Layout Style

General Settings

In Theme Settings, Click General Settings

Fonts and Colors

In Theme Settings, Click Fonts and Colors

Products Grid

In Theme Settings, Click Products Grid

Global product grids's settings. These settings will be overwrite by individual section's settings

Product Page

In Theme Settings, Click Product Page

You can see the below listed blocks for product page.

Currency & Language

In Theme Settings, Click Currency & Language

To display currency & language on your store, you need to enable these option from Header section -> Store Currency & language

Product Notification

In Theme Settings, Click Product Notification Popup

Show live stream of products to your customers if anyone likes or bought product..

Quick View Popup

In Theme Settings, Click Quickview Popup

Newsletter

There are 4 different style for newsletter popup

In Theme Settings, Click Newsletter

Social Media

In Theme Settings, Click Social Media

Custom Css

In Theme Settings, Click Custom Css

• CSS code
  Add your custom css here.
• CSS code for Desktop
  Custom css added here will work only for desktop.
• CSS code Mobile
  Custom css added here will work only for mobile.

Checkout

Checkout Settings

You can do settings for Banner , Logo , Main Content Area , Order Summary , Typography and Colors of Checkout Page

Collection Page

Watch Video  

We have included many options to display Collection Page. So you can choose your own style for Collection Page.

Go to Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Collections –> Default collection

Click on Collection Page from left sidebar to customize page look and you will see all page options on right sidebar.

There are different options to display collection page are as below

Header Banner

Click on Collection Page from left sidebar and you will see page header options on right sidebar.

Products Toolbar

Products Filters using Product Tags

Watch Video

Product Filtering is built using products tags of shopify. TAGS ARE CASE SENSITIVE. So if you have enter tags in small letter in sidebar assign same tags in small to product also.
In your store you can see Product filtering on top of left sidebar of collection page (As Product Filters)

There are unlimited filters available for your products using product tags.

Now follow below steps to add Color filters

Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Collections –> Default collection

Click "Add block" from left sidebar and add Filter By Color Tags"

1. Click "Add block" -> Add "Filter By Colors"
   
   

2. Add Filter by section title and Filter tags. Select Swatch Size and Swatch Style from dropdown.

   

3. Go to Products -> Select Product -> Scroll down to "Tags" block.

   In Tags sections, Start adding same tags that you enter in sidebar color block. (You need to assing Only product relavant tags. Tags are different for each products.)

   

   
   
   Attention! If you have added tags in small letter to sidebar block, assign same tag in small letter to product also

   

1. Click "Add block" -> Add "Filter By Tags"

2. Add Filter By Title and Filter tags

   

3. Now Go to Products -> Select Product -> Scroll down to "Tags" block.

   In Tags sections, Start adding same tag that you enter in sidebar text block. (You need to assing Only product relavant tags. Tags are different for each products.)

   

Products Filters Dynamic

With OS 2.0 product filtering are dynamic. When Collection filtering is enabled, the filter options appear on collection page and search result page.
Customers can filter their products by availability, product types, product vendors and Variant options(colors,size,height..)to find the products that interest them the most.

With Dynamic product filters, you do not need to go with that lengthy time consuming process of filter setup.

To Enable products filter on your store, follow below steps

There are 4 style you can display products filter. Display in Left Sidebar, Right Sidebar, Top Bar, Popup Box

Go to Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Collections –> Default collection

Click on Collection Page from left sidebar and you will see products filter options options on right sidebar.

Product Page

• Product Layout and Blocks
• Product Tabs
• Related Products
• Recommended Products
• Recently Viewed
• Product Swatches
• Product Preorder
• Product Bundle / Group Product

Product Tabs

Go to Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Products –> Default product

Click on Product Description Tab from left sidebar

1. Default Description Tab : Display different data for each products
2. Review Tab : Display reviews for products
3. Size Chart : Display global for all products, different for each products, display by product type or vendor. Read articles how to add size chart for products?
4. Global Text Block : Display same data for all products. You can add this tab as many times as you want.
5. Metafields Data : Display different data for each products. Read articles how to add different data for each product?

Related Products

Go to Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Products –> Default product

Click on Related product section from left sidebar

Recommended Products

Go to Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Products –> Default product

Click on Recommended Products section from left sidebar

Recently Viewed Products

Go to Online Store –> Click Customize –> Open the drop-down menu at the top of the page –> Products –> Default product

Click on Recently Viewed Products section from left sidebar

Product Swatches

Reference Video  

We advise reading and familiarizing yourself with the Shopify Variants. It is an extremely well written and easy to understand.

There are many styles to display product swatches

• Color Swatches
• Variant Images
• Simple Dropdown Style

1. Go to Store Admin –> Products –> Add Product –>
2. Enter product title, add product images, add product tags, other details.
3. now scroll down to Variants box and click on Add Variant
   

4. When you select Color Swatch style to display product swatches, You need to add custom colors(like Burgundy, Cream, Sage, Ivory) for your products.

   Go to Store Admin –> Customize –> Sections –> Custom Colors ( Find this section right after footer section)

Product Preorder

Product Pre-Order allows you to sale your items even if products are out of stock on your store.

Step 1 : From your Shopify admin, click Products and select product you want to manage for pre order

Select "Continue selling when out of stock" and click save

Step 2 :From your Shopify admin, go to Settings –> Payments.

Find Payment capture Click on Manage button -> Select "Manually capture payment for orders." and click save.

Translations

Go to: Online Store –> Themes ->

From the list of themes, click on the button with three dots for the theme you are working on. Click on Edit theme default content.

Here's a quick way to change some of the more commonly text or you can use other language

Credits

1. jQuery Library
2. Google Maps
3. Slick Carousel
4. Masonry

Images

1. Pixabay
2. freepik
3. 123RF

Note: All images are just used for Demo Purpose Only. They are not part of the theme and NOT included in the final purchase files.

Theme Support