Welcome To Theme

1. Prepare for Theme Installation ↑ Back to Top

Please, read the whole section, before attempting to install the theme.
We always recommended you to take back up of your system before making any upgrades or changes!

Prepare Installation

Please do not remove classic-theme or any of default-PrestaShop store files.

During Theme Installation just disable all of cache-related settings from your store.

Need help for PrestaShop Installation, Follow the instructions PrestaShop Doc Guide.

Or a quick video Tutorial, Tutorial Video

Configuration

May you first need to configure your server settings, to work PrestaShop store better.

There are three ways to increase variable limits.

Way 1. php.ini Configuration

memory_limit = 500M
max_execution_time = 300
max_input_time = -1
upload_max_filesize = 500M
post_max_size = 500M
max_input_vars = 10000
allow_url_fopen = On
register_globals = disabled

Or Way 2. .htaccess Configuration

php_memory_limit = 500M
php_max_execution_time = 300
php_max_input_time = -1
php_upload_max_filesize = 500M
php_post_max_size = 500M
php_max_input_vars = 10000
php_allow_url_fopen = On
php_register_globals = disabled

Or Way 3. PrestaShop Max Upload Size

Cache Setting ↑ Back to Top

Go to the backend side and navigate to "Advanced Parameters -> Performance"

During the theme installation to prevent any interruption, We recommended you to disable store cache and set its option as force compilation.

to use custom.css,

If you want to add your custom.css to your store, add your css code in themes\[your theme]\assets\css\custom.css

2. Theme Installation steps↑ Back to Top

To get FREE THEME INSTALLATION SERVICE

To install theme/settings without any trouble?
Yes, we're offering Free Theme Installation Service for the first time, after fully installed theme, your store looks perfect as same as our live theme demo, To get it please Contact us

to upload a theme, go to "Design -> Theme & Logo" Click on "Add new theme"
Here you will see "Import from your computer" where you need to select the Package ZIP file and Click on the "Save" button.

Now you just have to activate "Theme"

3. Logo & Image Settings ↑ Back to Top

Add Store logo

Go to the backend side and navigate to "Design -> Theme & Logo"

Set Store Image Dimensions

Inside PrestaShop, the backend panel navigates to Design -> Image Settings.

Image quality

To optimize your store images, go to Design -> Image Settings, and set image quality as per your requirement.

Regenerate Thumbnails

To see the changes after you update the image sizes & image quality. You must have to re-generate the images.

Select an image type and Click Regenerate thumbnails

4. RTL Settings ↑ Back to Top

If you want to change any CSS-style code file, To get changes with RTL layouts you also need to regenerate its RTL file,

To Generate RTL Files:
1) First remove older file with file-path: STORE_ROOT/themes/PRS125_04/assets/css/theme_rtl.css
2) After it just regenerates rtl-file.
Go to "Design -> Theme & Logo" select theme and save it.

5. Theme Module Settings↑ Back to Top

Module Positions

In case of mismatch any of module-block position, here is a screenshot to reset Module Positions
Full list of used Modules with Positions

Modules Position Image

Go to "Modules -> Modules Manager" and Install all the module which are listing below:
Note, from below listed modules, some are common for all layouts & some of are for specific layouts.

After modules installation "Configure" it one by one.

5.1.1 Module 01: WD - Advertising ↑ Back to Top

To easy to display the Left Column banner image.

Click on "configure"

Add Banner image

5.1.2 Module 02: WD - Brand Logo ↑ Back to Top

To display Brands & Suppliers Carousel block on the Homepage.

Click on "configure"

Click on "Add new brand"

Add a new brand or just Edit any existing brand information

5.1.3 Module 03: WD - Compare Products ↑ Back to Top

To enable Products Comparision feature.

Click on "configure"

5.1.4 Module 04: WD - Featured products ↑ Back to Top

To display featured Product block on the Homepage.

Click on "configure"

5.1.5 Module 05: WD - Megamenu ↑ Back to Top

To display categories/Sub-categories, CMS-contents, everything easy to set and display under the main menu section.

Video Tutorial, For easy to set Megamenu from the Back-Office

Go to "Modules -> Modules and Services -> WD Megamenu" -> "Configure" The module below:

Then set the menu Click on the edit button.

Setting for PrestaShop Links, Align of Submenu, and Width of Submenu.

Setting for category Icons and Images.

For displaying lables on category, add those classes (label-danger, label-info, label-warning, label-success)

Setting for Category Build Submenu.

Step: 01 -> Add New Row
Step: 02 -> Add New Column
Step: 03 -> Add New Items

Setting For New Items

Step: 01 -> Add New PrestaShop Links

Step: 02 -> Add New Custom Links

Step: 03 -> Add New HTML Block

Step: 04 -> Add New Product Block

Please, read the whole section, If you can add product block you need to add the new column name Specific class ttproduct-block

5.1.6 Module 06: WD - New products block ↑ Back to Top

To display recently added product block on the Homepage.

Click on "configure"

5.1.7 Module 7: WD - Specials block ↑ Back to Top

To display Special Products block on the Homepage.

Click on "configure"

Go to Catalog -> Products Click on"Edit" any product

Go to Pricing Tab and a "Add a specific price"

5.1.8 Module 8: WD - Top-sellers block ↑ Back to Top

To display top seller products block on the Homepage.

Click on "configure"

To display top-sellers products, you must set order status as delivered.

Go to -> Orders -> Orders -> Click on "view"

Edit it and set order status as Delivered

5.1.9 Module 9: WD - Wishlist Block ↑ Back to Top

To enable Products Wishlist feature.

Click on "configure"

5.1.10 Module 10: PS - Image Slider ↑ Back to Top

To display Slideshow on Homepage.

Select Enable Mobile option to display slideshow block on Tablet/Mobile screen view.

To add more slideshow images, Click on "configure" and it,
To edit slideshow images and text "sample 1" Edit it.

slider -1 CMS Block

<div class="carousel-content">
<h1 class="carousel-title">Sport Race Bicycle 15% OFF</h1>
<div class="carousel-subtitle">Lorem ipsum dolor sit amete elit. arcu mauris, pellentesque sagittis nulla.</div>
<div class="carousel-btn"><span>shop now</span></div>
</div>

slider -2 CMS Block

<div class="carousel-content">
<h1 class="carousel-title">ice surfing board Up to 25% Off</h1>
<div class="carousel-subtitle">Ut ac efficitur lorem, fringilla conseten vel sem nulla. euismod ultricies euismod.</div>
<div class="carousel-btn"><span>shop now</span></div>
</div>

5.1.11 Module 11: Footer Link Setting↑ Back to Top

To display quick store information links at Footer.

Go to "Design -> Link Widget" and edit it

Just have to check/uncheck links that you want to display on your store Footer

5.1.12 Module 12: Smart Blog ↑ Back to Top

To enable the Blogging feature with categories of articles/posts on your store.

At Blog -> Image Type, you can set image dimensions

At Blog -> Blog Category, Able to Add/Edit Blog categories

To "Edit" Blog category

At Blog -> Blog Post, Able to Add/Edit Blog posts

To "Edit" Blog post

5.1.13 Module 13: Tawkto↑ Back to Top

To display Tawkto Live chat widget on Front-End

Just have to Sign in here

Now, Select the property and Choose widget here

5.1.14 Module 14: WD - Category Feature ↑ Back to Top

To display Category feature on-site.

Click on "configure"

To display the category image, You must have to select both category-cover-image and category-thumbnail images.

5.1.15 Module 15: WD - Product countdown ↑ Back to Top

To display an offer countdown timer on specific products.

Click on "configure"

For the bulk products countdown.

Click on "Edit" any product

Go to the Modules tab and "configure" WD - Product Countdown module

Now just select From to To Date and save it

5.1.16 Module 16: WD - Cookie ? Back to Top

To display Cookie on-site.

Click on "configure"

Select cookie style here.

5.1.17 Module 17: WD - Countdown Timer ? Back to Top

To display Countdown Timer on-site.

Click on "configure"

Set all fields.

Countdown Timer CMS Block

<div class="counter-content">
<div class="counter-title">Deals <span>of the days</span></div>
<div class="counter-subtitle">on Sport bicycles & Bikes</div>
<div class="counter-price">$199.99 - $599.99</div>
</div>

5.2 CMS module setting ↑ Back to Top

Upload CMS Images↑ Back to Top

You first have to upload all CMS-images including Banners, Photos, Icons to display it with modules.
There are two ways to upload images either using store back-office or with FTP transfer.

Now upload all "CMS images" (Same way for other layouts)

Way 1: To Upload image using Back-Office

Way 2: To Upload image using FTP

Copy "Package -> Documentation -> cms_img/cms/cms-01" directory into "store-root/img/cms/"

Add All of CMS Contents with its particular CMS Modules

Like, Click on "configure" CMS Module and Click on CODE VIEW

Add CMS code here

5.2.1 Module - 1: "WD - CMS Header block"

<div class="wd-header-cms">
<div class="content">
<div class="link">30 Days Free Return</div>
<div class="link">Free Shipping on All Orders Over $40</div>
<div class="link">Best World Wide Delivery</div>
</div>
</div>

5.2.2 Module - 2: "WD - CMS Head block"

<div class="wdheader-service">Extra 15% OFF on orders above $500. Use Coupon <span>"Sport15OFF"</span></div>

5.2.3 Module - 3: "WD - CMS Banner block"

5.2.4 Module - 4: "WD - CMS Footerservice block"

<div class="footer-sevices">
<ul class="wd-sevices footerservices-carousel">
<li>
<div class="wd-saving wdservice footer-info-heading">
<div class="service-icon"></div>
<div class="service-content"><span class="service-title">Big Savings</span> <span class="service-desc">Get Big Dicount Every Day !</span></div>
</div>
</li>
<li>
<div class="wd-support wdservice footer-info-heading">
<div class="service-icon"></div>
<div class="service-content"><span class="service-title">24*7 Support</span> <span class="service-desc">24/7 free support</span></div>
</div>
</li>
<li>
<div class="wd-shipping wdservice footer-info-heading">
<div class="service-icon"></div>
<div class="service-content"><span class="service-title">Free Shipping</span> <span class="service-desc">On Order Over $199.00</span></div>
</div>
</li>
<li>
<div class="wd-gift wdservice footer-info-heading">
<div class="service-icon"></div>
<div class="service-content"><span class="service-title">Free Gift Wrapping</span> <span class="service-desc">On Order Over $99.00</span></div>
</div>
</li>
</ul>
</div>

5.2.5 Module - 5: "WD - CMS Subbanner block"

<div class="wdcmssubbanner row">
<div class="wdsubbanner-img1 wdsubbanner col-sm-8 col-md-8 col-xs-12">
<div class="wdright-subbanner-content"><a href="#"> <img class="image" title="subbanner-01" src="../img/cms/subbanner-01.jpg" alt="subbanner-01" /> </a>
<div class="wdsubbanner-content left">
<div class="title">Get Flat 15% OFF</div>
<div class="subtitle">on 2021 Sport Collection.</div>
</div>
</div>
</div>
<div class="wdsubbanner-img2 wdsubbanner col-sm-4 col-md-4 col-xs-12">
<div class="wdright-subbanner-content"><a href="#"> <img class="image" title="subbanner-02" src="../img/cms/subbanner-02.jpg" alt="subbanner-02" /> </a>
<div class="wdsubbanner-content left">
<div class="title">Sport Shoes</div>
<div class="subtitle">Get Flat 25% OFF</div>
</div>
</div>
</div>
</div>

5.2.6 Module - 6: "WD - CMS Footer block"

5.2.7 Module - 7: "WD - CMS Topbanner block"

<div class="wdcmstopbanner row">
<div class="wdtopbanner-img1 wdtopbanner col-sm-6 col-md-6 col-xs-12">
<div class="wdright-banner-content"><a href="#"> <img class="image" title="topbanner-01" src="../img/cms/topbanner-01.jpg" alt="topbanner-01" /> </a>
<div class="wdtopbanner-content left">
<div class="title">Hurry Up ..! Get 20% OFF</div>
<div class="offer"><a href="#" class="btn-primary">shop now</a></div>
</div>
</div>
</div>
<div class="wdtopbanner-img2 wdtopbanner col-sm-3 col-md-3 col-xs-12">
<div class="wdright-banner-content">
<div class="wdtopbanner-content left">
<div class="title">Up to <span>25% off</span></div>
<div class="subtitle">on all Sport accessories.</div>
<div class="offer">Promo: <span>sport25</span></div>
</div>
</div>
</div>
<div class="wdtopbanner-img3 wdtopbanner col-sm-3 col-md-3 col-xs-12">
<div class="wdright-banner-content"><a href="#"> <img class="image" title="topbanner-02" src="../img/cms/topbanner-03.jpg" alt="topbanner-02" /> </a>
<div class="wdtopbanner-content left">
<div class="title">Sport Ball</div>
</div>
</div>
</div>
</div>

5.2.8 Module - 8: "WD - CMS Testimonial block"

<div class="wdtestimonial-content">
<div class="wdtestimonial-inner">
<ul id="wdtestimonial-carousel" class="wd-carousel">
<li>
<div class="testimonial-image"><img src="../img/cms/user1.jpg" alt="user1.jpg" width="100" height="100" /></div>
<div class="testimonial-user-title">
<h4>John Duff</h4>
<span class="wdtestimonial-subtitle">web designer</span></div>
<div class="testimonial-content">
<div class="testimonial-desc">
<p>Duis faucibus enim vitae nunc molestie, nevitae nunc molestacilisis arcu nullis arcu aucibus enim vitae nunc molestie, nevitae nunc arcu nullis.Duis faucibus enim vitae nunc molestie, nevitae nunc molestacilisis arcu nullis arcu aucibus enim vitae.</p>
</div>
</div>
</li>
<li>
<div class="testimonial-image"><img alt="" src="../img/cms/user2.jpg" width="100" height="100" /></div>
<div class="testimonial-user-title">
<h4>John Duff</h4>
<span class="wdtestimonial-subtitle">Producer</span></div>
<div class="testimonial-content">
<div class="testimonial-desc">
<p>Duis faucibus enim vitae nunc molestie, nevitae nunc molestacilisis arcu nullis arcu aucibus enim vitae nunc molestie, nevitae nunc arcu nullis.Duis faucibus enim vitae nunc molestie, nevitae nunc molestacilisis arcu nullis arcu aucibus enim vitae.</p>
</div>
</div>
</li>
<li>
<div class="testimonial-image"><img alt="" src="../img/cms/user3.jpg" width="100" height="100" /></div>
<div class="testimonial-user-title">
<h4>John Duff</h4>
<span class="wdtestimonial-subtitle">web developer</span></div>
<div class="testimonial-content">
<div class="testimonial-desc">
<p>Duis faucibus enim vitae nunc molestie, nevitae nunc molestacilisis arcu nullis arcu aucibus enim vitae nunc molestie, nevitae nunc arcu nullis.Duis faucibus enim vitae nunc molestie, nevitae nunc molestacilisis arcu nullis arcu aucibus enim vitae.</p>
</div>
</div>
</li>
</ul>
</div>
</div>

6. Extra Modules↑ Back to Top

Go to Package File -> Documentation.zip -> Extra_Module directory to use extra modules, you need to add and configure it.

6.1.1 Module 1: WD - Popup Newsletter ↑ Back to Top

Now to install and configure popup newsletter module, go to Modules -> Module Catalog, and just install/configure it.

Module: WD Popup Newsletter Module Setting↑ Back to Top

To display subscribe form with popup

Just set your custom message text

Child Theme Settings ↑ Back to Top

In Case if of use the Parent/Child theme concept, here is a reference link
Follow the instructions Parent/child theme

Go to Package File -> Documentation.zip > child_theme > PRS###_child upload it to your store-root/themes/.

Now you just have to activate "Child Theme"