Spring - A Modern, Minimalistic Shop Theme

Which Apps are available in Spring templates?

These apps are developed by us

• 1. Product compare: https://app.shopifydevelopers.net/compare
• 2. Product swatch: https://app.shopifydevelopers.net/swatch
• 3. Product also boughthttps://app.globosoftware.net/also-bought/authorize
• 4. Straight to checkout - Skip Cart https://apps.shopify.com/straight-to-checkout-skip-cart

You need a Shopify store. If you don't have a shopify store, you can go to Shopify and create your store. We also recommend that you should read the Shopify Manual.It is an extremely well written and thorough guide to understanding the Shopify platform, written by Shopify themselves. It will help with understanding many aspects of the customization of your theme as well as using Shopify in general.

Purchase and download the theme from themeforest.net

Once the theme has been downloaded to your computer, you are now ready to install it to your Shopify store

You need to install the Spring theme via Shopify admin. The theme installation is simple and fast which includes these below steps:

Step 1 - Login to your Shopify admin panel.

Step 2 - Go to "Online Store" > "Themes" section:

Step 3 - Click on the "Upload Theme" button:

Step 4 - Click on the "Select File" button, then choose the theme file and click "Upload":

Step 5 - Click on "Publish Theme" option to complete the theme installation.

Our Spring Theme provides 13 beautiful default homepages. You can choose which homepage should be applied for your store by these steps:

Step 1 - Click on the "Customize" button in the theme you want to apply homepage:

Step 2 - Please click on "Select home page layout" button to import demo:

Step 3 - A list of default homepages will be shown up. You should select one beautiful homepage you want to apply, then click on "Import Now" to start importing progress.

Note We strongly recommend that you should create a backup of your Theme settings before publishing the new homepage by copying the bellow code and save in your computer. You can use the code next time if you want to roll back the current home page.

Three free shopify apps are required to be installed in our Spring theme in order to make our theme works smoothly. These app includes:

App #1 - Reviews app: You can choose Shopify Views app (Get here) or Globo AliExpress Reviewsapp (https://apps.shopify.com/aliexpress-reviews) (free for 90 days).

App #2 - Auto Currency Switcher. Developed by MLveda. You can get Auto Currency Switcher here.

App #3 - Wishlist Plus made by Swym Corporation. You can get Wishlist Plus App here.

Please go to "App" sections > Click on "Visit Shopify App Store" button to get these apps:

Shopify provides option for you to choose whether your customer need to register an account to checkout on your store or not.

In order to set it up, you should go to "Settings" > Click on "Checkout":

You can choose the option you want to use for your store in "Customer Account" section. There have 3 options:

• Accounts are disabled: Your customer can go ahead to checkout without login.
• Accounts are optional: Your customer can go to checkout as a guest or as a logged in customer.
• Accounts are required: Your customer have to login to your store to complete the checkout.

Please click "Save" to apply the change to your store.

Shopify have written documentations about its navigation in detail. Please read and follow the Shopify document.

• Add a link to Main Menu link lists
• Create a new link lists
• Create a drop-down menu
• Delete a link
• Reorder a link list

Note: Please be carefully and remember not to change "Main Menu" name or remove this section.

You need to import sample products to your store. From your Shopify admin, please click on "Products" > "Import":

In the popup, please choose file products_export.csv in the folder /sample_data of the theme

You can add new pages to your website by go to Online Store > Pages, then click on "Add page" button:

Overall, in order to create pages, you need to follow these three basic steps:

Step 1 - Add page title in "Title" field

Step 2 - Click on "Show HTML" icon to input HTML source code to add page content

Step 3 - Copy the given source code, then paste into the HTML source code area.

Our Spring theme supports creating mega menu to your shopify store. In this section, we will guide you to create the demo "Product" mega menu item.

Firstly, you need to create a new page for this mega menu item. You should use below HTML source code:

HTML code:

    <div class="popup menu-get-page">

        <ul class="equalize">

            <li>

                <div class="box-column-dropdown cover-background" style="background-image: url('//cdn.shopify.com/s/files/1/0007/6723/0010/t/2/assets/menu-drop-c-1.jpg');"><a href="/collections/all">Cactus</a>

                    <ul>

                        <li><a href="/collections/all">Out Door</a></li>

                        <li><a href="/collections/all">Living Room</a></li>

                        <li><a href="/collections/all">Bed Room</a></li>

                        <li><a href="/collections/all">Kitchen Room</a></li>

                        <li><a href="/collections/all">Desktop</a></li>

                    </ul>

                </div>

            </li>

            <li>

                <div class="box-column-dropdown cover-background" style="background-image: url('//cdn.shopify.com/s/files/1/0007/6723/0010/t/2/assets/menu-drop-c-2.jpg');"><a href="/collections/all">HousePlants</a>

                    <ul>

                        <li><a href="/collections/all">Out Door</a></li>

                        <li><a href="/collections/all">Living Room</a></li>

                        <li><a href="/collections/all">Bed Room</a></li>

                        <li><a href="/collections/all">Kitchen Room</a></li>

                        <li><a href="/collections/all">Desktop</a></li>

                    </ul>

                </div>

            </li>

            <li>

                <div class="box-column-dropdown cover-background" style="background-image: url('//cdn.shopify.com/s/files/1/0007/6723/0010/t/2/assets/menu-drop-c-3.jpg');"><a href="/collections/all">Table Plants</a>

                    <ul>

                        <li><a href="/collections/all">Out Door</a></li>

                        <li><a href="/collections/all">Living Room</a></li>

                        <li><a href="/collections/all">Bed Room</a></li>

                        <li><a href="/collections/all">Kitchen Room</a></li>

                        <li><a href="/collections/all">Desktop</a></li>

                    </ul>

                </div>

            </li>

            <li>

                <div class="box-column-dropdown cover-background" style="background-image: url('//cdn.shopify.com/s/files/1/0007/6723/0010/t/2/assets/menu-drop-c-4.jpg');"><a href="/collections/all">Indoor Plants</a>

                    <ul>

                        <li><a href="/collections/all">Out Door</a></li>

                        <li><a href="/collections/all">Living Room</a></li>

                        <li><a href="/collections/all">Bed Room</a></li>

                        <li><a href="/collections/all">Kitchen Room</a></li>

                        <li><a href="/collections/all">Desktop</a></li>

                    </ul>

                </div>

            </li>

            <li>

                <div class="box-column-dropdown cover-background" style="background-image: url('//cdn.shopify.com/s/files/1/0007/6723/0010/t/2/assets/menu-drop-c-5.jpg');"><a href="/collections/all">Potted</a>

                    <ul>

                        <li><a href="/collections/all">Out Door</a></li>

                        <li><a href="/collections/all">Living Room</a></li>

                        <li><a href="/collections/all">Bed Room</a></li>

                        <li><a href="/collections/all">Kitchen Room</a></li>

                        <li><a href="/collections/all">Desktop</a></li>

                    </ul>

                </div>

            </li>

        </ul>

    </div>
                    

After that, please active the "Collections" menu item (please refer here for guidance on this step) and check result in front-end website:

There are 2 template page about.

In order to create contact us page, you need to follow three basic steps as we have described previously, and use these HTML source code:

Note: For contact us page, you have to choose "page.contact" value in template suffix field.

HTML code:

    <div class="title-contact text-center">

        <div class="g-custom-block-title">CONTACT US</div>

        <div class="heading-large-normal">Contact Details</div>

        <p>Isque molestie condimentum purus at rhoncus. Donec faucibus<br /> condimentum erat, <strong>ut varius orci ultricies vitae.</strong></p>

    </div>

    <div class="row row-margin-80">

        <div class="contact-box col-sm-4 col-xs-12">

            <div class="icon"><i class="fa fa-phone"></i></div>

            <div class="text">

                <h4>Phone</h4>

                <p><strong>Phone 01:</strong>(+032) 3456 7890</p>

                <p><strong>Phone 02:</strong>(+032) 3427 7670</p>

            </div>

        </div>

        <div class="contact-box col-sm-4 col-xs-12">

            <div class="icon"><i class="fa fa-map-marker"></i></div>

            <div class="text">

                <h4>Address</h4>

                <p><strong>Spring Store London Oxford Street, <br />012 United Kingdom</strong></p>

            </div>

        </div>

        <div class="contact-box col-sm-4 col-xs-12">

            <div class="icon"><i class="fa fa-envelope-o"></i></div>

            <div class="text">

                <h4>Email</h4>

                <p><strong>Supportstore@moontheme.net</strong></p>

                <p><strong>Info@moontheme.net</strong></p>

            </div>

        </div>

    </div>
                    

Go to "Theme settings" > Click on "Colors" section:

You can set color for text and label, as well as theme background color here. Please click on the item name to change its color.

Go to "Theme settings" > Click on "Typography" section:

You can set font family for: OTHER and set font family and font size for: BODY TEXT

Go to General Setting -> Select Header section.

Theme Spring support 12 header

If you want to have transparency effect on the header, please tick on the "Use Header Transparency" checkbox.

Logo

We provide 2 types of logos for your header: Normal logo and Sticky logo.

• Normal logo: it is appeared on your header.
• Sticky logo: This logo is used in sticky header when it is enabled. Please tick on "Use Sticky Logo" checkbox if you want to use it.

It allow you to manage main menu (navigation)

Mega Menu 1 item

• Mega Menu 1 Item: It allows you to select a link list to display as a mega menu. You have to enter name of link list.For example Shop is item #1, Sale is item #2.
• Link Image for Megamenu 1: It allows you to add a link for image.
• Image for Megamenu 1: It allows you to add an image to Mega Menu 1 Items.

  

Mega Menu 2 item

• Mega Menu 2 Item: It allows you to select a link list to display as a mega menu. This is difference mega menu, because the menu content will be get from Pages. You can create 3 megamenu of this type.
• Content of Mega Menu 2: In order to put content for Mega menu 2, you have to choose a page from a list of pages.

  

Go to "Theme Setting" > Select "Collection Page" section:

Settings for collection page includes:

• Use collection full width: Tick on this checkbox if you want to set full width for your collection page.
• Show more products: Tick on this checkbox if you want to have

  

Shop page config

• Products per row: You can choose to display 3 or 4 products per row in collection page.

  

• Products per page: It is number of products per page. You can choose to display from 1 to 50 products per page. The theme shows up 12 products per page by default.

Shop page layout

• Layout: There are 4 layouts to choose: Grid, Left Sidebar, Right Sidebar, Masonry
• Style page collection: Select style for collection page.

Setting others

Enable sorting: Tick on this checkbox to show/hide sorting feature.

Product details

Go to "Theme Setting" > Select "Product Details" section:

Layout product detail

Set up layout for the product detail page includes:

• Layout product: There are 6 layouts available to choose.
• Style product variant: Select product variants style
• Enable ajax add to cart: Tick on this checkbox if you want to use the add to cart ajax
• Display product zoom

  

• Display product popup: Tick on this checkbox if you want to use the product popup feature

  

• Show product countdown scroll: Tick on this checkbox if you want to show product info when scroll down the product detail page.

  

Product limited

• Use product limited: Tick on this checkbox if you want to use the product limited box.
• Initial Quantity: Set up the initial quantity for the limiting product number.

  

• Stopped quantity: Set up the end value of the limited quantity.
• Interval: This is the interval time to reduce one product quantity.

Product tabs

• Add product description title

  

• Display Product Additional: Tick on this check box if you want to use additional information tab.

  

• Display Custom Tab: Tick on this check box if you want to use custom tab.
• Add custom tab title and description:

  

• Display size chart: Tick on this check box if you want to use size chart.
• Upload size chart image

  

• Display product review:

  

Related products

The related product section setup includes:

• Related product block title
• Related product block description
• Number of related products to be displayed
• Number of related products to be displayed per row

  

Product categories

Show product categories:

Product slider

• Show product row slider:
  • Add the slider title
  • Select product collection
  • Set up number of products per slide and total number of products in the slider.

    

Banner and text

Set up for banner and text section includes uploading banner image, add link, text, and heading:

Go to "Theme Setting" > Select "Social media" section:

Go to "Theme Setting" > Select "Product Action" section:

You can setup Product action in this section.

Go to "Theme Setting" > Select "About Page" section:

You can set about page:

Go to "Theme Setting" > Select "Contact Page" section:

You can set contact page:

Go to "Theme Setting" > Select "General" section:

You can setup social sharing options by ticking on the checkbox. You can also setup other settings:

Go to "Theme Setting" > Select "Social media Footer" section:

You can setup social media footer here:

Go to "Theme Setting" > Select "Notification Product" section:

You can setup notification product here:

Go to "Theme Setting" > Select "Newsletter Popup" section:

You can setup newsletter popup here:

• Show Newsletter Popup: Enable/disable newsletter popup
• Popup showing after: Setup to show popup when site load after a specific time (Time unit: ms)
• Title: Popup title
• Sub Title: Popup subtitle

General

You need to select background color:

Blog: Select blog from existed blog lists.

How many articles do you want to show?: Select number of blogs to be displayed. You need to input integer value.

Newsletter

You need to add title and subtitle for this block.

The blog posts carousel section includes these settings as shown in below screenshot:

Background color:

Title and subtitle:

Image author: Set image for the blog's author. Note: Author's image will be appeared after choosing blog posts.

Blog: Select blogs from existed blog lists.

Slide to show: Choose number of blogs to display in the blog slider

How many articles do you want to show?: Select number of blogs to be displayed. You need to input integer value.

• Add title and subtitle:

  

• Blog: Select blogs from existed blog lists.
• Blog posts per row: Select number of blog posts to be displayed in one row.
• How many articles do you want to show?: Select number of blogs to be displayed. You need to input integer value.

• Add title and subtitle:

  

• Image author: Choose image for the blog's author.

  

• Blog: Select blogs from existed blog lists.
• Blog posts per row: Select number of blog posts to be displayed in one row.
• How many articles do you want to show?: Select number of blogs to be displayed. You need to input integer value.

• Add title and subtitle:

  

• Blog: Select blogs from existed blog lists.
• How many articles do you want to show?: Select number of blogs to be displayed. You need to input integer value.

Note: Please click "Save" after filling in all settings to update blog layout.

Info center banner

• Show content info?: Tick if you want to use the center banner.
• Add heading, text, and title:

  

Content

One banner contains these settings:

• Use padding 0px? : Tick here if you want to use 0px padding for this banner.
• Image: Upload banner image
• Add link, title, heading, and subtext:

  

• Use full?: Please tick here if you want to use full width banner.
• Margin: Add top/right/bottom/left margin value for this block. If you don't want to have margin, please use "0" value.
• Style: Select banner layout from 2 available styles
• Image: Upload banner image
• Title: Add title for this banner
• Heading: Add heading for this banner
• Subtext: Add subtext for this banner
• Button link: Put link for the button
• Button name: Add name for the button

General Settings

• Use full?: Please tick here if you want to use full width banner.
• Margin: Add top/right/bottom/left margin value for this block. If you don't want to have margin, please use "0" value.
• Background image: Upload background image for this block.

  

Left content

• Title: Add title for this banner
• Color title: Select color for the title text

  

• Heading: Add heading for this left content
• Color heading: Add color for the heading text
• Button link: Put link for the button
• Color button: Add color for the text button
• Button name: Add name for the button

  

Right content

• Background (in rgba): Set up background image for the right block.
• Heading: Add heading for the right content
• Text: Add text for the right content

  

• Use full?: Please tick here if you want to use full width banner.
• Show box content?: Tick here if you want to display banner content
• Add background image, heading, title, sub heading:

  

• Use full?: Please tick here if you want to use full width banner.
• Add background image, heading, title, sub heading, text background:

  

General Settings

Clients slider

Content

One client block contains these settings:

• Client text: Add client text
• Image client: Add client's picture
• Client name: Add client's name

  

General settings

Content

One product block contains these settings: product image, product name, description, and product price.

Testimonials block:

• Image: Add client's image
• Name: Add client's name

  

Blog & News block:

• Blog: Choose blogs from the existed blog list.
• How many articles do you want to show?: Select number of blogs to be displayed. You need to input an integer value.

Left Sidebar

You can setup title for this block in "Title" field:

Right Sidebar

• Show product slider: Tick on this checkbox if you want to enable the product slider block.

  

• Set up product slider:

  

• Show banner: Tick on this checkbox if you want to enable the banner block.

  

• Add image, text, link, etc.:

  

Content

You are able to add/remove product tabs in the content block.

One product tab contains these settings:

• Large product:
  • Show product large: Tick on this checkbox if you want to show the large product.
  • Add product image, price, name, and link for the large product.

  

• Set up the products to be displayed:

  

1. Left Sidebar

1.1 Product slider 1

• Show product slider 1: Tick on this checkbox if you want to enable this product slider block.

  

• Set up product slider:

  

1.2 Banner

• Show banner: Tick on this checkbox if you want to enable the banner block.

  

• Add image, text, heading, and link:

  

1.3 Testimonials

• Show left testimonials: Tick on this checkbox if you want to enable the testimonials block.

  

• Add image, text, and name:

  

Product slider 2

• Show product slider 2: Tick on this checkbox if you want to enable this product slider block.

  

• Setup a product slider:

  

Right sidebar

• Show product gird tabs: Tick on this checkbox if you want to enable the product grid tabs.

  

• Heading grid tabs: Add heading title for the grid tabs

  

• Show product slider: Tick on this checkbox if you want to enable this product slider block.

  

• Heading product slider: Add heading text for this product block.

  

Content

You are able to add/remove tabs in the content block.

One tab includesthe product grids and the product slider:

• Product grid:

  

• Product slider:

  

Settings for product grid

• Add title for this tab
• Select products to be shown up:

  

• You can add more tabs by clicking on "Add content" >> Choose "Product tabs" like below screenshot:

  

Settings for product slider

One product slider will be set up in Product large and small section:

One section contains:

• Product large:
  • Show product large: Tick on this checkbox if you want to show the large product.
  • Add product image, product name, product price, and link for small product.

  

• Product small grid:
  • Choose collection: Select product collection to appear in this tab
  • Number products to show: Set number of products to be displayed in this tab

  

You can add more tabs by clicking on "Add content" >> Choose "Product large & small" like below screenshot:

General Settings

Add title and subtitle:

Image left

Add image, title, subtitle, and link for the left image:

Content

Add width, image, title, and subtitle for one small image block:

Note: Only 3 small image blocks are allowed in this section.

Settings Slider

• Set up number of logos to be displayed. You can choose in the dropdown 4/5/6 brands per row.
• Setup a logo slider:

  

Content

• Add image and link for each logo:

  

• You can add more logos by clicking on "Add logo" button:

  

NOTE: After putting all information in Instagram feed section, please click "Save" button to make the Instagram feed update in the admin site.

Settings

• Add title, margin:

  

• Add heading and choose style for this heading:

  

• Access Token: Enter access token of your Instagram
• Limit (integer): Enter number of image to be displayed in your Instagram feed. Note: 33 is maximum images can be shown up.
• Sort by: Select sort by type for Instagram images

Settings Slider

• Speed (integer): Fill in sliding speed (Unit: ms)
• Slides to Show (integer): Enter number of slide to show up in Instagram feed

  

This section contains 3 blocks. Each block includes these settings:

• Add image, title, and width.
• Number items: Add description text for this block
• Navigation link list: Select menu from the existed menu list for this block

  

Note: You're able to use only 3 blocks for this section.

Settings

Add title, subtitle, and background image:

Content

By default, there have 2 featured products. You are enable to add more products by clicking on "Add content" button:

Each featured product includes these settings:

• Image: Upload product image
• Price: Enter product price

  

• Add product name, product description, product category, product weight, button name and link:

  

Settings

• Add title, heading, button text and link:

  

• Setup our product look slider:

  

Content

One product contains these settings: Product image, product name, product link, original price, sale price, and button.

In order to add new product block, please clicking on "Add block product look" button:

The product countdown section includes these settings:

• Background: Upload background image for this section
• Left content: Add title and description for left content

  

• Right content:
  • Add title and description for the right content.
  • End date countdown: Add end date for the countdown (Format: YYYY/MM/DD)
  • Price: Add product price

  

Settings

Add title:

Content

One tab contains a large product and a number of small products in a specific collection:

• Title tab: Add title for this section
• Show product large: Tick on this checkbox if you want to display the large product
• Add image, product name, and product price for the large product:

  

• Choose collection: Select a collection for small products
• Number products to show (Integer): Set up number of products to be displayed

  

Background: Set up background image for this section

Each best-selling block contains these settings: block image, heading, title, text, price, and button:

Settings

Add title and subtitle:

Our project slider

Setup a slider:

Content

One project contains these settings: project image, title, subtitle, and link:

In order to add a new project block, please click on "Add block project carousel" button:

Settings

• Add title and subtitle:

  

• Set up button name and link:

  

Content

By default, this section provide 6 default project blocks. You can add more project blocks by clicking on "Add block project" button:

One block contains these settings: width, image, title, and subtitle.

Settings

Add title and subtitle:

Content

By default, this section provide 8 default project blocks. You can add more project blocks by clicking on "Add block project" button:

One block contains these settings: image, title, subtitle, and link.

Settings

• Style hover: Select style when hover over one block.

  

• Title: Enter section title
• Color title: Select font color for the section title
• Letter spacing (in em): Define letter spacing for the title
• Use font weight bold: Tick on this check box if you want to bold the title
• Sub title: Enter section subtitle
• Style title and sub title: Select style for title and subtitle

  

Content

Each image block project contains these settings: Image, link, heading, and title.

Left content

Right content

• Image 1:

  

• Image 2:

  

• Image 3:

  

• Image 4:

  

Settings

• Add heading and title:

  

• Add button name and link:

  

Content

By default, there have 6 project blocks. You're not able to add more project blocks.

One project contains these settings: Image left, title, heading, text, button name and link.

• Style newsletter: Select style for the newsletter box
• Background: Select background image for the newsletter section

  

• Add title, subtitle, and text:

  

Settings

Background: Upload background image for this section.

Newsletter

• Title: Add title for this newsletter block
• Sub Title: Add subtitle for this block

Contact form

Add title and subtitle:

Settings

The settings for this section includes:

• Add title, subtitle, text and button
• Select navigation style and dot style

  

• Choose collection: Select a specific collection to show up in the product slider
• Number products to show: Set number of products to be displayed in this block

  

Theme settings

• Show product action: Tick on this check box if you want to show product action

  

• Style product action: Select action style when hover over the product
• Background color with style 2: Select background color for product action

Settings

The settings for this section includes:

• Background image: Upload background image for this section

  

• Add title, subtitle, and text.

  

• Add button name and link.

  

• Set up products to be appeared:

  

By default, there have 3 product columns. You are enable to add more product columns by clicking on "Add product column" button:

One product column contains thesesettings:

• Add heading and title

  

• Add button name and link:

  

• Setup products to be appeared in the section:

  

Settings

• Add heading and title
• Text right content: Add text to the right side of the product slider

  

• Add button name and link:

  

• Set up products to be shown up:

  

Product Slider

Setup product slider:

This section divides into 2 parts: product tabs grid and product countdown.

Product tab grid

Product per row: Set up the number of products in one row

Product countdown

At first, you need to enter heading for the product count down slider:

By default, this product countdown slider provides 3 slides. Each product countdown slide includes these below settings: product image, text, heading, product price, and the end date countdown

Add button name and link

Content

You can add content for the product grids tab part here. Three tabs will be created by default. You can add a new tab by clicking on "Add tabs" button.

Each tab contains these settings:

• Add tab title
• Select products to be shown up

  

Settings

One product tabs carousel includes these settings:

• Style nav tabs: Select style for the navigation tab
• Add the section title

  

• Add heading, button name and link.

  

Product slider

Content

You can add content for the product tab here. Four tabs will be created by default. You can add a new tab by clicking on "Add tabs" button.

Each tab contains these settings:

• Add tab title
• Select products to be shown up:

  

Settings

• Style nav tabs: Select style for the navigation tab.

  

• Add title and subtitle

  

• Add button name and link.

  

• Set up number of products to be displayed in one row

  

Content

You can add content for the product tab grid here. Four tabs will be created by default. You can add a new tab by clicking on "Add tabs" button.

Each tab contains these settings:

• Add tab title
• Select products to be shown up

  

One section contains 6 featured collection blocks and 1 newsletter block.

• Set up for one featured collection block:

  

• Set up for the newsletter block:

  

• Add image, title, subtitle
• Insert the YouTube video link.

This section contains these settings: Add title, subtitle, and text.

Video

• Link video (YouTube): Insert video link
• Image video: Upload the video image

  

Content below video

• Add title and subtitle
• Show box number: Please tick on this checkbox if you want to show the number box.

  

• Set up for one number box:

  

Content

Set up one Garden care block:

Note: You can only use 4 garden care blocks. You're not able to add more blocks here.

Left content

Setup title, subtitle, description text, and button:

Right content

Select image to be display in the right side:

Content

Setup for one number box includes number, title, and subtitle

Note: You're not able to add more than 3 number blocks.

This section contains 3 boxes block. You're not allowed to add more than 3 blocks.

One block contains these settings: box image, title, heading, and description text.

Settings

Add title and subtitle for this block:

Content

By default, 4 blocks will be created for you. You can be able to add more blocks by clicking on "Add block column scale" button:

One block contains these settings:

• Set up background color:

  

• Upload image and add text on this image:

  

• Add title, description text, and link:

  

This section divides into 2 parts: Image in the left side and 4 small blocks in the right side.

Image left

Content

We set up content for 4 small blocks in the right side.Note: You're not able to add more blocks.

One block contains these settings:

• Set up background color and text color:

  

• Add image, title, and subtitle:

  

This section provides 4 small blocks which is divided into 2 rows and each row has 2 columns.

Add column video

• Link video (YouTube): Insert the YouTube video link
• Image (Required field): Add background image for this video block.

  

Amazing video introducing

Add title, subtitle, and button name and link:

Add column testimonials

This block contains a testimonial slider. This slider contains 3 testimonials. Each testimonial contains info and author set up.

Add column image

Settings

Set up title and subtitle for this block

Content

By default, three blocks are created.

One block contains these settings: width value, block image, block title, link, and text.

Settings

• Set up width for the slider block in the "Use width slideshow" field:

  

• You can decide to use full width, padding, or container for this slider.
• Add title and heading for this section:

  

Content

By default, four blocks are created.

One block contains these settings: width value, block image, link, block title, and heading.

Settings

• Select section layout:
  • Layout 1:

    

  • Layout 2:

    

• Add heading for the section:

  

Content

This section contains multiple slides for text and images. You're able to add more slides by clicking on "Add block slider txt img" button.

Each slide divides into 2 blocks: Text block and image block.

• Setup for one text block includes: Title, heading, description text, and button.

  

• Set up for one image block:

  

This section divides into 2 parts:

• Image and info at the top
• Three history blocks at the bottom

Settings

Upload image and add description text:

Content

Three history blocks will be created by default. You can add more blocks by clicking on "Add block text history" button:

One history block contains these settings: block image, title, and description text.

Settings

Set up heading, title, and select style for heading and title:

Left content

Upload image, image text and button name for the left content.

Note: You need to decide the position to appear image text and add text in one field only: "Text on image" or "Text below image".

If you want to display text on image, please add text into "Text on image" field.

If you want to display text below image, please add text into "Text below image" field.

Content

Three quality products blocks will be created by default. You can add more blocks by clicking on "Add block text image spring" button:

One quality products block contains these settings: Number, title, and description text.

This skill bar section divides into 2 blocks: Left skill bar and right skill bar.

Left skill bar

• Add title, heading, and description text.

  

• Add author's name and author's profile picture:

  

Right skill bar

• Add title, heading, and text note:

  

• Set up for one skill bar includes:
  • Skill title
  • Number percent (Max is 100% percent)

  

In this section, you're provided 4 default text support blocks. You're not allowed to add more blocks.

One block contains these settings: block image, title, and description text.

This section includes these settings:

• Upload block image:

  

• Add title, subtitle, and description text:

  

By default, the theme provides 4 tabs:

You can add more tabs by clicking on "Add block text tab" button.

You need to add tab title and tab content for each tab:

This section contains these settings:

• Add section title and sub title, choose style for the title and subtitle
• Tick on the "Show hovered" box if you want to have hover effect on the garden car block.

  

• Set up for one Garden care block includes block title, subtitle, and image.

  

Note: You can only use 4 garden care blocks. You're not able to add more blocks here.

Video

You need to insert video link, upload video background image, and add video description text.

This section contains settings for content on the left side, content on the right side, and content at the bottom.

Left content

Add title, subtitle, description text, and button:

Right content

Insert video link and upload video background image:

Bottom content

The content at the bottom of this section contains multiple small blocks. By default, there have 4 available blocks. You're able to add more blocks by clicking on "Add block text" button:

One block contains these settings: block image, title, and subtitle.

Video

Settings for video block includes inserting video link and uploading video background image.

Title and heading

Below content

The theme provides 3 blocks here. Note: You're not allowed to add more blocks.

One block contains these settings:

• Upload block image:

  

• Image hover: When you hover over the block, this second image will be displayed.

  

• Add block title and description text:

  

General settings

Tick on this check box if you only want to use shadow effect on top of section:

Content

This section contains three blocks. You're not allowed to add more blocks.

One block includes these settings: block image, title, subtitle, and description text.

This section contains multiple slide. By default, three blocks are created automatically. You're able to add more slide by clicking on "Add block trending product".

Each slide includes 2 blocks: Left content and right content.

Left content

Upload block image and add description text.

Right content

Add block title, heading, description text, and button:

Settings

Add section title and heading:

Content

The theme provides 3 blocks by default. You're able to add more blocks by clicking on "Add block why choose" button:

One block contains these settings: select block width value, add block number, title, and description text.

This section contains these settings:

• Upload background image, add title, heading, and description text:

  

• Set up 4 blocks. You're not allowed to add more blocks here. Each block contains these settings: number, title, and subtitle.

  

This section contains settings for left column and right column.

Left column

Add section heading, subheading, description text, and button.

Right column

The content of the right column includes 4 small blocks. Each block includes these settings: block image, title and subtitle, and description text.

• Set up for block 1:

  

• Set up for block 2:

  

• Set up for block 3:

  

• Set up for block 4:

  

• Add title and sub title for this section:

  

• Set up content for one slide:

  

You can put your client's review in this section.

The theme provides option for you to use background color or upload background image:

• Background color:

  

• Background image:

  

• Choose style for testimonials content:

  

• Add title, subtitle, and select style for the title:

  

• Add special text:

  

• Set up for one testimonial includes: testimonial title and content, author's image and name.

  

General settings

• Use full screen slideshow: Tick on this checkbox if you want to display the slide show in full screen.
• Use shadow slideshow: Tick on this checkbox if you want to use shadow effect for the slideshow.

  

• Set up width for the slideshow by selecting value in the "Use width slideshow" dropdown:

  

• Tick on the "Show left menu?" if you want to use left menu in the slideshow section. You can select menu to be appeared in the "Link left menu" field.

  

  Result:

  

• Set up slideshow height and margin, transition type, dots and navigation style, delay time between 2 slides:

  

• Set up slideshow info:

  

Content

One slide contains these settings: upload slide image, add heading and sub-heading, and button.

You can put image and text in this section.

You can put image and text in this section.

The Filter sidebar only applies for Collection page. In order to setup filter side bar, please go to Themes > Customize > Click on "Collection page" > Choose "Filter Sidebar".

The filter sidebar section contains 2 setups:

SETTINGS PRODUCT CATEGORIES

Please tick on "Show" checkbox if you want to show up Product Categories in the Filter sidebar.

You can change the product categories title by editing text in "Heading" field.

CONTENT

By default, you can filter products with 3 filter types: By Size, By Color, and By Price. You can add new filter type by clicking on "Add content" button.

Filter made with tags, so all value from filter must exist from product.Let me give you an example to explain how to setup to make this filter sidebar work.

We have filter by size with values: XXL, XL, L, M, S, and X.You need to enter these tags from product page. The steps is as below:

Step 1: Add the list of tags to "Shop by tags list" field. Please take note that each tag is separated by one comma, then click "Save"

Step 2: Add tags to the product that you want to filter, then click "Save".

For Filter by Color and Filter by Price, you just need to do similar as Filter by Size.

You can also create a custom block text in the filter sidebar section.

The custom color variants only applies for Collection and Product detail page. In order to add more color variants, please go to Themes > Customize > Click to choose "Collection page" or "Product pages" > Choose "Custom Color Variants" section.

You need to tick on use Custom Color checkbox to use your own color.

When adding new custom color, you need to fill in these information:

- Color Name: Add name for your custom color

- Color image: Add image for your custom color (Please click on ?how image?to use this feature). The recommended image size is 30x30px.

- Select color: Add custom color

- Select color 2 (optional): Add second custom color