#prestashop tutorial

Dive into the world of PrestaShop like a pro! Our tutorial unveils the secrets to creating captivating e-commerce stores. Elevate your online retail game today. 🛍️💡

How to write a strong SEO Title Tag that Google will love on your Prestashop website? In my previous Prestashop Tutorial on Prestashop SEO Made Simple : A Step-by-Step guide, i said that the title should be succinct between 5 and 10 words, roughly 60 characters.

Yesterday when i worked on a Prestashop 1.7 website, i saw that Prestashop suggest you to write a title tag with max 70 characters.

What is the correct number? Because title tags are one of the essential elements, and even a slight change in the meta title of your page can bring a significant shift in your organic rankings, so, we need to find the correct number.

The title tag tells search crawlers what your page is exactly about, it is the first content crawled on your page, so writing perfect title tag is extremely important.

Take a look into the picture above. Here we searched "remove Powered by Prestashop from email".

#1 title has more than 65 characters, and #2 title has 63 characters ( it's me :D - Please don't tell me about the ranking ^^ : the first result from Prestashop.

I just want to say that the #1 title has been truncated.). As i said, the length should be maxed 60 characters (including spaces), however, it is not a character length but actually, it is a pixel length which is considered by Google (600 pixels).

Hence character length for different languages can be different.

Stick to those, and your title on Prestashop website will generally not be truncated, if they’re relevant and you’re not doing anything crazy with special characters.

According to Moz community, the best title length is 50-60 characters, but in a blog post on Bigleap, Adam Fifield said that you can use max 70 characters.

Ok, I admit that i don't have a better position on ranking than someone :3, but at least, my title not be truncated. What is your choice? For me, 60 - 65 characters is the best option on Prestashop title length. No more.

Few months ago i wrote an article to share about the way to show categories images on Prestashop Menu.

Then @Psdesigner and @Damien Belgacig asked me about the way to put subcategories images instead of main category's image. Sorry 2 guys, Disqus didn't tell me about your comments.

Well, as my previous article, if you edit ps_mainmenu template file (ps_mainmenu.tpl) and put the source code as my suggest, all categories images will be showed on Prestashop Menu. In case you only want to allow subcategories images, we need to make some changes. (This tutorial is available on Prestashop 1.7)

First, make sure you uploaded subcategories images

Edit your subcategories and upload menu's image as my previous article. You can't show the images if you don't have at least one, right?

Only allow subcategories images

Ok, this is the most important step. You need to make sure the main category is the root menu, and the categories are the submenus. I don't have time to play with Prestashop default menu so i don't know can we setup a subcategory as a root menu or not (we have SOO Magic Menu - do you remember? We love it so much and hope people use it everyday :D).

Re-open your-website/themes/classic/modules/ps_mainmenu/ps_mainmenu.tpl file and find the code around line 27. This is what we got:

<div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">                {menu nodes=$node.children depth=$node.depth parent=$node}                {if $node.image_urls}                    {foreach from=$node.image_urls item=image_url}                        <img src="/{$image_url}" title="" alt="" />                    {/foreach}                {/if} </div>

Take a look into this code: {foreach from=$node.image_urls item=image_url}. It will shows all images. We need to interactive with the child menus (subcategories) and tell them to release the images. Change all above to:

<div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">                {menu nodes=$node.children depth=$node.depth parent=$node}                {if $node.image_urls}                    {foreach from=$node.children depth item=mychild}                          {foreach from=$mychild.image_urls item=image_url}                                <img src="/{$image_url}" title="" alt="" />                          {/foreach}                    {/foreach}                {/if} </div>

Sometime you want to display flags in the language switcher in your Prestashop theme. Our clients also asked me how to show the flags and sometime wanna display the flags from dropdown to inline.

All you need is open this file : /your-website/themes/classic/modules/ps_languageselector/ps_languageselector.tpl using your favorite code editor ( my tool: text editor :D ) and change it as you wish.

Language Switcher with flags

Take a look into the file. In both Prestashop 1.6 & Prestashop 1.7, you will find something like that:

<li {if $language.id_lang == $current_language.id_lang} class="current" {/if}>            <a href="/{url entity='language' id=$language.id_lang}" class="dropdown-item">                    {$language.name_simple}           </a> </li>

Ok, now we need to add the flag picture. Change it to:

<li {if $language.id_lang == $current_language.id_lang} class="current" {/if}>            <a href="/{url entity='language' id=$language.id_lang}" class="dropdown-item">                 <img src="/img/l/{$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />                 {$language.name_simple}            </a> </li>

You might want to show the flag on current language. Find this code:

{$current_language.name_simple}

Change it to:

<img src="/img/l/{$current_language.id_lang}.jpg" alt="{$current_language.iso_code}" width="16" height="11" /> {$current_language.name_simple}

The language pictures are located in /your-website/img/l/ folder. Save the changes and enjoy the first step!

Display inline

In case you want to show the flags inline, open above file, remove everything and past this source code into it :

<span id="language-selector-label" class="hidden-md-up">{l s='Language:' d='Shop.Theme.Global'} {foreach from=$languages item=language}            <a href="/{url entity='language' id=$language.id_lang}" style="margin-right:3px; margin-top: .9375rem;">                   <img src="/img/l/{$language.id_lang}.jpg" style="{if $language.id_lang == $current_language.id_lang}border:3px solid rgba(0, 0, 0, 0.71);{else}border:3px solid #fff;{/if}" alt="{$language.iso_code}" width="22" height="17" />           </a> {/foreach}

As you can see, this is a basic and very simple Prestashop tutorial. The most important thing is to make sure your clients know where they are seeking.

If you're a developer/designer/freelancer, you really don't want to keep "Theme Catalog" menu item in PrestaShop 1.7 back office. It is available under "Design" section in website back office.

There your clients can find a catalog of official addons marketplace themes. It's there for advertising purposes only and it is there totally useless.

This Prestashop tutorial helps you to remove the menu easily without any trouble.

Remove Prestashop Theme Catalog via your database in Prestashop 1.7

This menu was deployed when you install the website from Prestashop package. The simple way is access your database and remove the menu from ps_tab table.

Step 1: Use phpMysql or other tools that allow to access and manage your database. Once inside, select (click on) the correct database for your PrestaShop 1.7 application from the list of databases on the left hand sidebar.

Step 2: You will then see a list of the database tables in the left sidebar. Scroll down and select the one named ps_tab.

Sometime, your PrestaShop database prefix might not begin with ps_.

Step 3: This opens the table data information. Find Admin Themes Catalog from the list of data rows and click on the Delete button on the right side of that particular row to remove this menu from your Back Office.

I've received many questions from clients about how to remove "Powered by Prestashop" from emails. Well, your ecommerce site is (almost) running, but you don't like the way your emails look, especially the bottom part "My site powered by Prestashop" that make you look like an amateur.

Maybe you would like to display there your own message for your customers or remove it for good. On this Prestashop Tutorial, i will show you how to remove it or display your own text.

Step-by-step tutorial

Default emails are sent to a customer after (s)he creates an account on the website, subscribes to a newsletter, makes a purchase, in case of payment receiving, confirmation that the order has been shipped and some other cases.

To edit default email template in Prestashop 1.7, just log in and navigate in Improve section to : International => Translations

Select the following positions in drop-down menus and click Modify button:

Type of translation: Email Translations.

Select the type of email content: Body.

Select your theme: Core (no theme selected).

Select your language: Choose the required language (in our case it’s English).

You also want to edit the Installed modules translations to change text and remove the “Powered by Prestashop” option.

In Prestashop 1.6, you need to edit Module email template and Core email template. For example, click ‘Core Emails’ to open and select ‘order_conf’ from the list in order to edit the Order Confirmation Email.

It's very easy to create a customer group discount on Prestashop. For example, you want to set a discount for those users that are registered on your site. By default, you can do it easily. But how to create and apply a limited-time offer for groups of customers?

Actually, this ecommerce platform enables you to give your customers certain privileges, by assigning them to groups. You can create as many customer groups as needed, and assign a customer to as many groups as you like.

But your customers need a limited time offer, not a non-stop discount!. That's why we need to change something to fit our goals on this Prestashop tutorial.

Why you should offer discounts

Customers are inherently drawn towards items on sale. Given two products that are practically similar in terms of features, consumers would almost always choose the item that costs less. This business strategy as a short term and occasional tactic to boost sales can do more good than harm to small businesses.

There are 5 reasons why a ecommerce owner should not be afraid of offering discounts:

Increased traffic - Offering discounts for a limited time will attract customers into your store and most likely draw them into buying these items right away.

Increased sales - More traffic usually comes with increased sales. Customers are likely to walk around your store and see other items that may not be discounted but are willing to buy those because they have already saved on other items on sale.

Sales targets are met - Given the seasonal fluctuations in consumer buying behavior, you can curb lean seasons by offering discounts. This way, you are able to meet your goals within every period regardless of your forecasts show.

Stronger client relationships - Giving your customers great value for good quality products can greatly improve their loyalty to your store.

Monetized Inventory - Discounting items allows you to dispose of old inventory and even items that you don’t plan on selling anymore.

Limited-Time Offers

Don't call yourself a small business owner. When call someone a small business owner you're immediately saying, “Wow, he's a boy". You have your dream and you know that limited-time offers are a powerful marketing tool.

Consumers have a burning desire to jump on the exclusivity bandwagon and get their hands on something special before they miss out. Offer limited-time discount promotions on your Prestashop sites is a good idea.

Create and apply a discout for groups of customers on limited-time

First, you need to install Prestashop Discount Rules module

Create your Discount Rules

Are you a newbie of Prestashop SEO? Follow these steps and your ecommerce site can have a higher Google rank! We won't say about the advanced technical. Here are 3 simple steps and very easy to use, that will improve your Search Engine Ranking on next week.

1. Setup & optimize the Urls and Title / Meta description tags.

2. Redirect old urls and broken links.

3. Improve website architecture.

No wonder millions of people Google the term “SEO” each month.

Step 1: Setup & optimize the Urls and Tags

It's an important step. Search engines reward urls that are user friendly, which means they are easy to read. This ecommerce platform default doesn't have search engine friendly URLs enabled but enabling this feature is actually quite easy.

First, enabling SEO URLs.

Then remove ids or number.

Remove Duplicate urls.

Use Hyphens, not Underscores.

Top content on top folder.

Use the keywords on urls.

I wrote an article to explain exactly how to do it.

Optimize the title tags - Title tag is the title of the page. This tag provides important information for the site visitor but also for the search engines and should be written so as to encourage future visitors to click on your link. Make sure you optimize each page of your site with its own title. The title should be succinct (between 5 and 10 words, roughly 60 characters) and use the keywords for your business activity.

How long should your meta description be? - Back in spring of 2015, Google search snippets seemed to be breaking the 155-character limit, but these cases were fairly rare. At the end of November of 2017, some tools reported a sizable jump in the average search snippet length (to around 230 characters). My research suggests that many snippets are exceeding 300 characters, and going into 2018 i recommend a new meta description limit of 300 characters.

Step 2: Redirect old urls and broken links.

Redirects from the old site to the new is one of the most important factors for the user experience. And sometime, an old url on your website has been removed - you need to tell your customers and Google bot about this change.

In fact, if your website has been online for quite a while, it’s probably earned a lot of backlinks. Lots of backlinks mean that the page will rank higher. But on a new eCommerce webiste with the new link structure, the old one disappeared, breaking all of those backlinks. As a result, it will probably rank far lower than the old page did.

How to do it? Basically, you need to edit your .htaccess and add 301 redirects as your requirement. Take a look into this screenshot:

But remember the urls and edit .htaccess everyday is hard work. .htaccess is working only on Apache server. Nginx or something else is a big problem. Use SEO Redirect Premium module and read my article redirects affect SEO to explain how it works. Remember: Always redirect the old, removed and control 404 pages.

Redirects 301, 302, 303 & manage 404 errors

Step 3: Improve website architecture

A good website architecture leads to a great experience for the users when they navigates your page. It focuses on things like fast loading times, a safe connection, and a mobile-friendly design.

Ideally, you’ll map out the architecture of your site before even buying the domain. That allows you to really get into the head of your user and reverse-engineer your way to a great user experience (UX).

You also need to optimize a few things for a great “search engine experience.” The more accessible your website is to Google, the better it will rank.

Easy to crawl - Depending on how well the Search Engine bots can index all the pages on your site, they’ll be more likely to report back to Google that you are a good result. The thicker the web of links between pages of your site, the easier it is for the spiders to reach all of them, giving the search engine a better understanding of site.

You can make this job easier for Google, Bing and Yandex by creating a sitemap with a simple module : Sweet Sitemap : Google + Yandex + Bing

Duplicate content – There are a lot of myths ranking around duplicate content and how it hurts your rankings. Actually, there is not much duplicate content on ecommerce sites. You just need to take care about duplicate urls.

Let me know if you have further things to add in this article. I would be more than happy to add a few things more to complete this article.