Best Tips To Customize A PrestaShop Website

Best Tips To Customize A PrestaShop Website

It is good to choose Prestashop to build your eCommerce website. However, how do you make your website unique and turn it attractive to your customers? Your customizations will make your eCommerce website different from the competitors’ platforms. You will find more traffic and more sales. You do not need special skills to customize your Prestashop website. Read this guide and start working on your site.

Steps for creating your PrestaShop website theme- Using your codes

Download the theme

Visit the site, https://github.com/PrestaShop/StarterTheme. You can find a range of starter themes. Choose one, which suits best for your business.

Edit your chosen theme

As you have already selected your theme, you can copy the files to paste them to the right theme directory. You need to start the theme customization process. It will present you with a unique theme for your website.
From the PrestaShop installation menu, you can find the option for creating custom theme folders. You can now paste your theme-related files.

Add a new name to your themes

Go to the Rename option for your theme folder, and then, you can choose Configuration. Based on your theme’s name, you can edit the folder name.

name: testtheme                     (Theme folder name)
display_name: Test Theme             (Theme display name)
version: 1.0.0
author:
name: "PrestaShop Team"
email: "pub@prestashop.com"
url: "http://www.prestashop.com"

meta:
compatibility:
from: 1.7.2.0
to: ~

Arrange your files

Your Theme folder has some files, and you have to delete them. In this step, you can adjust the CSS files based on your needs.

#header {
    text-align: center;
}
.header-nav {
    background-color:#333;
    margin-bottom: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.header-nav > * {
    vertical-align: middle;
}
.cart-preview .body {
    padding: 12px;
    font-size: 14px;
}
.menu ul {
    margin: 0;
    padding: 0;
}
.header-top {
    margin-top: 50px;
    margin-bottom: 20px;
    background:#222;
    text-align: center;
}
.menu {
    float: none;
}
.menu > ul > li > a {
    background-color:#333;
}
.menu a, .menu a:visited {
    text-decoration: none;
    color:#FFF;
    font-size: 1em;
    padding: 10px 15px;
    display: block;
    background:#333;
}
.header-top::after {
    clear: both;
    content: none;
 }
.product-miniature {
    max-width: 350px;
    text-align: center;
    }
a.add-to-cart, a.add-to-cart:hover {
    color:#FFF;
    padding: 8px 15px;
    background-color:#222;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}
.price {
    color:#F0544A;
    font-size: 18px;
    font-weight: bold;
}
.variant-links, .product-price-and-shipping {
    margin: 10px 0;
}
#footer {
    background:#F3F3F3;
    color:#222;
    text-align: center;
    padding: 30px;
    margin-top: 50px;
}

Embed Custom CSS and JavaScript

The head part of the theme is editable. You may also insert the JavaScript with a few steps. From the Theme folder, you can find templates. Then, you need to choose head.tpl.

{block name='stylesheets'}
{include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
{/block}

{block name='javascript_head'}
{include file="_partials/javascript.tpl" javascript=$javascript.head vars=$js_custom_vars}
{/block}

Dealing with the structure of PrestaShop templates

Prestashop is highly innovative, and you will find a distinctive template structure. Thus, you must create the template files under the folder.

Edit the Home Page HTML design

You can modify the original Home Page design by accessing the PrestaShop folder. You need to select your Theme folder and enter layout-both-columns.tpl.
You will find the HTML code from the file. When you think of editing the content, the file is important. However, you may do these adjustments at any time.
The sidebar and other modules are also modifiable based on your needs. You may deal with templates and modules CSS to personalize the theme.
The theme is now ready for your website. You can make further customizations and insert custom codes into your CSS files. However, you need to have JavaScript, HTML, and CSS knowledge to do it.

01.Homepage 2 14

Use TemplateToaster for theme creation

To make your PrestaShop theme, you can use the software, TemplateToaster. With a few easy steps, you may do it.

  • Select the platform
select prestashop cms templatetoaster

Install the software, TemplateToaster and you have to hit the option- PrestaShop. After choosing the CMS platform, you will find a window. Go to the designing option from there. When you like to edit the pre-designed theme, you have to choose the option carefully.

  • Choose visual elements

You will find options for choosing typography and color. You will get a concept of the interface of your website theme. Then, you have to decide on the PrestaShop website theme. Fluid and Fixed- these are available options for you. You may design an attractive menu by selecting the background color.

set elements templatetoaster 1
  • Design the slideshow, footer, and content

The slideshow design for your website is adjustable based on your preference. You can choose the Content Tab to manage the content. Then, you have to create the footer using different options, like effects, images, social icons, and typography. Thus, you can customize the footer design. The footer of your site helps you to display functionalities and widgets. Moreover, social sharing icons are important to let e-shoppers share any product link with their families and friends.
Other things that you can customize for your website-

Design the slideshow, footer, and content
  • Top-side banner

It is a thin banner that you can display on your page to declare your special discounts and offers.

  • CMS icons

To reveal additional PrestaShop store information, like refund policies and payment options, you may use the CMS icons.

CMS icons

These are some steps for customizing your PrestaShop website. Customized functionalities added to your website will help you in growing your business. You can draw more customers to your eCommerce website.

Previous

How to Install Prestashop Theme for Your Ecommerce

September 13, 2021
Next

How to create an online shop with PrestaShop

September 13, 2021

Comments are closed.