Create Prestashop Themes 1.6 (v2)

Theme Settings
Pre-made Content
To make the process of creating your theme easier, we have prepared several pre-made themes that you can continue editing.
Or you can use pre-made combinations and quickly build the first version of your website as if you were playing with Lego.
- Pre-made Themes
  More pre-made themes will be added soon.
- Pre-made Combinations
  Simply go through this list and pick one choice from each section. They might even help you in creating your theme.
  If you wish to do everything manually, you can skip this section.
  Color combinations
  
  Header layouts
  
  Content layouts
  
  Buttons
Start Here + Tutorial
Welcome to the Presta Theme Maker editor!

I recommend to continue making adjustments tab by tab. Feel free to stop when you are satisfied with your theme. You don't have to determine all the settings.

Enjoy!
1. Set Product Images

These product pictures will help you to better envision your e-shop; they will not be included in the theme ZIP file.
2. Upload Your Logo
Header tab > Logo
3. Set the basic layout
Layout tab
4. Set the main colors of your eshop
Basic colors tab
Basic Settings
Layout
In this tab you can set various layouts for different parts of your e-shop. Set colors in the following tabs.
Homepage layout
Category layout
Product layout
CMS layout
- Header Layout
  Style of the header
- Menu and Search Layout
  Menu
  Alignment of items in the menu
  Dropdown menu content and visibility
  Search
  Display search
- Product Box Layout
  More options for product boxes are located in "More Styles and Animations" tab > "Style and Animations of Product Boxes".
  Size of a product box on homepage
  Size of a product box in a category
  - Size of product box for phones
    Size of a product box on homepage on phones
    Size of a product box in a category on phones
- Product Detail Layout
  Position of the product picture
Background
Solid background color

Gradient background color
- Background Pattern
  Background pattern
- Custom Background Image
  Custom background image
  Select your image Upload
  Maximum file size: 750KB
  Remove image
  This upload is not supported by your browser.
  Background repeating
  Fixed background
  Background size
  Background position
Content Area
Outer layout

Solid outer layout color

Gradient outer layout color
- Outer Area Background Pattern
  Background pattern of the outer area
- Custom Outer Area Background Image
  Custom background image of the outer area
  Select your image Upload
  Maximum file size: 750KB
  Remove image
  This upload is not supported by your browser.
  Background repeating
  Fixed background
  Background size
  Background position
- Maximum Width of the Whole Layout
  Decrease these values to create "boxed" layout.
  Maximum width of the outter layout in pixels
  Width of the outter layout in percentsThis value is taken into consideration if the maximum width above has not been reached
  Maximum width of the e-shop outter layout on smaller screens in percentage
- Margin and Padding
  Margin (top and bottom)
  
  Padding (top and bottom)
  
  Padding of the whole website (left and right)
  You can create the effect of a boxed layout
- Curved Corners
  Curved corners of outer layout
- Border
  Border thickness
  
  Style of the border
  
  Border color
- Shadow
  Shadow of the outer content area
  Shadow of the whole layout (including header and footer)
  "Shadow of the whole layout" will become visible only when "Maximum Width of the Whole Layout" is set to less than 100%.
Inner Layout

Solid inner layout color

Gradient inner layout color
- Inner Area Background Pattern
  Background pattern of the inner area
- Custom Inner Area Background Image
  Custom background image of the inner area
  Select your image Upload
  Maximum file size: 750KB
  Remove image
  This upload is not supported by your browser.
  Background repeating
  Fixed background
  Background size
  Background position
- Maximum Width of the Content
  Increase these values to maximum (1600 and 1140) to create fullscreen layout.
  Maximum width of the e-shop contentDefault value: 1140px. View the eshop in full screen in order to see the result.
  Maximum width of the e-shop content on smaller screensDefault value: 940px.
- Padding
  Padding (top and bottom)
- Curved Corners
  Radius of inner layout
- Border
  Border thickness
  
  Style of the border
  
  Border color
- Shadow
  Shadow of the inner content area
Basic Colors
To get the best results, set all 47 colors below. Afterwards, you can override colors of specific sections in other tabs (e.g., header, footer, etc.).
TextsOpen Homepage to preview

Basic title color

Basic link

Basic link on hover

Basic text

Basic price
Divider

Color of divider lines
Product BoxOpen Homepage to preview

Product background

Product name

Product name on hover

Product price

Old product price

Reduction price

Reduction price background

Price background on hover (visible when viewing in a big screen)

Price color on hover (visible when viewing in a big screen)

New badge background

New badge text
Boxes (including Sidebars)Open Category to preview

Background of boxes

Gradient background of boxes

Divider lines in boxes

Title color in boxes

Text in boxes

Link in boxes

Link in boxes on hover

Price color in boxes
Main ButtonsOpen Form to preview

Button background

Button color

Button background on hover

Button color on hover
Secondary ButtonsOpen Form to preview

Secondary Button background

Secondary Button color

Secondary Button background on hover

Secondary Button color on hover
FormsOpen Form to preview

Form label

Form background

Default text color in form

Text color in form

Form background on focus

Border of form on focus
Tables to preview

Background of table header

Color of table borders

Background of table lines

Background of even lines in tables
Header
Solid background color of the header

Gradient background color of the header
- Header Background Pattern
  Header pattern
- Custom Header Background Image
  Custom header image
  Select your image Upload
  Maximum file size: 750KB
  Remove image
  This upload is not supported by your browser.
  Header background repeating
  Fixed header background
  Header background size
  Header background position
  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.
  - Background Image for Phones
- Margin and Padding
  Header margin
  
  Header padding
- Curved Corners
  Radius of the header
- Border
  Border thickness
  
  Style of the border
  
  Border color
- Shadow
  Shadow of the header
You don't have to set the colors below; only in case you want to override a specific part.
- Top Banner
  
  Background color of the banner area
  Display Banner
  Upload your banner
  Select your image Upload
  Maximum file size: 750KB
  Remove image
  This upload is not supported by your browser.
- Top Menu
  Solid top menu background color
  
  Gradient top menu background color
  
  Text color
  
  Link color
  
  Link color on hover
  
  Dropdown menu background (currency / languages)
  
  Dropdown menu background (currency / languages) on hover
  - Border
    
    Top border
    
    Bottom border
    Border of top menu
    
    Style of the top border
    Style of the bottom border
  - Shadow
    Shadow of the top menu
    Shadow of the currency/language drop downs in the top menu
  - Curved Corners
    Radius of the header
  - Margin
    Margin (top and bottom)
    
    Padding of the top menu
  - Icons
    Style of the "language/currency arrow down" icons
- Shopping Cart
  Insert some product into your shopping cart when styling the active cart button
  
  "Cart" button background
  
  "Cart" button text
  
  "Cart" button background on hover
  
  "Cart" button text on hover
  Shadow of the shopping cart button
  Shadow of the drop down list
  Icon of the shopping cart
  - More Drop Down Cart Settings
    
    Drop Down Cart background
    
    Drop Down Cart dividers
    
    Drop Down Cart text color
    
    Drop Down Cart link color
    
    Drop Down Cart link color on hover
    
    Drop Down Cart button background
    
    Drop Down Cart button text
    
    Drop Down Cart button background on hover
    
    Drop Down Cart button text on hover
    Radius
- Logo
  The logo you upload will NOT be part of the theme ZIP.
  Upload your logo
  Select your image Upload
  Maximum file size: 750KB
  Remove image
  This upload is not supported by your browser.
  Maximum width of your logo
  Logo margin
  
  Effect applied on logo on hover
  - Margin of the Logo on Phones
    Logo margin on phones
- Menu
  - Main Menu Settings
    
    Solid menu background color
    
    Gradient menu background color
    Alignment of items in the menu
    Dropdown menu content and visibility
    Layout of the submenu content
    Width of the dropdown menu
    Background Pattern of Menu
    Background pattern of main menu
    Custom Background Image of Menu
    Custom background image of menu
    Select your image Upload
    Maximum file size: 750KB
    Remove image
    This upload is not supported by your browser.
    Menu background repeating
    Fixed menu background
    Menu background size
    Menu background position
    Menu Colors for Phones
    
    Menu title color
    
    Menu title color on hover
    
    Menu background color
    
    Menu background color on hover
  - Single Menu Item Settings
    
    Menu item text color
    
    Menu item text color on hover
    
    Menu item background color
    
    Menu item background color on hover
    Space between menu items
    Background Pattern of Single Item
    Background pattern of dropdown menu
    Custom Background of Single Item
    Custom background image of menu item
    Select your image Upload
    Maximum file size: 750KB
    Remove image
    This upload is not supported by your browser.
    Menu item background repeating
    Menu item menu background
    Menu item background size
    Menu item background position
    Padding
    Padding of the menu items
    
    Curved Corners
    Menu item background radius
    
    Visible only if you set "menu background color
    Border
    Border thickness
    
    Style of the border
    
    Border
    Shadow
    Shadow of each menu item
    Single Menu Item Colors for Phones
    
    Menu item text color
    
    Menu item text color on hover
    
    Menu item background color
    
    Menu item background color on hover
  - Dropdown Menu Settings
    
    Dropdown menu background color
    
    Dropdown menu title color
    
    Dropdown menu title color on hover
    
    Dropdown menu text color
    
    Dropdown menu text color on hover
    Shadow of the dropdown menu
    Indent of the subcategories in the dropdown menu
    Bottom padding of the subcategories in the dropdown menu
    Background Pattern of Dropdown Menu
    Background pattern of dropdown menu
    Custom Background Image of Dropdown Menu
    Custom buttom background image
    Select your image Upload
    Maximum file size: 750KB
    Remove image
    This upload is not supported by your browser.
    Dropdown menu background repeating
    Fixed dropdown menu background
    Dropdown menu background size
    Dropdown menu background position
    Dropdown Menu on Phones
    
    Dropdown menu background color
    
    Dropdown menu title color
    
    Dropdown menu title color on hover
    
    Dropdown menu sub-subcategory color
    
    Dropdown menu sub-subcategory color on hover
- Search
  
  Search background
  
  Default text color in the search field
  
  Search icon in the search field
  
  Text color in the search field
  
  Background on focus
  
  Search border on focus
  Shadow of the search
  Radius of the search
Footer
Solid background color of the footer

Gradient background color of the footer
- Footer Background Pattern
  Footer pattern
- Custom Footer Background Image
  Custom footer image
  Select your image Upload
  Maximum file size: 750KB
  Remove image
  This upload is not supported by your browser.
  Footer background repeating
  Fixed footer background
  Footer background size
  Footer background position
- Margin and Padding
  Footer margin
  
  Footer padding
- Curved Corners
  Radius of the footer
- Border
  Border thickness
  
  Style of the border
- Shadow
  Shadow of the footer
You don't have to set the colors below; only in case you want to override a specific part.
- Text color
  
  Title color
  
  Link color
  
  Link color on hover
  
  Text color
  
  Text divider
- Newsletter
  
  Form background
  
  Button color
  
  Button hover color
  
  Text color in Form
  
  Form background on focus
  Labels
  
  Main newsletter label
  Shadow of the newsletter input
- Social Block
  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".
  
  Facebook - background (#3b5998)
  
  Facebook - icon color
  
  Facebook - icon color on hover
  
  Facebook - background on hover
  
  Twitter - background (#0084b4)
  
  Twitter - icon color
  
  Twitter - icon color on hover
  
  Twitter - background on hover
  
  RSS - background (#ff6600)
  
  RSS - icon color
  
  RSS - icon color on hover
  
  RSS - background on hover
  
  Youtube - background (#bb0000)
  
  Youtube - icon color
  
  Youtube - icon color on hover
  
  Youtube - background on hover
  
  Goole Plus - background (#d34836)
  
  Goole Plus - icon color
  
  Goole Plus - icon color on hover
  
  Goole Plus - background on hover
  
  Pinterest - background (#c92228)
  
  Pinterest - icon color
  
  Pinterest - icon color on hover
  
  Pinterest - background on hover
  
  Vimeo - background (#162221)
  
  Vimeo - icon color
  
  Vimeo - icon color on hover
  
  Vimeo - background on hover
  
  Instagram - background (#125688)
  
  Instagram - icon color
  
  Instagram - icon color on hover
  
  Instagram - background on hover
  Radius of the social icons
  
  Shadow
  Effect applied on social block icons on hover
  Size of the social block icons
- Copyright
  Custom copyright:
  © 2017 Your eshop. All rights reserved.
  Alignment
  You can also edit the copyright manually in /your_theme/copyright.tpl
Typography and Alignment
- General Font and Alignment
  Main font of the eshop
  General size of textsDefault value: 1.0
  Font of main titles
  Font size in of main titles (h1)Default value: 1.37
  Font size in of smaller titles (h2)For example the titles of blog posts. Default value: 1.25
  Font size in of small titles (h3)Default value: 1.12
- Menu Font
  Font in the menu
  Capitalization of the menu items
  Font size in the menuDefault value: 1.0
  Font size of the titles in the dropdown menu (sub-categories)Default value: 0.88
  Font size of the sub-items in the dropdown menu (sub-sub-categories)Default value: 0.88
  - Menu on Phones
    Size of the submenu arrow icons on phones
    Font size of the "menu" titleDefault value: 1.125
    Font size of the main categoriesDefault value: 1.125
    Font size of the titles in the dropdown menu (sub-categories)Default value: 0.88
    Font size of the sub-items in the dropdown menu (sub-sub-categories)Default value: 0.88
- Product Box Font
  Weight of the product title
  Font size of the names in products boxesDefault value: 0.86
  Font size of the prices in product boxesDefault value: 1.0
  Font size of "Add to cart" buttonDefault value: 1.0
- Breadcrumb Navigation Font
  Font size of the breadcrumb navigationDefault value: 1
- Product Page Font
  Capitalization of the product title
  Font size of the product titleDefault value: 1.93
  Font size of the product priceDefault value: 1.81
- Button Font
  Capitalization of the buttons
- Footer Font
  Font of the titles
  Capitalization of the titles in footer
  Size of the titlesDefault value: 1.125
Advanced Settings
Animations, Details, Overrides
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.
- Style of Boxes and Tabs
  Shadow of boxes and tabs
  Radius of boxes and tabs
  
  Border thickness
  Style of the border
  
  Border color
- Style and Animation of Product Boxes
  Display "Add to cart" button
  Display "More" button
  Display "Quick View" icon on tablets
  Display "Quick View" button on big screens
  Display "Variants" (in a category view)
  Display "In stock" (in a category view)
  Static Shadow of Product Boxes
  Effect applied on product boxes on hover Deactivate the static shadow first
  - Border
    Border thickness
    
    Style of the border
    
    Border color
  - New Badge
    Alignment
  - "Add to cart" Button
    
    Button background
    
    Button color
    
    Button background on hover
    
    Button color on hover
    Padding of Add to Cart Button
  - "More" Button
    
    Button background
    
    Button color
    
    Button background on hover
    
    Button color on hover
    Padding of More Button
- Style and Background of Buttons
  Shadow of buttons
  Radius of buttons
  - Background Pattern
    Button pattern
  - Custom Background Image
    Custom buttom background image
    Select your image Upload
    Maximum file size: 750KB
    Remove image
    This upload is not supported by your browser.
- Style of Form Inputs
  
  Border color of inputs
  Border of the search in the header
  Border of inputs in the content area
  Border of the inputs in the footer
  Style of the border of inputs
  Shadow of form inputs
  Radius of form inputs
  
  Width of the border when the input field is active
- Style of Social Share Buttons
  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"
  
  Facebook - background (#3b5998)
  
  Facebook - icon color
  
  Facebook - icon color on hover
  
  Twitter - background (#0084b4)
  
  Twitter - icon color
  
  Twitter - icon color on hover
  
  Google Plus - background (#d34836)
  
  Google Plus - icon color
  
  Google Plus - icon color on hover
  
  Pinterest - background (#c92228)
  
  Pinterest - icon color
  
  Pinterest - icon color on hover
  Size of the social share icons
  Radius of the social share icons
  
  Shadow of the social share icons
  Effect applied on social share icons on hover
- Style of Breadcrumb Navigation
  Link color
  
  Link color on hover
  
  Color of the dividers
  
  Background color
  
  Gradient background
  - Breadcrumb Background Pattern
    Background pattern
  - Custom Breadcrumb Background Image
    Breadcrumb background image
    Select your image Upload
    Maximum file size: 750KB
    Remove image
    This upload is not supported by your browser.
    Breadcrumb background repeating
    Fixed breadcrumb background
    Breadcrumb background size
    Breadcrumb background position
  - Margin and Padding
    Breadcrumb padding
    
    Breadcrumb margin
  - Curved Corners
    Radius of the breadcrumb box
  - Border
    Border thickness
    
    Style of the border
    
    Border
  - Shadow
    Shadow of the breadcrumb
- Style of Sidebar
  Margin around the sidebar
  Padding in the sidebar
  
  Height of the divider between the lines
  Size of the gaps between the blocks in the sidebar
- Style of Alerts
  Alert success
  
  Background color of a "success" alert
  
  Border color of a "success" alert
  
  Text color of a "success" alert
  
  Link color of a "success" alert
  
  Link color of a "success" alert on hover
  Alert warning
  
  Background color of a "warning / danger" alert
  
  Border color of a "warning / danger" alert
  
  Text color of a "warning / danger" alert
  
  Link color of a "warning / danger" alert
  
  Link color of a "warning / danger" alert on hover
  Shadow of the alerts
  Curved corners
- Override Specific Pages
- Style of Category view
  Display category description on phones
  Display category description
  Display "Sort by"
  Display pagination
  Display subcategories
  - Style of Subcategories (if activated)
    Display subcategory images
    Width of the subcategory imagesDefault value: 145px.
    Static shadow of subcategory boxes
    Effect applied on subcategory boxes on hover Deactivate the static shadow first
  - Style of List View
    
    Vertical divider in list view
    
    Horizontal divider in list view
    Border thickness of the vertical divider
    Border thickness of the vertical divider
- Style of Quick View
  To start editing these settings, open quick view of any product
  
  Solid background color
  
  Gradient background color
  - Background Pattern
    Background pattern
  - Custom Background Image
    Custom background image of the quickview
    Select your image Upload
    Maximum file size: 750KB
    Remove image
    This upload is not supported by your browser.
    Background repeating
    Fixed background
    Background size
    Background position
- Style of Product View
  
  Border of the product thumbnails
  Shadow of the product image
  Size of product thumbnails
  Size of color variants
  Border thickness of product thumbnails
  Display Quantity
  Display Reference number right under the pricing
  Display Condition right under the pricing
- Style of My Account
  Static Shadow of My account boxes
  Effect applied on My account boxes on hover
  Curved corners
  
  Background color
  
  Link color
  
  Background color on hover
  
  Link color on hover
- Style of Tables
  Border thickness
  Shadow
Settings of Modules
- Image Slider Module
  The slider image you upload will NOT be part of the theme ZIP.
  Layout
  Image Slider image
  Select your image Upload
  This image will not be part of the theme ZIP. Maximum file size: 750KB
  Remove image
  This upload is not supported by your browser.
  Maximum height of the image slider
  Maximum width of the text in the slider
  Shadow
  Curved corners
  
  Font
  
  Title color
  
  Text color
  
  Button background
  
  Button color
  
  Button background on hover
  
  Button color on hover
  
  Color of the arrows
  
  Color of the arrows on hover
  - Border
    Border
    
    Style of the border
    
    Border color
Custom Code
Custom code:
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.

Loading, just a moment...

Download your theme

Name of Your Theme

Your Prestashop version

Continue editing

Save Your Theme

Do you wish to continue with this theme later? Save this link and access your theme from other device or computer.

More Info

Connect with us on Facebook

How do you install a new theme?

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!

Do you have any question?

Send us a message through the chat at the bottom right corner of the screen.

Prestashop 1.6

We are loading the editor, just a moment.

Download your theme

Save Your Theme

More Info