Create a PrestaShop Theme
Welcome to the PrestaBuilder editor!Here's a list of the basic steps to get started.
These product pictures will help you to better envision your e-shop; they will not be included in the theme ZIP file.
If you are here for the first time, I suggest to start setting the "Homepage Modules".
All modules have been created by the PrestaBuilder team, and we offer lifetime updates on all of them. Have a look at our modules page to get more info (opened in a new tab)
Some of the modules (Testimonials, Manufacturers’, Blog, and Action button) can also be hooked in the side columns or footer.
Activate or deactivate any module on the homepage by clicking on the green buttons below. Drag and drop the modules in the list to re-order the blocks on the homepage.
You have to visit multiple products in order to see "Viewed products" module in action.
Activate or deactivate any module on the homepage by clicking on the green buttons below.
Insert some product into your cart to see "Drop Down Cart" module in action.
In this tab you can set various layouts for different parts of your e-shop. Set colors in the following tabs.
Check those modules that you wish to display in full width on the homepage.
More options for product boxes are located in "More Styles and Animations" tab > "Style and Animations of Product Boxes".
You can edit the size of the product boxes in the category view in "Layout > Product Box Layout"
You will be able to upload your own category images once you install your theme
Decrease these values to create "boxed" layout.
"Shadow of the whole layout" will become visible only when "Maximum Width of the Whole Layout" is set to less than 100%.
Increase these values to maximum (1600 and 1140) to create fullscreen layout.
To get the best results, set all 46 colors below. Afterwards, you can override colors of specific sections in other tabs (e.g., header, footer, etc.).
Sometimes the background picture is not suitable for devices with small screens. In the tab below, you can upload another background that will be visible only on phones.
You don't have to set the colors below; only in case you want to override a specific part.
Insert some product into your shopping cart when styling the active cart button
You can set what social icons you wish to display in the back office of your eshop.
To edit "social share" icons next to your products, go to "More Styles and Animations" tab > "Style of Social Share Buttons".
You can also edit the copyright manually in /your_theme/templates/_partials/copyright.tpl
To start editing these settings, add any product into your cart and go to the "shopping cart".
Consider all these settings as something extra that you don't have to set necessarily. Only in case you want to improve some specific part of your design.
Set the animations for the homepage modules that will play when visitors open your e-shop.
You don't have to set all those settings below, only if you want to overwrite the existing look.
If you plan to upload transparent pictures on your eshop and want to place them into transparent product boxes, set this color below to transparent.
Here you can set the color of "social share" buttons placed in the product page.
To edit the colors of "social follow" buttons, go to "Settings of modules" tab > "Social Block Module"
To start editing these settings, open quick view of any product
Click on the main product picture to display the fullscreen image.
To start editing these settings, add any product into your cart, go to the "shopping cart" and click on the "Checkout" button.
This premium module has been created by the PrestaBuilder.
More options are available in the configuration of the module after you install it. Read more about this module here. (The link will be opened in a new tab)
The banner image you upload will be part of the theme ZIP and will override you current banner.
you will be able to hook this module to the footer after installation of the module on your eshop.
The slider image you upload will be part of the theme ZIP and will deactivate you current slider images.
If you wish to display this image slider in full width, go to "Layout > Fullwidth Homepage Modules".
you will be able to upload the banner images from your back office. You will also be able to change the layout of this module.
you will be able to change the number of images in a row and number of rows after you install the module
You can test this code:
background: yellow !important;
We also offer "Custom Multi HTML JS Blocks" module. (Opened in a new tab) With this module you can easily insert any HTML, CSS or JS into your theme.
Do you wish to continue with this theme later? Save this link and access your theme from other device or computer.
1. Go to your back office and select "Design > Theme & Logo" in the side menu.2. Click on the icon at the top, titled "Add new theme".3. Upload the theme.4. The theme is not automatically activated following its upload; scroll down and activate it.Pictures (image slider + banner image + logo) and modules are activated automatically. Enjoy your new theme and best of luck with your e-shop!