How do I change CSS & templates files in order to integrate my theme ?

Are you running into integration problems with the module ?

As you surely already know, all modules are guaranteed compatible ONLY with the default / standard PrestaShop theme that comes with the software when you first install it. No custom themes are guaranteed compatible, though it may very well work in many cases.

However, below is the structure of all the main module files needed to modify the appearance of your module:

I have a PrestaShop > 1.6 - I have a PrestaShop < 1.6

PrestaShop > 1.6

 

1) Let's start with the Snippets badge + summary block on a product page: 

* Snippets Badge (only for PrestaShop theme which do not include the rich snippets by default in the product page) : 

The template file is : templates/hook/snippets-product.tpl

The CSS file is : css/snippets.css (look for CSS classes prefixed with : div.GSRBadge_)

* Summary block  :

The template file is : templates/hook/product-review-block.tpl

The CSS file is : css/hook.css (look for CSS classes prefixed with : div.GSRBadge_)

For the badge on the homepage, category and manufacturer / brand pages, the template files are : snippest-hp.tpl / sinppets-category.tpl / snippets-brand.tpl


2) Let's move on with the "Reviews" tab on the produt page:

The template file is : templates/hook/product-tab-content.tpl

The CSS files are :

- css/hook.css (CSS classes prefixed with "review").
- css/module.css => for the pagination CSS, that is grouped with the pagination on the back-office side


3) The review submission form :

 

The template file is: templates/hook/product-review-form.tpl

The CSS file is : css/module.css (classes prefixed with "newComment").


4) Viewing an individual review:

 

The template file is : templates/front/review-display.tpl

The CSS file is : css/module.css (classes prefixed with "newComment").

5) Let's move on with the "last reviews block" :

The template file is : templates/hook/block-last-reviews.tpl

The CSS file is : css/hook.css (classes prefixed with "GSRLastReviews").

6) Let's move on with the "all reviews" page :

The template file is : templates/front/review-list.tpl

The CSS file is : css/hook.css (classes prefixed with "ReviewLine").

7) Let's move on with the "my account > my reviews" page :

The template file is : templates/front/customer-account.tpl

Voila, with all this information, you have all the right pointers to start customizing your module's look and feel !!!!

That being said, for those of you with no technical knowledge and that doin't know CSS syntax, we recommend our partner, Profileo, and their webmastering business unit, Profileo Live. They offer webmastering tickets at a very reasonable (at least for France) price of 70€ per hour. Simply contact them by e-mail at  live@profileo.com. 

 

PrestaShop < 1.6 Back to the top

 

 

1) Let's start with the Snippets badge + summary block on a product page: 

* Snippets Badge : 

The template file is : templates/hook/snippets-product.tpl

The CSS file is : css/snippets.css (look for CSS classes prefixed with : div.GSRBadge_)

* Summary block  :

The template file is : templates/hook/reviews.tpl

The CSS file is : css/hook.css (look for CSS classes prefixed with : div.GSRBadge_)

For the badge on the homepage, category and manufacturer / brand pages, the template files are : snippest-hp.tpl / sinppets-category.tpl / snippets-brand.tpl


2) Let's move on with the "Reviews" tab on the produt page:

The template file is : templates/hook/product-tab-content.tpl

The CSS files are :

- css/hook.css (CSS classes prefixed with "review").
- css/module.css => for the pagination CSS, that is grouped with the pagination on the back-office side


3) The review submission form :

 

The template file is: templates/hook/review-form.tpl

The CSS file is : css/module.css (classes prefixed with "newComment").


4) Viewing an individual review:

 

The template file is : templates/hook/review-display.tpl

The CSS file is : css/module.css (classes prefixed with "newComment").

 

Voila, with all this information, you have all the right pointers to start customizing your module's look and feel !!!!

That being said, for those of you with no technical knowledge and that doin't know CSS syntax, we recommend our partner, Profileo, and their webmastering business unit, Profileo Live. They offer webmastering tickets at a very reasonable (at least for France) price of 70€ per hour. Simply contact them by e-mail at  live@profileo.com. 

Back to the top

Other FAQs in this category