Welcome to Egrowth Lite Free Magento 2 Theme! We would like to thank you for purchasing Egrowth Lite Magento 2 Theme! We are very pleased you have chosen Egrowth Lite Magento 2 Theme for your website, you will be never disappointed! Before you get started, please be sure to always check out this documentation.

Compatible with Magento:

Magento 2.2.x, 2.3.x, 2.4.x

Magento 2 Help:

System Requirements

Installation Guide

Online Magento 2 guide

Magento Forum

magento.stackexchange.com

Egrowth Lite Free Magento 2 Theme is unique & optimized theme for online store.

Egrowth Lite has all features to power up your online store. Grab your customer attention with New and Sale product labels that worth a thousand promotional words.

Reach customers around the world by showing symbolic Language Flag that offer better memorable shopping experience to customers. Promote your offers with top promotion bar and drive more sales.

To install the theme follow the instructions below:

Prepare Installation

We recommend you to duplicate your live store on a development store and try installation on it in advance.

Backup Magento files and the store database.

Disable all cache related section that you have in your Magento.

Theme Installation

1. Download theme package from your AddonOcean Account.

2. Copy(upload) files and folders from theme archive to your Magento 2 root directory.

3. In command line, using "cd", navigate to your Magento 2 root directory.

4. Run below commands.

  • php bin/magento setup:upgrade
  • php bin/magento setup:static-content:deploy -f

5. Clear/Flush the cache.

6. Now navigate to "Egrowth Lite Theme > Configuration > Theme" and expand "Installation" tab.

7. Your theme is now installed and ready for work.

Navigate to "Content > Design > Configuration".

Egrowth Lite - Design Configuration

Step 1. Edit the store in which you want to set the theme.

Egrowth Lite - Select Store

Step 2. Select "Egrowth Lite" theme in "Applied Theme" drop-down and click on Save Configuration button.

Egrowth Lite - Set Theme

Step 3. Clear/Flush the cache.

If you need to customize the theme, we recommend you to create the child theme.

How To Create A Child Theme?

Egrowth Lite - File Structure

Below steps define how to create a Magento 2 child theme.

For Egrowth Lite Theme

Vendor name: AO

Parent Theme name: addontheme01

Step 1: Create child theme folder named as {parent-theme-name}_child in the below folder path.

"app/design/frontend/{theme-vendor-name}/{parent-theme-name}_child"

Ex: Magento root folder/app/design/frontend/AO/addontheme01_child

Step 2: Create file theme.xml inside the child theme.


    <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
        <title>Egrowth Lite Child</title>
        <parent>AO/addontheme01</parent>
        <media>
            <preview_image>media/preview.jpg</preview_image>
        </media>
    </theme>
                    

Step 3: Create a registration.php file for registering your child theme.


    <?php

    \Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::THEME,
        'frontend/AO/addontheme01_child',
        __DIR__
    );
                    

Step 4: Create composer.json.


    {
        "name": "ao/theme-frontend-base-lite-child",
        "description": "N/A",
        "config": {
            "sort-packages": true
        },
        "require": {
            "php": "~7.1.3||~7.2.0||~7.3.0",
            "magento/framework": "102.0.*",
            "magento/theme-frontend-blank": "100.3.*"
        },
        "type": "magento2-theme",
        "license": [
            "OSL-3.0",
            "AFL-3.0"
        ],
        "autoload": {
            "files": [
                "registration.php"
            ]
        },
        "version": "100.3.5"
    }
                    

Step 5:

Add preview.jpg in "app/design/frontend/AO/addontheme01_child/media" folder.

Add view.xml in "app/design/frontend/AO/addontheme01_child/etc" folder.

You can copy both file and image from parent theme.

How To Use A Child Theme?

Navigate to "Content > Design > Configuration".

Egrowth Lite - Design Configuration

Step 1. Edit the store in which you want to set the theme.

Egrowth Lite - Select Store

Step 2. Select "Egrowth Lite Child" theme in "Applied Theme" drop-down and click on Save Configuration button.

Egrowth Lite - Set Child Theme

Step 3. Clear/Flush the cache.

Follow the steps.

Step 1: Take the existing files and database backup. (Recommended)

Step 2: Download the latest theme files from your AddonOcean Account.

Step 3: Upload and override theme/extension files over existing theme files.

Step 4. Run below commands.

  • php bin/magento setup:upgrade
  • php bin/magento setup:static-content:deploy -f

Step 5. Clear/Flush the cache.

Scroll To Top

Egrowth Lite - Scroll To Top

Enable/Disable scroll to top button.

Add This (Socials)

Egrowth Lite - Add This (Socials)

Enable/Disable "Add This" socials.

You will get pub id from http://www.addthis.com

Customization

Egrowth Lite - Customization

You can add your own CSS styles and scripts without touching theme files.

How to set Home Page ?

Step 1: Navigate to "Admin > Store > Configuration > General > Web" and expand "Default Pages" tab.

Step 2: Choose the page in "CMS Home Page" field.

Egrowth Lite - Set Home Page

Step 3: Click on  Save Config  button.

Step 4: Clear/Flush the cache.

Home Page Banner Slider

To add "Home slider" block, use below code into the cms content field.


    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="ao_home_slider"}}
                    

To edit this block, navigate to "Admin > Content > Elements > Blocks and edit "Home slider".

Frontend:

Egrowth Lite - Home slider

Home Page Services

To add "Home Services" block, use below code into the cms content field.


    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="ao_home_services"}}
                    

To edit this block, navigate to "Admin > Content > Elements > Blocks and edit "Home Services".

Frontend:

Egrowth Lite - Home Services

Promotion Block One

To add "Promotion Block One" block, use below code into the cms content field.


    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="ao_promotion_one"}}
                    

To edit this block, navigate to "Admin > Content > Elements > Blocks and edit "Promotion Block One".

Frontend:

Egrowth Lite - Promotion Block One

How to add "Featured Collection" Block on Home Page?

Step 1: Go to edit CMS home page.

Step 2: Click on  Insert Widget...  button and select "Catalog Products List" from "Widget Type" drop-down.

Egrowth Lite - Catalog Products List

Step 3: Set widget options.

Title: Add title.

Number of Products to Display: Add how many products you want to display in widget.

Conditions: Select "Is Featured" to "Yes".

Please Note:

You need to select "Is Featured" attribute "Yes" in the products.

After done with options, click on Insert Widget  button to add widget in page.

Step 5: Save the page and clear/flush the cache.

OR

You can use below code into the cms content field like below.


    {{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Featured Collection" show_pager="0" products_count="10" template="Magento_CatalogWidget::product/widget/content/grid.phtml" cache_lifetime="0" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^],`1--1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Product`,`attribute`:`is_featured`,`operator`:`==`,`value`:`1`^]^]"}}
                    

Frontend:

Egrowth Lite - Featured Collection

Promotion Block Two

To add "Promotion Block One" block, use below code into the cms content field.


    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="ao_promotion_two"}}
                    

To edit this block, navigate to "Admin > Content > Elements > Blocks and edit "Promotion Block Two".

Frontend:

Egrowth Lite - Promotion Block Two

How to add "New Products" Block on Home Page?

Step 1: Go to edit CMS home page.

Step 2: Click on  Insert Widget...  button and select "Catalog New Products List" from "Widget Type" drop-down.

Egrowth Lite - Catalog New Products List

Step 3: Set options and click on Insert Widget  button to add widget in page.

Step 4: Save the page and clear/flush the cache.

OR

You can use below code into the cms content field like below.


    {{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="all_products" show_pager="0" products_count="10" template="product/widget/new/content/new_grid.phtml" cache_lifetime="0"}}
                    

Frontend:

Egrowth Lite - New Products

Latest Blogs

Egrowth Lite provides two types of blog section.

1. Static (static content in CMS Block)

To add "Home Blogs" block, use below code into the cms content field.


    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="ao_home_blogs"}}
                    

To edit this block, navigate to "Admin > Content > Elements > Blocks and edit "Home Blogs".

2. Using Magefan Blog Extension

Egrowth Lite theme provides support for magefan blog extension.

If you have installed this extension then use below code into the cms content field.


    {{widget type="Magefan\Blog\Block\Widget\Recent" title="Latest Blogs" number_of_posts="5" category_id="0" tag_id="0" author_id="0"}}
                    

Frontend:

Egrowth Lite - Home Blogs

Shop By Brand

To add "Home Brand Slider" block, use below code into the cms content field.


    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="ao_brand_slider"}}
                    

To edit this block, navigate to "Admin > Content > Elements > Blocks and edit "Home Brand Slider".

Frontend:

Egrowth Lite - Shop By Brand

Promotion Block Three

To add "Promotion Block Three" block, use below code into the cms content field.


    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="ao_promotion_three"}}
                    

To edit this block, navigate to "Admin > Content > Elements > Blocks and edit "Promotion Block Three".

Frontend:

Egrowth Lite - Promotion Block Three

Home Testimonials Block

To add "Home Testimonials Block" block, use below code into the cms content field.


    {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="ao_home_testimonials"}}
                    

To edit this block, navigate to "Admin > Content > Elements > Blocks and edit "Home Testimonials".

Frontend:

Egrowth Lite - Home Testimonials Block

Header General Settings

Navigate to "Egrowth Lite Theme > Configuration > Header" and expand "General" tab.

Egrowth Lite - Header General Settings

Header Top Static Block: Add static block identifier to display static content at header top.

Header Static Block: Add static block identifier to display static content in header.

How to add or change Logo?

Navigate to "Content > Design > Configuration". Go to edit your theme and expand "Header" tab.

Egrowth Lite - Header Logo

Logo Image: Upload your logo.

Logo Attribute Width: Add logo width.

Please Note:

Recommended width for logo for best view: Not more than 150px

Logo Attribute Height: Add logo height.

Please Note:

Recommended height for logo for best view: Not more than 50px

Welcome Text: Welcome texts in header.

Logo Image Alt: Logo Alt texts. It will display if in case logo image is not found.

After done with all settings, click on  Save Configuration  button.

How to add or change Favicon?

Navigate to "Content > Design > Configuration". Go to edit your theme and expand "HTML Head" tab.

Egrowth Lite - Header Favicon

Favicon Icon: Upload your favicon icon with one of below file types.

Maximum file size: 2 MB. Allowed file types: JPG, GIF, PNG, ICO, APNG.

After uploading favicon, Click on  Save Configuration  button.

How to enable and display icons for store view drop-down labels ?

Navigate to "Egrowth Lite Theme > Configuration > Header" and expand "General" tab.

Set "Yes" in "Display Language Icons Before Label" field and save config.

Now upload language icon at below location.

"{magento-root}/pub/media/language/"

Image name format: {store-view-code}.png

Image Size: 20px x 12px.

Navigate to "Egrowth Lite Theme > Configuration > Footer".

Footer Top

Egrowth Lite - Footer Top Config

Footer Top Static Block: Set static block identifier to display content in footer top.

Egrowth Lite theme provides one pre-defined static blocks for footer top as below.

1. Footer Top Newsletter

Identifier: ao_footer_top_newsletter

Egrowth Lite - Footer Top Newsletter

Footer Middle

Egrowth Lite - Footer Middle

For each footer column, there are three settings as below.

Column (x) Static Block: Set static block identifier to display content in footer column.

Egrowth Lite theme provides four pre-defined static blocks for footer column as below.

1. Footer Get in Touch

Identifier: ao_footer_contact_info

2. Footer My Account

Identifier: ao_footer_my_account

3. Footer Quick Links

Identifier: ao_footer_quicklinks

4. Footer Customer Services

Identifier: ao_footer_customer_services

Footer Bottom

Egrowth Lite - Footer Bottom

Left Static Block: Set static block identifier to display content in footer bottom left.

Right Static Block: Set static block identifier to display content in footer bottom right.

Egrowth Lite theme provides two pre-defined static blocks for footer bottom as below.

1. Footer Copyright Text

Identifier: ao_footer_copyright

2. Payment Icons

Identifier: ao_payment_icons

Navigate to "Egrowth Lite Theme > Configuration > Product List".

Product Labels

Egrowth Lite - Product Labels

Show New Label: Enable/Disable new label.

Please Note:

In order to "New" label for any product, you must set product's "Set Product as New From" and "To" date.

Show Sale Label: Enable/Disable sale label.

Please Note:

In order to "Sale" label for any product, you must set product's "Special Price" and "Special Price From" and "To" date.

Navigate to "Egrowth Lite Theme > Configuration > Product Detail".

General Settings

Egrowth Lite - Product General Settings

Show New Label: Enable/Disable new label.

Please Note:

In order to "New" label for any product, you must set product's "Set Product as New From" and "To" date.

Show Sale Label: Enable/Disable sale label.

Please Note:

In order to "Sale" label for any product, you must set product's "Special Price" and "Special Price From" and "To" date.

Custom Tabs

Egrowth Lite - Custom Tabs Settings

Egrowth Lite theme provide options for adding two custom tabs on product page.

You can add/display content from the CMS Static Block

Select "CMS Block" in drop-down and add block identifier code in tab identifier field.

Navigate to "Egrowth Lite Theme > Configuration > Contact".

Contact Info

Egrowth Lite - Contact Info Settings

You can add store title, phone, address, email and additional info on contact page.

Please, if you have any questions, run into any issues or just need some help, do not hesitate to contact us via our Support Center. We believe in providing the best support possible, and we monitor our Support center just about daily.

Your feedback is absolutely welcome!