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

Compatible with Prestashop:

Prestashop 1.7.x

Prestashop 1.7 Help:

System Requirements

Installation Guide

Prestashop 1.7 Forum

Prestashop at stackoverflow.com

HiddenTechies Blog

Craft is a sleek and stylish Prestashop theme professionally design for any eCommerce store like Architects, Furniture, Interior, and Decor. Let’s make your next eCommerce store highlight among thousands of the other ones with this advanced Prestashop theme. This theme is fully responsive, that's look perfect on any device. Create a memorable impression with its classic design layouts. Promotion bar helps to promote your sale. Easy to convey your product features with Product Tab. Scroll to Top creates happy browsing experience. Promote your new product with Newsletter Popup. Increase your Social share with Social Sharing Tool. Craft helps you to grow your online business.

Announcement:

Now all our themes comes with 5+ Booster Addons .

All our themes are compitable with PrestaShop 1.7.7 version.

  • Mobile-first Optimized
  • WhatsApp Chat Bonus
  • Countdown Timer Hot
  • Sticky Header
  • Cookie Law
  • Multi-Language Support Hot
  • Instagram Gallery Bonus
  • Product Custom Tabs
  • AddThis Integration
  • Facebook Chat Bonus
  • New & Sale Product Label Hot
  • Box & Full Width Layout
  • Super High Performance
  • Sticky Add to Cart Hot
  • Product Remaining Stock Bonus
  • Scroll to Top
  • Product Image Border
  • Shipping Time Estimator Bonus
  • Google Analytics Hot
  • 3 Different Submenu Style
  • Promotion Message on Product Page
  • Category Page Product Column Option
  • Search Engine Optimized
  • Clean Coded
  • Well Documented
  • 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 PrestaShop 1.7 files and the store database.

Disable all cache related section that you have in your PrestaShop 1.7.

If you need help for installing PrestaShop, follow the instructions in PrestaShop Doc Guide..

Please Note:

We recommend to use this theme on a new, clean installation or existing shops without custom core modifications.

PHP configuration

memory_limit = 128M

max_execution_time = 300

max_input_time = -1

upload_max_filesize = 25M

post_max_size = 20M

max_input_vars = 10000

allow_url_fopen = On

register_globals = disabled

Files & Folders Permission

Permissions for all files should be set to "664"

Permissions for all folders should be set to "755"

Please Note:

If you don't know how to check these requirements, ask your hosting provider.

1. Download theme package of your purchased theme and extract it.

2. Now Go to theme-files folder where you will find the theme zip file.

3. Now login to your PrestaShop backend panel and navigate to Design > Theme & Logo

4. Now click on Add new theme button at top right corner.

Add New Theme Section

5. Here, You will have three choice to install theme :

Upload New Theme
  • Import from your computer

    In this option, Click on the Add File button and select the theme package from theme-package > theme-files > THEME ZIP FILE

    Once you select theme, click on Save button.

  • Import from the web

    In this option, here you have to enter the URL where the ZIP file is available.

    Now click on Save button.

  • Import from FTP

    In this option, You have to upload Theme File Package named THEME ZIP FILE to your themes/ directory of your prestashop setup.

    Now select the ZIP file which you have uploaded at themes/ directory.

    Now click on Save button.

6. Now click on Use this theme button for activate new theme.

Apply Uploaded Theme

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

Please Note:

Once you installed theme, all the static blocks and pages shown in live demo will be installed automatically to your PrestaShop 1.7 setup.

In order to add the demo images used inside the theme, upload all static images (theme-images > img > cms) on your server in /[your prestashop root directory]/img/cms/ directory using FTP or Cpanel.

A child theme is a theme that inherits the functionality and styling of another (parent) theme and edit the properties according to your needs.

What's the benefit?

Using a child theme actually comes with many advantages:

  • Child themes are the recommended way of updating an existing theme. This feature enables you to customize only the parts of the theme you want to alter, leaving everything else to be handled by the existing parent theme.

  • Before you create a child theme, you will need to make some preparations. First, it's very important that you create a backup of your site before you do anything else.

  • You make sure that your parent theme must be placed in /themes PrestaShop folder.

  • Now create one new folder in same prestashop (/themes) directory and it should be contain following files only.

  • - config
        - theme.yml
    - preview.png
  • Once you created theme.yml file, you need to add following lines in your theme.yml file:

  • parent: classic
    name: childtheme
    display_name: My first child Theme
    version: 1.0.0
    assets:
    use_parent_assets: true
    Where,

    1. Parent:

    • Your parent theme name as mentioned in themes folder of prestashop directory.

    2. Use_parent_assets:

    • true : if you want to use the CSS and JS files from the parent theme
    • false : if you don't want to use the CSS and JS files from the parent theme.

You can now use this theme in your back office and edit it as you wish.

Apply Child Theme

Please Note:

For further more details please follow the link: Child Theme

Add Your Logo

Login to your PrestaShop backend panel and navigate to Design > Theme & Logo.

Add Your Theme Logo Setup Image Dimensions

Inside PrestaShop backend panel navigate to Design > Image Settings.

Setup Image Dimensions Image quality

At Design > Image Settings this location, Set image quality as per your requirement.

Image Quality Modification Regenerate thumbnails

In order to see the changes after you update the image sizes, image quality. You must have to re-generate the images is using in your site.

Select option then click button Regenerate thumbnails

Regenerate Thumbnails Position of Modules

Inside PrestaShop backend panel navigate to Design > Positions.

Check below image to see the example position of modules.

Position of Modules
Now the general options for Theme are configured.

Update Theme

Let see how to Update Theme.

How to update your theme?

Step 1: Create a backup copy of your existing theme.

Important Note:

It is compulsory to take Backup of your existing theme.

Step 2: Visit the HiddenTechies and log in your account.

Step 3: Go to your account then click on my downloadable product tab.

Step 4: Here, you can see the Latest Version of your theme, please download it.

Step 5: Now, Log in your PrestaShop back-office and upload the latest version of the theme.

Step 6: Clear/Flush the cache.

Now your Theme is updated. You can check it on your Frontend Store view.


In this section, you will learn how to configure theme module easily.

Let see how to manage Banner Slider in Theme.

How to configure Banner Slider ? Banner Slider Configuration

Step 1: Inside PrestaShop Back-office navigate to Modules > Module manager.

Step 2: Search Slider, here you will see Image Slider module.

Step 3: Click on Configure. Now you can see the slider images.

Step 4: Click on Edit Button of Image Slider to edit.

Banner Slider Edit

Now you can see default configuration panel of Banner Slider.

Banner Slider Configuration

Image: Set image of the Banner Slider.

Title: Set title of the Banner Slider.

Target URL: Slider URL to redirect.

Caption: Set caption for slider.

Description: Html for Banner Slider.

Banner Slider Html

This is a HTML Code for Banner Slider.

<h2>Up to <span>40%</span><br /><strong>DISCOUNT</strong><br /> on Fashion<br /> Brands</h2>
<p><a href="#" class="action primary">Shop Now</a></p>

Status: Enable/Disable Banner Slider.

Step 5: After adding all the information, Click on  Save  button at bottom right.

Step 6: Clear/Flush the cache.

Now Banner Slider is configured. You can check it on your Frontend Store view.


Configure HiddenTechies Static Blocks

How to add new block in HiddenTechies Static Blocks Module ?

Firstly, Go to: Back-Office > Modules > Module manager/Installed Modules > Search for the 'HiddenTechies Static Blocks'

HiddenTechies Static Blocks will be shown. Now click on Configure button.

Search HiddenTechies Static Block

Now configuration page will be open. Click on + button to add new block.

Add New Static Block

Now add your block Title here and select the language. If you have enabled multiple languages then you must have to add title in all language also.

Configure Static Block

Now set the hook in which you want to display this block on front-office.

To add the content in this block click on '<>' (Source code) button and place your HTML code in opened source code modal. Then click on Ok button.

Edit Html in Static Block Add Html for Static Block

If you want to insert the images then click on Insert/edit image button.

Upload Image in Static Block

Now click on Source icon.

Click Source Icon to Insert Image

Now click on Upload button at the top.

Click on Upload to Upload Image

Now drop your image files here. and click on Return to files list.

Click Return to Files List

Now click on your uploaded image.

Select Your Uploaded Image

URL path will be shown in source field. Now click on Ok button.

Image Url Inserted Click Ok

Your image will be shown in HTML field. Now select the status of block to Yes to enable it and the click on Save button.

Enable or Disable Button Click

To change or edit uploaded image, upload the new image and replace the URL path of image as shown in below screenshot.

Change or Edit Uploaded Image

In order to set the position of block Click on Manage hooks button.

Click Manage Hooks to set Position

Click on Transplant a module.

Click on Transplant a Module

Now select the module and hook which is you have selected earlier and then click on Save button at the bottom of page.

Change Hook for Selected Module

In order to see this block on front-office, you must have to clear the cache. To clear the cache Go to : Back-Office > Advanced Parameters > Preference.

Click on Clear cache button.

Clear Cache

That's all. Now, You will be see your changes on front-office.


Configure Sales Countdown Timer

Let see how to manage Sales Countdown Timer in Theme.

How to configure Sales Countdown Timer ? Sales Countdown Timer

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Sales Countdown Timer module.

Click on Configure.

Follow this link to configure module: Sales Countdown Timer

Now Sales Countdown Timer is configured. You can check it on your Frontend Store view.


Configure Product Remaining Stock

Let see how to manage Product Remaining Stock in Theme.

How to configure Product Remaining Stock ? Product Remaining Stock

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Product Remaining Stock module.

Click on Configure.

Remaining Stock Configuration

Now Product Remaining Stock is configured. You can check it on your Frontend Store view.


Configure Estimated Delivery Dates

Let see how to manage Estimated Delivery Dates in Theme.

How to configure Estimated Delivery Dates ? Estimated Delivery Dates

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Estimated Delivery Dates module.

Click on Configure.

Delivery Dates Configuration

Now Estimated Delivery Dates is configured. You can check it on your Frontend Store view.


Configure Promotion Bar

Let see how to manage Promotion Bar in Theme.

How to configure Promotion Bar ? Promotion Bar

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Promotion Bar module.

Click on Configure.

Follow this link to configure module: Promotion Bar

Now Promotion Bar is configured. You can check it on your Frontend Store view.


Configure Sticky Add to Cart

Let see how to manage Sticky Add to Cart in Theme.

How to configure Sticky Add to Cart ? Sticky Add to Cart

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Sticky Add to Cart module.

Click on Configure.

Follow this link to configure module: Sticky Add to Cart

Now Sticky Add to Cart is configured. You can check it on your Frontend Store view.


Configure Newsletter Popup

Let see how to manage Newsletter Popup in Theme.

How to configure Newsletter Popup ? Newsletter Popup

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see HiddenTechies Newsletter Popup module.

Click on Configure.

Newsletter Popup Configuratoin

This is how you can configure the Newsletter Popup using this module.

Now Newsletter Popup is configured. You can check it on your Frontend Store view.


Let see how to manage Sticky Header in Theme.

How to configure Sticky Header ? Sticky Header Module

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see HiddenTechies Sticky Header module.

Click on Configure.

Sticky Header Configuration

This is how you can configure the Sticky Header using this module.

Now Sticky Header is configured. You can check it on your Frontend Store view.


Configure Category Slider

Let see how to manage Category Slider in Theme.

How to configure Category Slider ? Category Slider Module

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Category Slider module.

Click on Configure.

Follow this link to configure module: Category Slider

Now Category Slider is configured. You can check it on your Frontend Store view.


Configure Brand Image Slider

Let see how to manage Brand Image Slider in Theme.

How to configure Brand Image Slider ? Brand Image Slider

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see HiddenTechies Brand Image Slider module.

Click on Configure.

Brand Slider Configuration

This is how you can configure the Brand Image Slider using this module.

Now Brand Image Slider is configured. You can check it on your Frontend Store view.


Configure Scroll to Top

Let see how to manage Scroll to Top in Theme.

How to configure Scroll to Top ? Scroll to Top Module

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Scroll to Top module.

Click on Configure.

Follow this link to configure module: Scroll to Top

Now Scroll to Top is configured. You can check it on your Frontend Store view.


Configure Facebook Chat

Let see how to manage Facebook Chat in Theme.

How to configure Facebook Chat ?

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Facebook Chat module.

Click on Configure.

Follow this link to configure module: Facebook Chat

Now Facebook Chat is configured. You can check it on your Frontend Store view.


Configure WhatsApp Chat

Let see how to manage WhatsApp Chat in Theme.

How to configure WhatsApp Chat ? WhatsApp Chat Module

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see WhatsApp Chat module.

Click on Configure.

WhatsApp Chat Configuration

Now WhatsApp Chat is configured. You can check it on your Frontend Store view.


Configure AddThis Social Sharing Tool

Let see how to manage AddThis Social Sharing Tool in Theme.

How to configure AddThis Social Sharing Tool ? AddThis Social Sharing Tool

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see AddThis Social Sharing Tool module.

Click on Configure.

Follow this link to configure module: AddThis Social Sharing Tool

Now AddThis Social Sharing Tool is configured. You can check it on your Frontend Store view.


Configure Google Analytics

Let see how to manage Google Analytics in Theme.

How to configure Google Analytics ?

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Google Analytics module.

Click on Configure.

Follow this link to configure module: Google Analytics

Now Google Analytics is configured. You can check it on your Frontend Store view.


Let see how to manage Cookie Law in Theme.

How to configure Cookie Law ? Cookie Law Module

Please Note:

You Can Install This Module From additional_modules.zip File. To Download This Zip File Go To Your HiddenTechies Account > My Downloadable Products.

Inside PrestaShop backend panel navigate to Modules > Modules and Services and than select Installed modules.

Search HiddenTechies, here you will see Cookie Law module.

Click on Configure.

Cookie Law Configuration

Now Cookie Law is configured. You can check it on your Frontend Store view.


Configure Xpert PrestaShop Blog Module by xpert-idea.com

Let see how to manage Xpert PrestaShop Blog in Theme.

How to configure Xpert PrestaShop Blog ?

First You have to Download Xpert PrestaShop Blog Module from xipblog and Upload the module

Go to Modules > Modules and Services > Upload a module in your PrestaShop Back-Office

And click on Configure.

Xpert PrestaShop Blog Module

This is how you can configure the xpert prestashop blog using this module.

Please Note:

As this is third-party module, we are not providing any support for xipblog module.

Theme Translations

Let see how to add Theme Translations.

How to add Theme Translations to translate strings?

Step 1: First login to your store back office.

( Example: {theme_name} = Consider your Purchase HiddenTechies theme.)

Step 2: On left side navigation panel select 'International -> Translation', You will see 'Modify translations' section.

Modify Theme Translations

Step 3: Then, select 'Type of translation' from dropdown > 'Theme translation' .

Step 4: Then, select 'Select your theme' from dropdown > '(Your_Theme)' .

Step 5: Then choose your targeted language 'Select your language' from dropdown > '(Your Language)' .

Step 6: Click on Modify Button.

Select Modification Theme and Language

Step 7: Search for your desire text to translate. You can then modify existing translations.

Theme Translation Section Configuration

Step 8: Now click on,  Save  button.

Step 6: Clear/Flush the cache.

Now Theme Translations is added. You can check it on your Frontend Store view.


Module Translations

Let see how to add Module Translations.

How to add Module Translations to translate strings?

Step 1: First login to your store back office.

Step 2: On left side navigation panel select 'International -> Translation', You will see 'Modify translations' section.

Module Translations

Step 3: Then, select 'Type of translation' from dropdown > 'Installed modules translation' .

Step 4: Then, select 'Select your module' from dropdown > '(Module)' .

Step 5: Then choose your targeted language 'Select your language' from dropdown > '(Your Language)' .

Step 6: Click on Modify Button.

Select Module and Language

Step 7: Here we are, the translation page of module is loaded to start translating.

Module Translation Configuration

Please Note:

Notice one thing that's important to know, here we find many sections of the same module because Prestashop tries to load each files' translation in separate section.

Step 8: Now click on,  Save  button.

Step 9: Clear/Flush the cache.

Now Module Translations is added. You can check it on your Frontend Store view.


Product Reference Number

Let see how to add Product Reference Number.

How to add product reference number to appear on the product page?

Step 1: Inside PrestaShop Root Directory, go to > ..\themes\{theme_name}\templates\catalog\product.tpl file.

( Example: {theme_name} = Consider your Purchase HiddenTechies theme.)

Step 2: Find -> "{block name='page_header_container'}", Block in that File (product.tpl) .

Step 3: Add Following Snippet After "{block name='page_header_container'}" This Block of the Product.

This is a HTML Code for Product Reference Number.

<p id="product_reference"{if empty($product->reference) || !$product->reference} style="display: none;"{/if}>
<label>{l s='Reference:'} </label>
<span class="editable" itemprop="sku"{if !empty($product->reference) && $product->reference} content="{$product->reference}"{/if}>{$product->reference|escape:'html':'UTF-8'}</span>
</p>
Product Reference Number File

Step 4: After adding Snippet,  Save  the File.

Step 6: Clear/Flush the cache.

Reference Number View

Now Product Reference Number is configured. You can check it on your Frontend Store view.


Let see how to change Category Sidebar Image.

How to change Category Sidebar Image?

Step 1: First login to your store back office.

Step 2: On left side navigation panel select 'Modules -> Module Manager'section.

Module Manager Section

Step 3: Then, Search for the module name > 'Advertising block' .

Step 4: Here you will find module 'Advertising block', click on 'Configure' button.

Search Advertising Block

Step 5: It will open 'Advertising block' configure section, from here you can change category page sidebar advertising image as per your requirement.

Advertising Block Configuration

Step 6: Now click on,  Save  button.

Step 7: Clear/Flush the cache.

Now Advertising block is configured. You can check it on your Frontend Store view.


Google Analytics Code

Let see how to add Google Analytics Code.

How to add Google Analytics Code in your store?

Step 1: Go to in your root directory > ..\themes\[your_theme]\templates\_partials\head.tpl file.

Step 2: Open this head.tpl file and add your Google Analytics Code (Refer below Screenshot).

Google Analytics Code File

Step 3: Then, Save the changes.

Step 4: Clear/Flush the cache.

Now Google Analytics is configured. You can check it on your Frontend Store view.


Clear Cache

Let see how to Clear Cache.

How to Clear Cache?

Step 1: First login to your store back office.

Step 2: On left side navigation panel select 'Advanced Parameters -> Performance'section.

Clear Cache Section

Step 3: In the upper right corner please find the 'Clear cache' button and click on it to clear cache.

Click on Clear Cache

Step 4: Done! Check out Front-end now.

Now Cache is cleared. You can check it on your Frontend Store view.


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 24/7.

Your feedback is absolutely welcome!