Warehouse theme documentation for prestashop 1.7

Getting started

Before your start to work with template you shuld have at least basic knowledge how Prestashop works. Please check Prestashop official documentation. 

Style import

Download styles import files

Layouts(columns)

To change page layout go to to Design > Themes

and then you can set diffrent layout per each controller.

Translations

You can translate theme and modules by following Prestashop translation guide.

Warehouse theme use default Prestashop translaitons strings and few custom ones. So most of parts are compatible with prestashop default translation. So you can import it to your store

https://www.prestashop.com/en/translations

Image sizes

Image sizes you can set in Backoffice > Design > Images settings.

By default image sizes have such settings

All of this image size must be keept in your store.

Legend:

• cart_default – small product image used for shopping cart
• small_default – used in variouse places
• medium_default – used in variouse places
• home_default – product image used in product listing pages
• large_default -product image used as main image on product page
• category_default -it is wide category imaeg banner on category pages
• stores_default – used on store pages
• thickbox_default – used on product page, it is zoomed product image

For best results:

• cart_default, small_default, medium_default, home_default, large_default, thickbox_default should have same aspect ratio.
• Product images which you upload, should have size same as thicbox_default and should match aspect ratio

Images modification:

You may need to modify your image sizes to match your needs and theme style you  use. Image sizese depends on

• size of your orginal images
• number of product per row
• page layouts(columns)
• container width
• product image wrapper width

Each modification of size require thumbails regeneration(Backoffice > Design > Images).

Transparent images:

If you need transparent images (also shop logo)

Child theme

From Prestashop 1.7 it is possible to create child themes. It is helpfull when you need to make small adjustments in .tpl files of template, while you will still will be able to make theme updates easily. More info avaiable on ps docs. and in Prestashop dev blog

For theme 4.4.2 and newer

Download child theme sample template

If you not using sample from documentation then make sure fontawsome icons are copied into child theme assets folder

themes\<your child theme name>\assets\css\font-awesome   (you can copy from themes\warehouse\assets\css\font-awesome)

Theme.yml for Warehouse child theme should look like this(folder name should be same as name you put in theme.yml – example: warehousechild)

parent: warehouse
name: warehousechild
display_name: Warehouse child theme
version: 1.0
author:
  name: "IQIT"
assets:
  use_parent_assets: true

For theme 4.4.1 and older 

You can download Warehouse sample template

Theme.yml for Warehouse child theme should look like this(folder name should be same as name you put in theme.yml – example: warehousechild)

parent: warehouse
name: warehousechild
display_name: Warehouse child theme
version: 1.0
author:
  name: "IQIT"
assets:
  use_parent_assets: true
  css:
    all:
      - id: font-awesome
        path: assets/css/font-awesome/css/font-awesome.css
        media: all
        priority: 200

Template files modifications

Theme is based on Bootstrap 4 (documentation) and it is build with Webpack (which is used by Prestashop by default). If you need to make modifications of JS or CSS which are not possible to be made with custom CSS (you can apply it in theme editor module or in themes\warehouse\assets\js\custom.js and themes\warehouse\assets\css\custom.css) then you need to prepare your developmant enviroment and learn how to use Webpack

You should also get some knowledge about Prestashop theme structure from documentation

Performance

Go to backoffice > Advanced parametrs > Performance

NOTE: Cache should be enabled in live site, if you still in developmant process it is better to work without cache.

If you configured additional caching system on your server you can also enable

For more information check this great article: https://canonicalized.com/prestashop-speed-optimization/

Modules block structure (3-part module adjustments)

If you use third part modules it maybe needed to adjust their design to match Warehouse block structure.

Sidebar block structure

<div class="block block-toggle js-block-toggle">
 <h5 class="block-title"><span>//title of your module</span></h5>
 <div class="block-content">
   //content of your module
 </div>
</div>

Footer block structure

<div class="col col-md block block-toggle js-block-toggle">
    <h5 class="block-title"><span>//title of your module</span></h5>
    <div class="block-content">
        //content of your module
    </div>
</div>

Tip: if your block is a link list add “block-links” class to it.

Prestashop update recommendations

Always to backup before you upgrade!!! But since on some server config making backup from 1-click autoupgrade tool may cause error during upgrades, I recomand to perform Database and files backup manually by your hosting panel and then switch off backup during 1-click upgrade.

——————————————————————————————————

Disable non-native modules and switch to default theme options must be disabled!

Recommanded settings of Prestashop 1-click autoupgrade tool

[From PS 1.7] From Warehouse 4.x

[From PS 1.6] From Warehouse older than 4.x

Since Prestashop 1.6 to 1.7 is major software upgrade and Prestashop removed backward compabilty for theme and modules there is no standard upgrade procedure.

Once you perform upgrade of your store to PS 1.7 you need to uninstall all iqit-commerce modules, and remove them from your server. You also need to uninstall and remove old Warehouse theme.

Then check your 3-part modules, many of them will not work in your updated Prestasshop 1.7 store.

Once you will get workin updated Prestahop 1.7 store with deafult(classic) Prestashop template you need to install Warehouse template by following default procedure

Modules placment

Prestashop modules

Theme also use some of Prestashop native modules, for example ps_facatedsearch. More info about this modules can be found on Prestashop documentation page.

iqitadditionaltabs

With this module you can add additional content to product which will be showed in tabs on product page.

Inside module configuration page you can crate global tabs, which will be visible for all products.

or inside product edit page you can create unique tabs per product

iqitaddthisplugin

It add integration to social sharing tool http://www.addthis.com/ which allow to share product pages in social media. I have also possibility to check statistics of social activity. By default module use our addthis-id, if you want to use own addthis account you need to create accunt on addthis.com website and create own “Share buttons” > “inline” tool

iqitcompare

Add possibility of comparing products to customers

iqitcontactpage

Adds additional content and map on contact page of prestashop. Please note: that contact form is part of prestshop itself, it is not part of this module.

iqitcookielaw

Show European cookie law notification.

iqitcountdown

Show countdown to end of special price on product-list and product pages. To configure countdown you need to add special price for product with definied end date.

iqitcrossselling

It is replacment module for Prestashop core module “ps_crosseling”. It shows customers whou bought this product also bough on product page, add to cart confirmation modal and on cart page.

Crosselings products are generated automaticly base on multiple products orders with delivered status

It is hooked undef following hooks:

• displayFooterProduct – show crosselings on product page footer
• displayModalCartCrosseling – show crrosselisn on add to cart confimration modal
• displayShoppingCart – shows crosseling on cart page

If you want to remove module from one of following hooks go to Design > positions > find module name and unhook iqitcrosselings

iqitelementor

It is Live Drag&Drop page builder, based on great WordPress plugin Elementor by Pojo.me company.

Creating homepage

Go to

then

1. Create own layout
2. Choose it for your homepage

Cms pages & products

You can also create product description or cms pages content with elementor page builder.

How to use elementor

• Overview
• Sections and columns – part 1
• Sections and columns – part 2
• Sections and columns – part 3
• Mobile editing
• Typography
• Entrance animation
• Hover animation
• Widgets

Languages

You need to create content in elementor builder for each language you use in your shop. Language which you currently edit is higlighted at top.

Once you create your page, you can switch to another language and to speedup the process you can import content from previously created by click on 1.

Template manager

In library you can save your layouts, so you can use them later in other pages. You can also export/import templates to .json files.

iqitemailsubscriptionconf

Adds frontcontroller for Prestashop core module ps_emailsubscription. Thanks to that confirmation about subscription is showed on separate page.

iqitextendedproduct

Adds YouTube/Vimeo/Dailymotion videos  or 360 degree images to your products.

iqitfreedeliverycount

• Show remaining amount left for free shipping on checkout page, with ajax support
• Show remaining amount left for free shipping on blockcart, with ajax support
• Show remaining amount left for free shipping on confirmation popup, with ajax support
• You can use default prestashop field to determine free shipping or use custom value inside module configuration –  it is helpfull when you offer free shipping just for one carrier

iqithtmlandbanners

Adds custom html or banners(slideshows) in variouse hook on page

iqitlinksmanager

Adds blocks with links in variouse hook in your page.

iqitmegamenu

Documentation for this module is avaiable here: iqitmegamenu_documentation.pdf

“Note: In Warehouse theme entire design configuration part of menu is moved to iqitthemeeditor module”

iqitpopup

Create your own custom popup windows with optional newsletter subscription.

• It use html content. You can put in it images, custom text, video frames, likebox etc. inside
• Optional newsletter form.

iqitproductsnav

Show links to next and previouse products in category on product page

iqitproducttags

Shows products tags (you can assing them during product creation) on product page

iqitreviews

Add feature of adding product reviews. Inside module configuration you can choose to autopublish comments or allow guest comments.

You can also approve or remove comments

iqitsizecharts

It allows you to create table size charts for your products.

In module configuration you can create size guide which can contains text, images, tables etc. You can assign size guide to categories, so all products assigned to selectec categories will show this size guide on product page, but it is not neccessary, since you can also assign size chart only for particural product, in backoffice during product edit in modules option

then it will show size chart button on product page, which will open modal widown with defined guide

iqitsociallogin

This module allows customers to connect you your shop using their social accounts of Facebook, Twitter and Google+.

To use Facebook login you need to Enable SSL on your entire shop. It will not work without ssl!

Configuration of Facebook login

1. Go to https://developers.facebook.com/apps and create a new application by clicking “Create New App”.

2. Fill out any required fields such as the application name and description and e-mail
3. Go to Settings

• App id and App Secret you need to copy to iqitsociallogin module configuration
• You need to fill App domain with your domain example: domain.com
• Then click on Add Platform, and from modal window choose Website  and in site url type your full url with protocol example: https://domain.com
• Then Click on Save changes button

4. Then go to App review and make your application public

4. Then go to +Add Products and choose Facebook login, Then choose Settings instead of quickstart of your Facebook login

5. Put your full url with protocol example: https://domain.com in valid OAuth redirect url

In Valid OAuth Redirect URIs put urls:

1. https://yourdomain.com/module/iqitsociallogin/authenticate?provider=facebook&page=authentication  (or if your shop is multilanguage then you need to add link in each language  example: https://yourdomain.com/en/module/iqitsociallogin/authenticate?provider=facebook&page=authentication )
2. https://yourdomain.com/module/iqitsociallogin/authenticate?provider=facebook&page=checkout (or if your shop is multilanguage then you need to add link in each language  example: https://yourdomain.com/en/module/iqitsociallogin/authenticate?provider=facebook&page=checkout  )
3. https://yourdomain.com/index.php?provider=facebook&page=authentication&fc=module&module=iqitsociallogin&controller=authenticate
4. https://yourdomain.com/index.php?provider=facebook&page=checkout&fc=module&module=iqitsociallogin&controller=authenticate

6. Click on Save changes and test your login. Important maintance mode of Prestashop must be switched off during tests!

Configuration of Google login

1. Go to the Google Developers Console. and click on create  and fill your project name
2. Then Create OAuth Client ID
   You maybe needed to fill product name
3. Then From the Application type list, choose the Web application and fill Authorized JavaScript origins with your domain name example: https://yourdomain.com
   You need to also fill Authorized redirect URIs, Authorized redirect URIs, you need to fill them with
   1. https://yourdomain.com/module/iqitsociallogin/authenticate?provider=google&page=authentication (or if your shop is multilanguage then you need to add link in each language  example: https://yourdomain.com/en/module/iqitsociallogin/authenticate?provider=google&page=authentication )
   2. https://yourdomain.com/module/iqitsociallogin/authenticate?provider=google&page=checkout (or if your shop is multilanguage then you need to add link in each language  example:https://yourdomain.com/en/module/iqitsociallogin/authenticate?provider=google&page=checkout )
   3. https://yourdomain.com/index.php?provider=google&page=authentication&fc=module&module=iqitsociallogin&controller=authenticate
   4. https://yourdomain.com/index.php?provider=google&page=checkout&fc=module&module=iqitsociallogin&controller=authenticate
      
4. Copy Client ID and Client secret to iqitsociallogin module configuration
   
5. Then from left panel select Library and find Google+ and enable it
   
6. Then test social login. Important maintance mode of Prestashop must be switched off during tests!

Configuration of Twitter login

1. Go to https://dev.twitter.com/apps and create a new application.
   
2. Fill out any required fields such as the application name and description.
   Put your website domain in the Website field  example: http://yourdomain,com Provide this URL as the Two Callback URLS for your application example https://yourdomain.com and https://yourdomain.com/module/iqitsociallogin/authenticate  (or if your shop is multilanguage then you need to add link in each language  example: https://yourdomain.com/en/   https://yourdomain.com/en/module/iqitsociallogin/authenticate )
3. Go to Settings tab and put privacy url and term of services url. They maybe links for your term services url and privary in your store
4.  Go Permissions tab Change Access to Read only and check Request e-mail address from user
5. Go to Key and Access tokens tab and copy keys to iqitsociallogin module configuration
6. Then test social login. Important maintance mode of Prestashop must be switched off during tests!

iqitthemeeditor

It is a module which allow you to customize design of your shop.

You can edit using backoffice editor or Live editor. Both editors contains same features. To Import/Export style, please use backoffice editor.

Note: During using Theme editor you should disable cache in your shop(Prestashop build in and 3-part cache module if you use it), otherwise some changes maybe not visible in your shop directly.

Live editor

Options are categorized into sections

Tip: you can change viewport size by clicking on devices icons, so you can preview your page on tablets on phones.

Tip: If you editing particural page, change preview page using selectbox or simply go to that page by clicking on it in preview(ex. if you want to edit product page and you want to see live changes, click on any product in your page preview)

iqitwishlist

Allows customer to create wishlist with products. In module config you can enable/disable showing crosseling products (customer who bought this product also bought) to products selected by customer. It is possible to also hook module to hooks like

displayHeaderButtons and displayHeaderButtonsMobile so they will show next to cart and sign in buttons in header

ph_simpleblog

Blog module for your shop.
There is separate documentation available:

revolutionslider

Revolution Slider is included in template thanks to extended license. With this license it is not possible to activate revolution slider module by Prestashop backoffice, but module without activation is FULLY FUNCTIONAL! Module for creating slideshow in your shop. There is separate documentation available inside theme files package, in revolution slider Folder.

Basically after importing slider, you need to assign it to hook displayHome. If after that slideshow is not showed, make sure that module itself is transplated to this hooks (in design > positions)

Full documentation aviable under https://iqit-commerce.com/rev-17-doc/

Revolution Slider is included in template thanks to extended license. With this license it is not possible to activate revolution slider module by Prestashop backoffice, but module without activation is FULLY FUNCTIONAL!