How to effectively edit my Prestashop theme?

Let's say you have created your theme from PS Theme Maker and then installed into your eshop. But it seems you'd like to make some minor changes or tweaks.

You may get back to the Theme Maker OR if it is something specific there're always some ways to do it by yourself.

I may give you some tips where to start.

Developer tools in Google Chrome

This is must have. Thanks to this tool will be able to detect precisely the element you are looking for. Take a look at this tutorial video. Once you locate the element you know exactly what file (and line) should be edited.

Custom.css

As for the colors and basic layout - this is the most important CSS file in your theme. The file can be found at your_eshop/themes/your_theme/css/custom.css
Note that this file is included only in themes created in PS Theme Maker. Other developers may solve it differently.

Grid/list switcher

There's also an easy way to switch between grid/list layout manually. Open your_eshop/themes/your_theme/product-list.tpl

You'll find this line:

<ul id="product_list"  class="products_block list clearfix">

Just rewrite the class "list" to "grid" or vice versa and it's ready to go!

Editor for quick changes

For Windows users I recommend using  Notepad+, for Mac users it would be TextWrangler. If you need more powerful program I suggest Netbeans.

Hope it helps you! 🙂

Incoming search terms:

About the author:

Hi, I'm Andrej Staš and I'm the creator of Presta-theme-maker.com, IT freelancer, freeline-skates fan and salsa dancer. If you'd like to connect to me - check out my my portfolio.


25 Comments (+add yours?)


Richard Hunter

Nov 11, 2012 @ 11:30:08 · Reply

Excellent info.

I have a question. How can I make the home page one column?

    Andrej

    Nov 11, 2012 @ 19:43:11 · Reply

    This will be featured in the next releases! 🙂

Richard Hunter

Nov 11, 2012 @ 20:32:06 · Reply

When is the estimated time of arrival of the next release?

    Andrej

    Nov 11, 2012 @ 20:47:15 · Reply

    November 24th – working on it right now.

jasper

Dec 11, 2012 @ 23:25:30 · Reply

Hallo Andrej,

I have a question. How can I enable the add to cart button evrywhere on the site?

Thanx,

Richard Añez

Dec 28, 2012 @ 23:24:45 · Reply

how I can change the heade ?, I would like to place a banner o the logo bigger ..

thanks.

Hola como pudo cambiar la cabecera, quisiera colocar un banner en ella.

saludos

    Andrej

    Jan 20, 2013 @ 17:42:05 · Reply

    Depends on what changes you need.

    Generally the header may be changed in your_theme/header.tpl

irene

Mar 09, 2013 @ 04:43:29 · Reply

pls i want to add two more layers after featured products, how do i do that, also how can i change modules names to suit me

    Andrej

    Mar 10, 2013 @ 07:04:56 · Reply

    What kind of layers do you mean?

irene

Mar 09, 2013 @ 05:11:08 · Reply

pls i want to duplicate modules wit different titles

    Andrej

    Mar 10, 2013 @ 07:03:47 · Reply

    This require also change of the duplicated modules – you’ll need a programmer there to change the names of the modules in the code.

Serafin

Mar 28, 2013 @ 00:39:49 · Reply

Hi

When i change to Grid view the items are shown in 3 items per line, and are 4 lines, leaving just one item in the last line (making the total of 10 items shown in one page), theres a way to fix the number of items in one page, for have 9 items (3 items per line in 3 lines), to avoid having one extra line with just one item?

Thanks

    Presta Theme Maker

    Jun 02, 2013 @ 22:22:55 · Reply

    Hi,

    back office > preferences > products > “Products per page”

    There you can set your desired number of products per page.

Ivan11

May 28, 2013 @ 13:24:14 · Reply

Hi Andrej, is it possible to save an unfinished theme and work on it later? If so, what about multiple works in progress?

    Presta Theme Maker

    Jun 02, 2013 @ 22:20:00 · Reply

    Hi,

    unfinished theme is saved in the browser – but you can’t open any other theme.

    If you’re a member – all downloaded themes are automatically saved into your account.

basix101

Jun 30, 2013 @ 07:27:21 · Reply

Trying to get rid of page numbers in homeslider.

How do I deactivate it?

Should I do something with this?

/css/custom.css (line 23)
span.number, .bx-pager
a.pager-active {
}

Mario Sturdik

Jul 21, 2013 @ 23:37:23 · Reply

Ahoj Andrej, urobil som si nove logo ale stale tam mam povodne, ako ho tam dam, ked som ho na strankach u vas uploadoval a aj sa mi zobrazilo pred stiahnutim? Po instalacii mojho obchodu tam je stre, predvolene…
Dakujem Mario

    Presta Theme Maker

    Aug 02, 2013 @ 12:01:05 · Reply

    V Theme Makeri je uvedene, ze logo je zobrazovane len pre ilustraciu. Po instalacii sablony si ho musis znova do svojho eshopu nahrat

Nicolae Albicsuk

Aug 17, 2013 @ 17:29:03 · Reply

How do I change the image size of the manufacturers, I tried to> Preferences> Images, and do not change.
http://www.nicktechnology.com/index.php?controller=manufacturer

thanks

marcos sá

Sep 20, 2013 @ 02:49:25 · Reply

Hi,
I need to increase the size of the photos on the main page.
I tried to increase the size of the images in “preferences / images”, but the pictures seem limited by the edges of the featured products.
I tried to restart the module “featured products”, without success.
I used 245×245 and tried other values​​, without being able to enlarge the photos.

Kevin Mcqueen

Feb 26, 2016 @ 20:35:05 · Reply

I have a question. Why when I try to upload my zip file for the theme i created for 1.5 am I getting a “fatal error”?

Lars Mikkelsen

May 01, 2016 @ 11:06:08 · Reply

Hi
Can i change things in the theme after download or do i have to pay once more for small changes ?

    Presta Theme Maker

    May 01, 2016 @ 12:07:58 · Reply

    Hi Lars,

    you can re-download your theme as long as you are a member. If you decide for the 15 day account, you have 2 weeks (+1 day) to download up to 5 themes and decide which fits best for your needs 🙂
    For 6 months, it’s already 50 downloads and unlimited for 1 year.

Leave a Reply