Egrowth Lite - Free Magento 2 Theme

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".

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

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

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?

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".

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

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

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

Enable/Disable scroll to top button.

Add This (Socials)

Enable/Disable "Add This" socials.

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

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.

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:

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:

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:

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.

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.

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:

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:

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.

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:

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:

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:

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:

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:

Header General Settings

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

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.

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.

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

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

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

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

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

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 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

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!

Getting Started

Video Tutorials

Introduction

Theme Installation

Prepare Installation

Theme Installation

Theme Enable/Activate

Create Child Theme

How To Create A Child Theme?

How To Use A Child Theme?

Theme Update

Theme configuration

Scroll To Top

Add This (Socials)

Customization

Homepage Configuration

How to set Home Page ?

Home Page Banner Slider

Home Page Services

Promotion Block One

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

Promotion Block Two

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

Latest Blogs

Shop By Brand

Promotion Block Three

Home Testimonials Block

Header & Menu Configuration

Header General Settings

How to add or change Logo?

How to add or change Favicon?

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

Footer Configuration

Footer Top

Footer Middle

Footer Bottom

Category Page

Product Labels

Product Page

General Settings

Custom Tabs

Contact Us Page

Contact Info

Help & Support