Welcome to Etrend Lite Free Magento 2 Theme! We would like to thank you for purchasing Etrend Lite Magento 2 Theme! We are very pleased you have chosen Etrend 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

HiddenTechies Blog

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

Etrend 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 HiddenTechies 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 "Etrend Theme > Configuration > Theme" and expand "Installation" tab.

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

Navigate to "Content > Design > Configuration".

Etrend Lite - Design Configuration

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

Etrend Lite - Select Store

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

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

Etrend Lite - File Structure

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

For Etrend Lite Theme

Vendor name: ET

Parent Theme name: base_lite

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/ET/base_lite_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>Etrend Lite Child</title>
        <parent>ET/base_lite</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/ET/base_lite_child',
        __DIR__
    );
                        

Step 4: Create composer.json.


    {
        "name": "et/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/ET/base_lite_child/media" folder.

Add view.xml in "app/design/frontend/ET/base_lite_child/etc" folder.

You can copy both file and image from parent theme.

How To Use A Child Theme?

Navigate to "Content > Design > Configuration".

Etrend Lite - Design Configuration

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

Etrend Lite - Select Store

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

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

Etrend Lite - Scroll To Top

Enable/Disable scroll to top button.

Add This (Socials)

Etrend Lite - Add This (Socials)

Enable/Disable "Add This" socials.

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

Customization

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

Etrend 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="et_home_slider"}}
                        

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

Frontend:

Etrend 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="et_home_services"}}
                        

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

Frontend:

Etrend Lite - Home Services

Promotion Block

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="et_promotion_one"}}
                        

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

Frontend:

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

Etrend 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 <i>Collection</i>" 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:

Etrend Lite - Featured Collection

Fullwidth Promotion Block

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="et_promotion_two"}}
                        

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

Frontend:

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

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

Etrend Lite - New Products

Latest Blogs

Etrend 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="et_home_blogs"}}
                        

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

2. Using Magefan Blog Extension

Etrend 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 <i>Blogs</i>" number_of_posts="5" category_id="0" tag_id="0" author_id="0"}}
                        

Frontend:

Etrend 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="et_brand_slider"}}
                        

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

Frontend:

Etrend Lite - Shop By Brand

Header General Settings

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

Etrend 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. Ex. Right now its using to display contact information in header.

How to add or change Logo?

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

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

Etrend 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 "Etrend 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 "Etrend Theme > Configuration > Footer".

Footer Top

Etrend Lite - Footer Top Config

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

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

1. Footer Top Newsletter

Identifier: et_footer_top_newsletter

Etrend Lite - Footer Top Newsletter

Footer Middle

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

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

1. Footer Get in Touch

Identifier: et_footer_contact_info

2. Footer My Account

Identifier: et_footer_my_account

3. Footer Quick Links

Identifier: et_footer_quicklinks

4. Footer Customer Services

Identifier: et_footer_customer_services

Footer Middle Static Block

"Footer Middle Static Block" is used to display static content above/below footer columns as per footer type.

Etrend Lite theme provides one pre-defined static blocks for footer middle content as below.

1. Footer Logo and Socials Content

Identifier: et_footer_logo_socials

Etrend Lite - Footer Logo and Socials Content

Footer Bottom

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

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

1. Footer Copyright Text

Identifier: et_footer_copyright

2. Payment Icons

Identifier: et_payment_icons

Navigate to "Etrend Theme > Configuration > Product List".

Product Labels

Etrend 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 "Etrend Theme > Configuration > Product Detail".

General Settings

Etrend 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

Etrend Lite - Custom Tabs Settings

Etrend 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 "Etrend Theme > Configuration > Contact".

Contact Info

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