Welcome to Stylespot - Premium Fashion Magento 2 Theme!

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

Stylespot is fully compatible Magento Open Source 2.1.x, 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

Stylespot is a professionally design premium responsive Magento 2 theme. Stylespot is perfect for Fashion Store, Accessories Store, Shoes Store, and Apparel Store.

This Magento 2 theme has advanced features which will make your website becomes more professional with clean and classy layouts. It is fully responsive and looks stunning on all types of screens and devices.

  • Mobile-first Optimized
  • WhatsApp Chat Bonus
  • Sales Countdown Timer Hot
  • Ultra-powerful Mega Menu
  • Product Custom Tabs
  • Product Remaining Stock Bonus
  • Multi Language Support New
  • Category Slider
  • Banner Slider
  • Sticky Add to Cart Hot
  • Instagram Slider Bonus
  • Newsletter Popup
  • Scroll to Top
  • Shipping Time Estimator Bonus
  • Product Image Flip effect Hot
  • Multi-Store Support
  • Super High Performance
  • Facebook Chat Bonus
  • New & Sale Product Label Hot
  • Ready Made CMS Pages
  • Search Engine Optimized
  • Unlimited Color Hot
  • Login/Create Account Page DesignNew
  • Promotion Message on Product Page
  • Category Page Product Column Option
  • One Click Installation Hot
  • Well Documented
  • Optimized for Speed
  • Powerful Backend Configuration
  • Dedicated Customer Support

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 my account page

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. Flush store cache and log out from the backend and log in again to see changes.

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

7. Select your HiddenTechies theme in Content > Design > Configuration

Step 1  Magento 2 Theme Settings Step 2  Magento 2 Theme Settings Step 3 Magento 2 Theme Settings

Please Note:

Once you done with the theme selection than save settings and clear cache.

In order to do demo installation, first you should import CMS Pages, Static Blocks and Demo Slider data.

To Import CMS Page, Static Blocks and Demo Slider data follow the steps.

Step 1: Now go to HiddenTechies Theme > Theme Configuration > Installation.

Step 2: If you want to import page and blocks for specific demo then select the "Demo Version" or select "All" to install all page and blocks.

Select Demo Version

After selecting Demo Version, click on  Save Config  button.

Step 3: If you want to override existing CMS Pages and Static Blocks, then select "Yes" for "Overwrite Existing Blocks" and "Overwrite Existing Pages".

Import Static Blocks and CMS Pages

Now click on  Save Config  button.

Step 4:

Click  Import Static Blocks  to import all Static Blocks.

Click  Import CMS Pages  to import all CMS Pages.

Click  Import Slider Demo  to import Demo Slider data.

Step 5: Click  Demo X  button to install demo version that you prefer to install.

 Import Static Blocks and CMS Pages

Next to that flush the cache.

Please Note:

After demo import do not save the config. First flush the cache.

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

How To Create A Child Theme?

Stylespot - Child Theme

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

For Stylespot Theme

Vendor name: Hiddentechies

Parent Theme name: hiddentheme051

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/Hiddentechies/hiddentheme051_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>Hiddentechies Stylespot Child</title>
    <parent>Hiddentechies/hiddentheme051</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/Hiddentechies/hiddentheme051_child',
    __DIR__
);

                    

Step 4: Create composer.json.


{
    "name": "hiddentechies/theme-frontend-hiddentheme051-child",
    "description": "N/A",
    "require": {
        "php": "~5.6.5|7.0.2|7.0.4|~7.0.6",
        "magento/theme-frontend-blank": "100.1.*",
        "magento/framework": "100.1.*"
    },
    "type": "magento2-theme",
    "version": "100.1.3",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

                    

Step 5:

Add preview.jpg in "app/design/frontend/Hiddentechies/hiddentheme051_child/media" folder.

Add view.xml in "app/design/frontend/Hiddentechies/hiddentheme051_child/etc" folder.

You can copy both file and image from parent theme.

How To Use A Child Theme?

Go to Admin > Content > Design > Configuration

Stylespot - Use Child Theme

Now click on "Edit"

Stylespot - Use Child Theme

Choose the child theme(Hiddentechies Stylespot Child) from dropdown menu.

Stylespot - Use Child Theme

And click on  Save Configuration  button.

Homepage Content Configuration

How to select or change a Homepage?

In order to select or change Homepage, Go to Admin > Store > Configuration > General > Web > Default Pages tab, choose the page in CMS Home Page field.

Stylespot - Select Or Change Homepage

And click on  Save Config  button.

How to add/edit homepage slider?

Stylespot theme provides extension to Manahe Slider and its slides.

Manage Sliders:

To edit home page slider, please go to Admin > HiddenTechies Bannerslider > Manage Slider

Stylespot - Manage Slider

Go to "Edit" slider. Here you can edit slider settings.

Stylespot - Edit Slider

If you want to add new slider then click on Add New  button, fill the required details and save the slider.

Manage Slides(Banners):

To add/edit slider's banners, please go to Admin > HiddenTechies Bannerslider > Manage Banner

Stylespot - Manage Banner

Go to "Edit", if you want to edit in existing slide. Or click on Add New  button to create new slide.

Stylespot - Edit Banner

Add the required details.

Slider: Select the slider in which you want to add this slide.

Name: Slide name.

Type: Select the slide type image or youtube video.

Video Url: If your slide contains video then add youtube video's embed url.

URL: Add hyperlink url for slide.

Image: Upload banner image.

Banner Text: Add text to display on slide.

Disable for Mobile: If yes, slide will disable for mobile.

After adding required details click on Save Banner  button.

How to add slider in Home Page?

Step 1: Go to edit CMS home page that displays content on home page.

Step 2: Go to "Edit" Home Page.

Stylespot - Edit Home Page

Step 3: Click on  Insert Widget...  button and select "Hiddentechies Bannerslider" from Widget type dropdown.

Stylespot - Add Slider Widget

Step 4: Select the slider and its layout (full width or box width) from dropdown fields. Now click on Insert Widget  button.

Stylespot - Add Slider Widget

Step 5: Save the CMS page.

Stylespot - Home Stylespot Slider
How to show "Trending Products" in homepage?

Add "Trending Products"

To add trending products on home page, you need to add product widget in home page.

In order to add widget follow the below steps.

Step 1: Go to edit CMS home page or static block that displays content on home page.

Step 2: Click on  Insert Widget...  button and select the widget type "Catalog Products List".

Stylespot - Homepage Insert Widget Stylespot - Homepage Select Fatured Product Widget

Step 3: Add necessary details.

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.

Stylespot - Homepage Insert Featured Product Widget

And click on  Insert Widget  button.

Or you can add the block code into the cms content field like below.

                        
{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Trending Products" show_pager="0" products_count="8" template="product/widget/content/grid.phtml" 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`^]^]"}}
                        
                    
Stylespot - Homepag Featured Product Widget
How to show latest(new) products in homepage?

Add New Products

To add new products on home page, you need to add new product's widget in home page.

In order to add widget follow the below steps.

Step 1: Go to edit CMS home page or static block that displays content on home page.

Step 2: Click on  Insert Widget...  button and select the widget type "Catalog New Products List".

Stylespot - Homepage Insert Widget Stylespot - Homepage Select New Product Widget

Step 3: Add necessary details.

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

Stylespot - Homepage Insert New Product Widget

And click on  Insert Widget  button.

Or you can add the block 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="8" template="product/widget/new/content/new_grid.phtml"}}
                        
                    
Stylespot - Homepage New Product Widget
Recent Posts

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

To add latest news block, use below code into the cms content field.

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

Magfan Blog extension is compatible with Stylespot theme. So, if you have installed Magfan Blog extension then use below code into cms content field.

                        
{{widget type="Magefan\Blog\Block\Widget\Recent" title="Latest Posts" number_of_posts="5" category_id="0" tag_id="0" author_id="0" type_name="Recent Blog Posts"}}
                        
                    
Stylespot - Home Blogs
Testimonials Block

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

To add testimonials block, use below code into the cms content field.

                        
{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="hiddentheme051_demo1_home_testimonials"}}
                        
                    
Stylespot - Home Testimonials
Shop By Brand Block

To edit this block, go to Admin > Content > Elements > Blocks and edit "Demo1 Home Brands".

To add brands block, use below code into the cms content field.

                        
{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="hiddentheme051_demo1_home_brands"}}
                        
                    
Stylespot - Home Brands
Other Content Blocks

1. To edit below block, go to Admin > Content > Elements > Blocks and edit "Demo1 Home Promotion Block One".

To add, use below code into the cms content field.

                        
{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="hiddentheme051_demo1_home_promotion_one"}}
                        
                    
Stylespot - Home Promotion Block One

2. To edit below block, go to Admin > Content > Elements > Blocks and edit "Demo1 Home Promotion Block Two".

To add, use below code into the cms content field.

                        
{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="hiddentheme051_demo1_home_promotion_two"}}
                        
                    
Stylespot - Home Promotion Block Two

How to change Logo?

Go to Admin > Content > Design > Configuration > Edit your theme > Header Tab

Logo Image: Upload your logo.

Logo Attribute Width: Add logo width.

Logo Attribute Height: Add logo height.

Welcome Text: Welcome texts in header.

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

Stylespot - Change Logo

Click on  Save Configuration  button.

How to change Favicon?

Go to Admin > Content > Design > Configuration > Edit your theme > HTML Head Tab

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

Allowed file types: ico, png, gif, jpg, jpeg, apng.

Stylespot - Change Favicon

Click on  Save Configuration  button.

Stylespot theme comes with advanced mega menu. Please read detailed instructions to use menu as per our demo site.

Megamenu Settings

Please Go to Admin > Stores > Configuration > Hiddentechies > Megamenu

Stylespot - Menu Configuration

1. Set/Change the header type.

2. Add static block identifier to add extra menu links from static block. We have added two static blocks in demo to add extra links in menu.

3. Enable/Disable sticky menu.

4. Enable/Disable home link and you can also display icon for home link.

5. Set default menu type for all menu items.

6. Show category labels such as "New", "Hot!", "Sale" as our demo site.

How to add Full-Width mega menu?

Follow the steps.

Step 1: Add new category and its sub-categories for downdown content.

Step 2: Now select the 1st level category. And expand the "Mega Menu" tab.

Stylespot - Full-Width Menu

Step 3:

Set the "Menu Style" Full Width.

Set the "Sub Category Columns" to display number of sub category columns in downdown. For ex, 4 Columns.

How to add Static Width mega menu?

Follow the steps.

Step 1: Add new category and its sub-categories for downdown content.

Step 2: Now select the 1st level category. And expand the "Mega Menu" tab.

Stylespot - Static-Width Menu

Step 3:

Set the "Menu Style" Static Width.

Set "Static Width" for the static width mega menu as your requirement. For ex, 600px.

Set the "Sub Category Columns" to display number of sub category columns in downdown. For ex, 3 Columns.

How to add Classic dropdown menu?

Follow the steps.

Step 1: Add new category and its sub-categories for downdown content.

Step 2: Now select the 1st level category. And expand the "Mega Menu" tab.

Stylespot - Classic Menu

Step 3:

Set the "Menu Style" Classic.

How to add static content or image in mega menu?

You can also add the custom content like text or images in menu downdown. The possible options are Header Block, Left Block, Right Block and Footer Block of the link's columns.

Stylespot - Menu Add Custom Blocks

You can set with for Left and Right blocks. Set Block Width that you prefer to add image or custom content as right/left of the columns. For example, set 4/12 (means it will take 4 columns area from 12 columns).

Stylespot theme provides advanced and most powerful "Footer Configuration".

Footer Settings

Please Go to Admin > Stores > Configuration > Stylespot Theme > Theme Settings > Footer

Footer Top

Stylespot - Footer Top

Enable Footer Top: Enable/Disable footer top section.

Footer Top Static Block: Add static block identifier to display content from static block.

Stylespot - Footer Top Frontend

Footer Columns

Stylespot - Footer Columns

Enable/Disable footer columns block.

Add static block identifier for each column to display content from CMS static block.

You can set necessary footer width for each column. For example,if you set 3/12 (means it will take 3 columns area from 12 columns).

Frontend

Stylespot - Footer Columns Frontend

Footer Bottom

Stylespot - Footer Bottom

Enable/Disable footer bottom.

Add static block identifier to display static content left, right and center in the footer bottom.

Please Go to Admin > Stores > Configuration > Stylespot Theme > Theme Settings > Category Page

Stylespot - Category Page Configuration

Enable Alternate Image: Enable/Disable alternative image on product item hover.

Enable Aspect Ratio For Image: If yes, then image height is set respected to the given width in configuration.

Image Width: Add image width.

Image Height: Add image height.

Add Image Border: If yes, border added around the image.

Enable Cart: Enable/Disable add to cart button.

Display Only Cart Icon ?: If yes, display only cart icon instead of text for cart button.

Enable Wishlist and Compare: Enable/Disable wishlist and compare buttons.

Show Product Rating: Enable/Disable product ratings.

Product Columns: Change the number of products(3 or 4) display in one row for category page.

Show New Label: Enable/Disable new label.

Show Sale Label: Enable/Disable sale label.

Sidebar Promotion Static Block: Add static block identifier to display content in category page sidebar.

Please Go to Admin > Stores > Configuration > Stylespot Theme > Theme Settings > Product Page

Stylespot - Product Page Configuration

Show New Label: Enable/Disable new label.

Show Sale Label: Enable/Disable sale label.

Enable Wishlist and Compare: Enable/Disable wishlist and compare buttons.

Enable Email To Friend: Enable/Disable email to friend button.

Promotion Static Block: Add static block identifier to display extra content on product page.

Custom Tabs: Stylespot theme provide options for adding two custom tabs on product page.

You can add/display content in two ways in custom tans

1. Product attribute value (Add attribute code in tab identifier field)

2. CMS static block content (Add static block identifier in tab identifier field)

Stylespot is equipped with administrative module which gives you the ability to configure most of the functionality in powerful admin panel. Using this powerful settings panel, you can configure your store easily without any coding.

Please Go to Admin > Stores > Configuration > Stylespot Theme > Theme Settings

Header
Stylespot - Header Settings

Top Promotion Text: Add promotion text at the top of header.

Header Static Block: Add static block identifier to add extra info in header from static block.

Contact Info
Stylespot - Contact Page Settings

Enable Google Map: Enable/Disable google map.

Google Map Iframe Code: Add your store location's google map iframe.

Staic Block: Add static block identifier to show content from static blocks on contact page.

Add This (Socials)
Stylespot - Add This (Socials)

Enable: You can enable/disable "Add This" socials.

Addthis Pub ID: Add "Add This" Pub Id.

Please Note:

You will get pub id fromhttp://www.addthis.com

Scroll To Top
Stylespot - Scroll To Top

You can enable/disable scroll to top button.

Customization
Stylespot - Custom CSS

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

You can add your custom JS scripts.

Stylespot theme provides color option to change visual appearance of your store.

Please Go to Admin > Stores > Configuration > Stylespot Theme > Color Settings

Stylespot - Basic Color Config

Stylespot theme provides some powerful & actionable Magento 2 Extensions to engage customer with your store and increase sales and conversion.

Let's see How to Configure Booster Add-ons in This Theme.

How to configure Product Countdowm Timer?

Please Go to Admin > Stores > Configuration > HiddenTechies > Product Countdowm Timer

Product Countdowm Timer Configuration

This Sticky Add to Cart bar gives the customer easy access to add the product to their shopping cart at any time.

How does it work?

It adds the sticky bar that becomes visible when the customer scrolls the page. The sticky bar contains the add to cart button so users can quickly add your product to the cart without scrolling back to up.

Sticky Cart Configuration

To set the configuration options navigate to "Your HiddenTechies Theme > Sticky Cart > Configuration".

General Configuration

Sticky Cart Configuration

Enable: Enable/Disable sticky cart.

Position: Set its position. Possible options are Top and Bottom.

Show Product Image: Select Yes or No.

Show Product Name: Select Yes or No.

Show Product Price: Select Yes or No.

Show Product SKU: Select Yes or No.

Show Product Availability: Select Yes or No.

Show Cart Button: Select Yes or No.

Enable Timer: Enable/Disable countdown timer.

Please Note:

To show countdown timer, you must set product's "Special Price" and "Special Price From" and "To" date.

Only work for simple, downloadable and virtual type products.

Static Block Identifier: Set static block identifier to display extra content from CMS block in sticky cart bar.

The Shipping Time Estimator extension helps you to show order delivery information on the product detail page. It is a powerful extension to instantly build trust with your customers.

Shipping Time Estimation Configuration

To set the configuration options navigate to "Your HiddenTechies Theme > Shipping Time Estimation > Configuration".

Shipping Time Estimation Configuration

Enable: Enable/Disable the extension.

Enable General Shipping Time: If "Yes", It allows you to set general shipping time for products.

General Shipping Estimation Time: Set general shipping time for all products. Ex. 3 OR 3-4.

Please Note:

This time will use in products in which you have not set shipping time.

Days Message: Set notification message. Here you can use "%1" in message and it will replace by your given delivery days.

Display Delivery Date: If "Yes", Expected Delivery Date is displayed width message.

Working Days: Set working days of week. If you have set "5 Days - Monday to Friday", then based on that extension is calculated estimated shipping date.

Date Message: Set message to display date. Ex. "Expected Delivery Date is %1". Here "%1" will replace by approx delivery date.

Date Format: Set date format. Ex. Y-m-d OR jS F, Y

For more info check this link: https://www.w3schools.com/php/func_date_date_format.asp

How to set Shipping Time for specific product?

Follow the steps.

Step 1: Navigate to "Catalog > Products".

Step 2: Go to edit any product in which you want to add Shipping Time.

Step 3: Set shipping time in "Shipping Estimation Time" filed. Ex. 3 or 3-4.

Shipping Time Estimation Product

Step 4: Save the product and Clear/Flush the cache.

Frontend:

Shipping Time Estimation

Instagram Widget is professionally designed extension that allows you to easily add your Instagram feed in your Store. Show your Instagram pictures as a gallery in your Store. It Syncs automatically with your Instagram account!

Instagram Widget Configuration

To set the configuration options navigate to "Your HiddenTechies Theme > Instagram Widget > Configuration".

Instagram Widget Configuration

Enabled: Enable/Disable the extension.

User Token: Add User Token.

Please Note:

Access developers.facebook.com to create applications. Please refer this link

How to add Instagram Widget in any CMS Page or Static Block?

Step 1: Go to edit any CMS page or block.

Step 2: Click on  Insert Widget...  button and select "ET Instagram Widget" from "Widget Type" drop-down.

Add Instagram Widget

Title: Add Instagram block title.

Image Count: Add how many images you want to display in widget.

Image Width (auto/px): Set image width. Ex auto or 200px.

Image Height (auto/px): Set image height. Ex auto or 200px.

Show Caption: If "Yes", caption is displayed on hover.

Enable Slider ?: Enable/Disable slider. If "Yes" then you can set the other slider settings like Autoplay, Show Navigation Buttons etc.

Step 3: After done with options, click on Insert Widget  button to add widget in page or block.

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

Frontend:

Instagram Widget

How to add Instagram Widget in Footer Column ?

In order to use Instagram Widget in footer column, first you need to add in CMS Static Block and then add this block identifier in footer column config.

Step 1: Add new CMS Static block.

Step 2: Click on  Insert Widget...  button and select "ET Footer Column Instagram Widget" from "Widget Type" drop-down.

Add Instagram Widget Footer Column

Title: Add Instagram block title.

Image Count: Add how many images you want to display in widget.

Step 3: After done with options, click on Insert Widget  button to add widget in block.

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

Now add this static block identifier in footer column config as below

Please Note:

We have already given the CMS Static Block "Footer Instagram Widget" that contain the Instagram Widget.

Instagram Widget Footer Column Config

Frontend:

Instagram Widget Footer Column

Product Remaining Stock will help you to grow your conversion and sales. It absolutely create a sense of urgency in your customers. The biggest eCommerce retailers are all using this concept of scarcity to boost conversions and sell more product.

Product Remaining Stock Configuration

To set the configuration options navigate to "Your HiddenTechies Theme > Product Remaining Stock > Configuration".

Product Remaining Stock Configuration

Enable: Enable/Disable the extension.

Please Note:

Only work for simple, downloadable and virtual type products.

Product Quantity: Enter product quantity. ex 10. So, if product quantity is equal or below 10, then product stock notification will display.

Message Text: Add message text here.

Please Note:

You must need to include %1 in string. On store front product stock will display in place of %1.

Message Color: Set message color.

Message Stock Color: Set stock amount color message.

Display Progress Bar: Enable/Disable progress bar for remaining stock.

Progress Bar Style: Set progress bar background color stylebook.

Background Color: Set background color (Ex. add hex code: #0095ff). If you have selected "Gradient Background" in "Progress Bar Style" then add hex color comma separated. Ex. #11998e,#38ef7d

Frontend:

Product Remaining Stock

Facebook Chat extension provides live, instant and personalized customer support with Facebook messenger live chat.

Facebook Chat Configuration

To set the configuration options navigate to "Your HiddenTechies Theme > Facebook Chat > Configuration".

Facebook Chat Configuration

Enable: Enable/Disable the extension.

Facebook Page Id: Enter the Facebook Page ID.

Facebook Theme Color: Set the theme color for the Facebook chat window.

Chat Minimized ?: Set Yes/No for Minimized/Maximized chat window.

Please Note:

Please don't forget to add the domain in white list on Facebook messenger. In your Facebook Page go to Settings > Messenger Platform > White-listed domains and add your Domains.

Frontend:

Facebook Chat

WhatsApp Chat extension allows you to provide live chat, instant and personalized customer support. WhatsApp Chat helps to increase conversions and boost up customer satisfaction.

WhatsApp Chat Configuration

To set the configuration options navigate to "Your HiddenTechies Theme > WhatsApp Chat > Configuration".

WhatsApp Chat Configuration

Enable: Enable/Disable the extension.

WhatsApp Mobile Number: Add mobile number.

Please Note:

Add mobile number like 15551234567. Don't add like +001-(555)1234567. Omit any zeroes, brackets or dashes when adding the phone number in international format.

WhatsApp Pre-filled Message: Pre-filled Message that display when customer start chat.

WhatsApp Button Text: Add/Change WhatsApp button text.

WhatsApp Icon: Upload AhatsApp chat button icon image.

Button Style: Set button style. Possible options are "Icon and Text" and "Icon Only"

Enable General WhatsApp Chat Button: Enable/Disable WhatsApp Chat button located at page bottom on every page.

Ganaral Button Style: Set general WhatsApp chat button style. Possible options are "Icon and Text" and "Icon Only"

Use below code to add WhatsApp Chat button in any cms page or static block.

{{block class="Magento\Framework\View\Element\Template" name="whatsapp.chat.cms" template="ET_Whatsappchat::widget/whatsappchat.phtml"}}

Use below code to add WhatsApp Chat button in any phtml file.

echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("ET_Whatsappchat::widget/whatsappchat.phtml")->toHtml();

Frontend:

WhatsApp Chat

You can also create static block with WhatsApp Widget in it. And then use that static block to display it on product page.

You just need to set static block identifier in "Promotion Static Block" field. (Navigate to "Your HiddenTechies Theme > Configuration > Product Detail".)

WhatsApp Chat Product Page

Let's see How to Configure Basic Add-ons in This Theme.

Our theme provides the Category Widget extension to showcase your categories in unique & elegant way.

How to add/upload image in category ?

Follow the steps.

Step 1: Navigate to "Catalog > Categories".

Step 2: Edit the category in which you want to add/upload image.

Step 3: Add "Widget Display Name" and upload "Widget Display Image".

Category Widget Upload Image

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

How to add Category Widget in any CMS Page or Static block?

Step 1: Go to edit CMS page or Static block.

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

Category Widget

Title: Add the title.

Select Categories: Select the categories which you want to display in showcase.

Show Actual Category Name ?: If "Yes", its show the actual category name instead of names added in "Widget Display Name" filed.

Display Sub Categories ?: If "Yes" then sub-categories will display below each parent category.

Sub Category Count: Set the limit that how many sub-categories you want to display.

Image Width: Set image width. (Optional. Leave blank for auto)

Image Height: Set image height. (Optional. Leave blank for auto)

Custom Class: If you want to customize anything using styles then you can add custom class here.

Enable Slider ?: Enable/Disable slider. If "Yes" then you can set the other slider settings like Autoplay, Show Navigation Buttons etc..

Items: If you do not want to enable the slider then you can set the number of items in single row as per the screen size.

After setting all options, click on Insert Widget  button to add widget in page.

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

Frontend:

Category Widget

Our theme provides Newsletter Popup extension helps to boost your sales by increasing email subscriptions, and engage new customers through promotions.

Newsletter Popup Configuration

To set the configuration options navigate to "Your HiddenTechies Theme > Newsletter Popup > Configuration".

Newsletter Popup Configuration

Enable: Enable/Disable newsletter popup.

Use Ajax: If yes, the email subscription form will submit without refreshing the page.

Enable Homepage Only ?: If yes, the popup is enabled on home page only.

Popup Delay: Set the delay time that after how much seconds popup will display.

Popup Title: Add popup title.

Template Mode: Select the content mode of the popup. If you want to use ready-made templates then select "Ready Made Template" option or if you have your own content, then select "Custom" option in the dropdown.

Popup HTML: Add popup content.

Popup Dimension: If custom, you can set the height and width of the popup.

Popup Width: Popup width. ex. 700px

Popup Height: Popup Height. ex. 700px or auto

How to import newsletter popup demo?

Newsletter Popup Demo Import

Click  Demo X  button to install popup demo version that you prefer to install.

Clear/Flush cache.

 

Newsletter Popup - Demo 1

Newsletter Popup - Demo 1

Newsletter Popup - Demo 2

Newsletter Popup - Demo 2

Newsletter Popup - Demo 3

Newsletter Popup - Demo 3

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!