The Solidarity E-commerce initiative by Friends Of Prestashop is an idea of Jeff Viguier, of the Creabilis agency in Toulouse, offering during the confinement to set up free Prestashop shops for merchants offering basic products, and seeing their turnover reduced to “skin of grief”.

This more than commendable initiative – in which we have participated a little, in particular by offering our natural referencing module Ever SEO for Prestashop – therefore consists in having a Prestashop expert in contact, who will set up a store containing your product catalog for free, so that the traders can still continue to sell, and dare I say “thus limit the breakage”.

We have therefore decided to participate – on the initiative of Houria – in the creation of a shop. On the Friends Of Prestashop site, merchants can leave their request, which is already analyzed to verify its relevance, and then the requests are passed on by region or postal code.

The host 772424 offers hosting for the duration of the confinement, many modules are available to help both in the creation of these Prestashop stores, and the skills of many experts are made available, free of charge.

As most of us are trainers, we immediately had a very busy schedule, which grew heavier with the confinement period. In addition, we have opened Discord servers to help students and unemployed people (partially or not) in order to train them even more, for free, on the use of Prestashop. It was thus complicated for us to create online stores for the Solidarity E-commerce initiative, since we were helping both merchants to use our free modules for Prestashop , and with the training we gave in more to help people in difficulty.

Despite this, Houria offered to make some boutiques anyway. As our schedule was very busy, we only had Sundays to do them, with constraints to which we were not used. A first store was set up in a few hours, and on the strength of our first attempt, we decided to create a second one.

The “constraints” were as follows:

• no access to FTP (therefore no code modification): this is explained by the fact that the person managing accommodation at 772424 was not going to spend a third of his days creating access for the very many shops created, namely the very patient Julien Mutzenhardt of Web RD Informatique
• no paid module apart from those offered by the Friends Of Prestashop team on the initiative of Solidarity E-commerce
• Default theme , or the excellent PrestaRocket theme which is extraordinarily boosted in SEO
• Huge time constraint , since in creation, we only had Sunday, and again, I will specify by speaking rather of a simple afternoon (and hello by the way, the extended week …) to put everything in place. once the data has been successfully recovered

So we organized ourselves with Houria. A good working procedure is the guarantee of an effective creation, especially when it comes to working in pairs. The roles were therefore as follows:

• Houria : project manager, takes care of the liaison with the client, manages the entire catalog, source of proposals to support the client, HTML / CSS / Bootstrap webdesign and editorial
• Cyril : HTML / CSS / Bootstrap webdesign, installation and configuration of modules

In order to help you follow the steps according to the person speaking, we illustrate our content with our respective little avatars. You will thus know if Houria is explaining the current step, or if it is Cyril who takes control of the content!

As usual, the longest, the most tedious was the data recovery, because it requires a lot of time and exchange to have a shop corresponding to the customer’s needs. Here, the subject was a restaurant in Blagnac, the Black Angus.

Here is, in detail, how it was possible to put online a Prestashop store on the initiative of Friends Of Prestashop . Being HTML / CSS / Bootstrap trainers, we used our skills to set up the store, these skills are therefore totally required to create a Prestashop store by modifying the Classic theme only with CSS , and in order to add HTML blocks using the Bootstrap grid is present by default.

Information retrieval

And so it’s me Cyril who starts the creation of a Prestashop store!

Often, traders already have information online. This is not always the case, but on the first store we created, we had a Facebook page containing some media, including the logo.

In the case of the Black Angus restaurant, a huge stroke of luck!The restaurant already had a WordPress with a little content (images in particular, but especially the logo that interested us so much).

We therefore browsed their WordPress site in order to collect as much information as possible. It is better to have too much information than not enough, so a folder has been created with as many images and text as possible.

A simple document in txt format was then drafted, as we would quickly need company and contact information. Indeed, when configuring a Prestashop store, it is necessary to specify the email addresses, telephone number and postal address of the store, especially since in this case, it is a question of asking customers to recover their order. directly in the restaurant.

As we suspected that we were going to modify the CSS code of the theme, we created a style.css file and an index.html file, simply to have the tools of our code editors (Sublime Text, Atom, Visual Studio Code or other) to just copy and paste our changes in the administration of the Prestashop store.

The client’s file on our computers therefore contained 3 files:

• Images retrieved from the WordPress site
• Customer information
• The HTML code and the CSS code that will be copied and pasted

Houria then took care of making contact with the “customer” (can we call him that for a free initiative ?) In order to retrieve the product catalog according to the structure offered by Prestashop, and so that the latter is not too complex to manage, neither for us nor for the client. It should be noted that the customer’s responsiveness weighed heavily in the balance, as did the support that Houria was able to provide regularly, by email or by telephone, after her training days, and also on the famous Sunday.

Configuration of the Prestashop store

By dint of doing it, we have come to call this step the “standard process”

When I wanted to perform this step, I realized that Houria had already gone through all the settings of the store, so I simply looked at some tabs in the administration of Prestashop to see all that it had put in place. Here are the steps of this “standard process”. Somehow, if we had exchanged better (and yet God knows how much we exchange regularly!), We would have been more efficient…. Let’s learn from this oversight now!

The Prestashop cache

By default, when a Prestashop store is installed, the cache is active and does not allow recompiling of files. These settings are found in the “ Advanced parameters ” tab then “  Performance ”. In order to work calmly, you must therefore immediately change this and pass the cache setting.

A little further down, it is preferable to temporarily deactivate Concatenation, Compression and Caching , the time to set up the webdesign.

Without these settings (which will have to be changed when the store is definitely online) it will be very complicated to analyze the CSS code used for the web design of the theme (here the Classic theme). These settings should have no secrets for you, especially if you have read our tutorial on the cache in Prestashop .

The general settings of Prestashop

Now that the store is slowed down as much as possible with the change in performance, it will be necessary to globally configure Prestashop. To do this, you have to go to the “ Store settings ” tab then “  General settings ”. Like any online store, it is more than recommended to set up HTTPS, or “SSL certificate”. Here, the host 772424 has graciously set them up, even for free .

As we suspected that customers – in order to come and collect their order – might need to locate the restaurant, so we knew in advance that we would not only have to display the restaurant’s address, but also that it would be wise to insert a Google Map iframe everywhere on the store (free therefore, we will see how to add this during the step of creating HTML blocks with Bootstrap).

As this is a restaurant , the other settings were therefore rather easy to deduce, since it is a question here of not displaying any brands or suppliers, and certainly not a multistore.

We did not choose to display the best sellers, because when starting a store, there are none.

Once these settings were saved, it was therefore necessary to switch the store to maintenance mode, so as to work calmly, without anyone being able to view the Prestashop, unless they were authorized to do so by their IP address.

And once the maintenance mode of Prestashop, this Prestashop tab is now definitely in place, let’s move on to the next ones. The settings and utility of the maintenance mode in Prestashop have also been the subject of another Prestashop tutorial , detailing a little more its usefulness and operation.

Besides, did you know that it is possible to not set up the debug mode but only for the IP addresses included in the maintenance mode of Prestashop ?

Prestashop order settings

Here, the settings have remained fairly “basic” if I can put it that way. Let’s not forget that this is a physical restaurant . There is therefore no delivery, since it is up to the customer to collect his order from day to day.

Note that indeed, the recalculation of shipping costs after modification of the order can be passed to “No”, since these shipping costs are free, but this will therefore have no impact on the customer’s basket.

As it is about catering, there is no need to offer gift packaging, and no need to offer recycled packaging either.

Prestashop product settings

So here we have a catalog featuring food, be it drinks or dishes.

Note that we have increased the size of the summary produced, if in doubt. This will allow us later not to encounter too many worries for the editorial of the products, especially since we will try to generate it.

All stock settings have been deactivated, until the customer can manage it, but for the time being, the store is not even “online”, and the customer sees his stock. remain without being elapsed, you might as well let him have his hand over it. In addition, in order to carry out order tests serenely later, it is wise for the moment not to manage the stock.

On the other hand, and in order for the pagination to be in place and as compatible with search engine criteria as possible, we have increased the number of products per page to 64, so as to reduce the number of clicks as much as possible so that the visitor finds the product he is looking for.

In this regard, more and more SEOs recommend reducing pagination, so that search engines can immediately visit the maximum number of products, such as Internet users, and with a minimum of clicks.

Come on, let’s save and move on to customer settings.

Prestashop customer settings

Here, very simple. It’s just a matter of checking a box or two, and making customer information as easy as possible.

Usually, we are not very favorable to asking customers for the date of birth, but it turns out that some banking platforms ask for it very specifically to validate an order paid by credit card. Unfortunately, the box therefore remains checked.

By the way, the date of birth is unfortunately no longer required under Prestashop 1.7. On this store, without FTP access, it was not possible to modify this, but we had already made a modification by following the excellent tutorial of our friend Webbax . Here, for lack of control over the overrides, no way to correct that.

Once these settings are in place (and there is no need here to manage customer groups or civility titles), let’s move on to “contacts”.

Contacts on Prestashop

What Prestashop calls “Contacts” are actually the store’s email addresses and contact details. This therefore takes place under the “Shop settings” tab then “Contact”.

As in the previous step, Houria was able to immediately retrieve all the necessary information (email address, postal address, telephone number, etc.), it was fairly quick to set up the settings.

Note that in the absence of a Google Map API key , and as there is only one “store”, you must take care to delete the default stores entered in Prestashop.

To display the location of the restaurant, we will instead use a simple Google Map iframe, as specified previously, and which we will see a little later, when adding HTML blocks with Bootstrap.

Default traffic & SEO in Prestashop

Often, far too often ignored! Here, the settings that we put in place are a bit of a mixture of what Olivier Clémence recommends on his excellent site , but also settings that we regularly put in place so that the administrators of Prestashop stores can have control without risk on the natural referencing of their e-commerce.

From the outset, you must change the title and the meta description of the store’s home page, by modifying the page named “index”.

Once this first adjustment has been made, let’s go a little further down the page, and immediately configure the rewritten URLs, as well as the 301 redirect (the 302 redirects are not useful since we are in maintenance mode).

Once these settings are in place, let’s set up the URL format a bit , to both simplify it and make it more secure for the merchant who will manage the store.

First of all, let’s remove unnecessary elements from product URLs, such as category and EAN13 (especially since the products here will be very simple, and without EAN13).

{id}{-:id_product_attribute}-{rewrite}.html

In this way, if a product changes category, this will neither generate a 404 error nor a redirection. Regarding the routes to suppliers, brands, pages and categories of pages, there are by default terms of no great interest in SEO, such as “supplier” or “content”. Here we have just put a single letter, in order to reduce the impact of these unnecessary terms in SEO. In this way, the route to the suppliers becomes this.

s/{id}-{rewrite}
The road to brands becomes this.

b/{id}-{rewrite}
And the route to the page categories therefore goes to this setting.

And we are done with Prestashop settings! Here, I could only see that Houria had quickly made the settings… In a way, if I had thought of asking her, I wouldn’t have wasted a few minutes just finding that she had already configured everything!

Setting up the catalog

With a good cleaning of the Prestashop demo data

First of all, let’s do some cleaning up! Indeed, the installation of a Prestashop comes with demo data, products, categories, customers and even fake orders to help you visualize your online store. We don’t need it then to do this cleaning, there is a very useful module (an extension of Prestashop)… The cleaner.

Go to the Customize menu / in the “Modules” tab and “Modules catalog” in the search field, enter “Cleaning” or “cleaner”. Install this module. Attention, this module allows you to delete all the data of your store, it is typically a module that it is better to uninstall and delete once your site is online, so as to avoid as much as possible any deletion of catalog and customers that would be irreversible. After all, the “problem is between the chair and the keyboard”.

Then click on configure and perform each of the operations in the order proposed so as to remove all default content, and optimize your database, nothing complicated here (and this is perhaps the greatest danger in production. , despite the warnings that Prestashop has the decency to display to you).

Now let’s move on to creating your product catalog

First of all, you have to think about the organization and structure of the online store.

Indeed, depending on what the e-merchant wishes to offer as products, a certain structure will have to be set up. Let me explain: for another shop we had a restaurateur who wanted to offer 3 menus as is the case with many restaurants:

• a menu: main course + dessert
• a menu: starter + main course
• a full menu: starter + main course + dessert

With for each menu 2 choices for starters, 2 for main courses and 2 for desserts. To offer these possibilities to users, we have opted for product variations.

We have therefore created our 3 attributes Starter – Main Course – Dessert in the Catalog / Attributes and characteristics menu in order to be able to retrieve them when creating our “menu” products.

Then, for each attribute we entered the choices offered by the restaurateur.

Then in Catalog / and in the Products tab we can add a new product which will be our full menu Starter + main course + dessert. We just have to check the Products with combinations box to see a new Variation tab appear in which we will be able to generate our different combinations.

Now let’s move on to creating more standard products like the Black Angus restaurant.

Finally, as Cyril mentioned above, what took us the most time and which is often the case when creating a site, is to retrieve the content!And for quality content, we have to include this step with an email requesting the precise information we need such as the name and number of categories, the number of products, descriptions, prices excluding tax and including tax… Fortunately, our contact was quick to send us the various elements and we were able to start creating the catalog.

You can also rely on the printed menu map which can serve as a basis.

The first step in creating categories:

In the restaurant menu there were 3 main categories:

• Breakfast boxes
• catering and
• the drinks.

To create them go to our catalog / category

We will add our first category by clicking on.

If you have subcategories you will then have to check the corresponding box in the parent category. You can also type your description by adding a few levels of titles for better SEO. Then do not forget to fill in the information of the Title and Meta description tags which are the keys for a better positioning in the SERP , making sure to place your main keywords at the beginning of the sentence. You can save and create your other categories.

The second step in product creation:

For our example we are going to create the product BURGER HOLIDAY INN + FRITES, still in our Catalog / Products and new product menu.

Our product is a standard product but you can also choose to create a product pack (by already having products online in your store) or even as on the Team’s site a dematerialized product.

Add photos of your product

And if I can give you some advice, don’t neglect this step, which will have a real impact on your users’ buying act.Choose here beautiful photos in situation that you will have taken yourself. Avoid as much as possible photos from image banks because they will not have the same impact! And frame your products well , an overall photo where you can see the entire product and if you want to focus on a particular point, add another zoomed photo!

Add price

Then add the price excluding VAT or including VAT and select your VAT rate.

Add category

And finally don’t forget to attach your product to the right category. It can belong to more than one category but you can only choose one main category.

Of course, these are the main settings here, and you can have more options if you go to each specific menu tab.

Add description

Also fill in the summary fields (which appears at the top right on your product sheet) and long description (which appears at the bottom right on the product sheet).

Again, do not hesitate to fill in the information about your product with title levels and keywords. Put yourself in your users’ shoes and ask yourself why they would buy your product over another. Also put links to your other products to provide internal networking.

Now that all the information is complete, do not forget to activate and register your product so that it appears on your online store, this is an error that I find regularly among my students.

Installation of modules

We must immediately have a look at the tools we will need to do webdesign and boost the store.

It is therefore important to have a goal- oriented view , in order to avoid unnecessary back and forths which would constitute a waste of time (which also joins the recovery of data, essential to make good progress).

Here we will therefore need the following modules:

• a module allowing you to insert CSS code as best you can from the store administration: available for free at SunnyToo
• A module allowing you to create unlimited HTML blocks: available for free on our store
• Our Prestashop natural referencing module , offered for any solidarity e-commerce initiative by Friends Of Prestashop
• And for customers to select the delivery time, specifying a message concerning the exceptional exit certificates: the option module in the order tunnel , according to the great tutorial by Hervé Hennes

First of all, there are two modules to uninstall by default on Prestashop, because they slow down your store and / or are of little use. So look in the list of installed modules for the ”  gamification  ” module and the ” welcome  ” module  to completely remove them from the store.

Then, as Prestashop inserts data by default on the store following its installation, Houria completely deleted the catalog previously in place, with the PS Cleaner module . This makes it possible to start again on a virgin store.

The Mail Alert module is not to be forgotten!This module will allow the merchant to receive by email any order placed on the store, which is why – once again – data retrieval is very important, and recording this information in a shared document is a significant time saver.
Regarding the new order tunnel step, I have set up these settings.

This module, which is very useful for order retrieval in this case, made it possible to perform this crucial step for order retrieval on the customer side.

CSS webdesign

Let’s see how to modify a default Prestashop theme to give it graphic consistency vis-à-vis a charter or a simple logo.

We start from nothing far enough. Here is the design of a default Prestashop store.

Armed with my internet browser, my HTML / CSS skills , and the style.css file in a corner of my computer, I attack the design change. I’m going to start with “global”, in order to change all that white that doesn’t match the colors of the restaurant.

As this is a “steak house”, imagine a slightly saloon atmosphere, and will also get the background image on their WordPress site. As I do not have access to FTP, to upload the image to the site, I have no choice: I must upload the background image from a page or a product , any one, I only need the url. I take this opportunity to upload all the media that I was able to recover before starting the store, you never know I might need it during a Bootstrap HTML integration.

I therefore note the URL of the image, which will serve me in the background.

Global CSS on the Classic theme

Since I want to give the site a bit of a “saloon” feel, I opt for a free font from Google Font, which simply provides me with the following CSS code:

@import url(‘https://fonts.googleapis.com/css2?family=Girassol&display=swap’);
And – now that I have both my background image, and my typeface – I start my CSS code. Unfortunately, I will have to put! important some everywhere, because when going through a module, my code is called a little early in the page. So I get the following CSS code.

The concern is that my background image does not yet appear everywhere. But before going directly to see the content of the Prestashop pages to give them transparency, I immediately tackle the header, so going down, in a logical order of reading, it is then that I come to the “Wrapper” or actually to blocks of content. The CSS code now looks like this.

And to test the effectiveness of my CSS code – because there are bound to be adaptations to be made sooner or later – I copy and paste the code of my style.css directly into the previously installed CSS module. To overcome any eventuality, I also take this opportunity to clear the cache.

Technically, on my internet browser, I therefore have three tabs open :

• the Prestashop performance page
• the CSS module page
• the front office

With a few keyboard shortcuts, such as ALT TAB to change applications, or CTRL TAB to change tabs in the web browser, the changes are faster to implement.

So I go to my footer. I will have to differentiate the “global” footer from the footers that we sometimes find in the steps of the control tunnel. If the catalog is not in place, I still have a half-broken Prestashop on my computer, but in this case, Houria had already made a product available to me, so that I could progress through the tunnel. ordered. Teamwork !

So, if I check the footer on the different pages, I get the following CSS code:

/* Footer */
#footer{
border-top: 3px dotted #a91428;
}
.footer-container{
background: rgba(0,0,0,0.8);
}
body#checkout section.checkout-step .form-footer{
background:#fff;
}
footer p, .footer-container p, .footer-container a, .footer-container li a, .footer-container .block-contact, .label, label, footer #block_myaccount_infos .myaccount-title a, footer .block-contact .block-contact-title{
color: #fff!important;
}

(And damn why is there no consistency in the titles of the footer? It would have been easier in CSS …)

I now have a not too bad “overall CSS”, so I can start to go down a logical path: first the category pages, then the product pages, then the order funnel, and finally the little details. I will end with CSS to have a clean mobile design, especially since I’m a bit “breaking everything”.

CSS for category pages

So I move on to the categories, which immediately took over the overall CSS design that I inserted previously. Some details need to be adapted, such as pagination, font size, etc. Regarding my categories, I add these lines of CSS:

/* Category */
.pagination, .total-products p, .products-selection .sort-by{
color: #fff;
}
.block-category h2 {
border-left: solid 4px #d13239;
padding-left: 5px;
margin: 5px 0;
}
#products .product-title a{
font-size: 1.2rem;
}
#products .product-title a, .featured-products .product-title a, .product-accessories .product-title a, .product-miniature .product-title a{
font-size: 1.2rem;
}
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping{
color: #2fb5d2;
}

Do not hesitate to make color reminders as for the border-left in front of our titles.

I also take this opportunity to change the colors a bit, since the logo seems mostly black, but with hints of red. And as before, I copy paste all of my style.css to put the code in the CSS module, I make sure to empty the cache and I check on the category page if everything is clean. If necessary, I correct the CSS a little to “force” them or make them conform.

CSS for my product pages

Once my categories seem appropriate to me, I move on to the products, which also get the “global” CSS code. So starting with a “global” CSS has once again been a time saver.

/* Product */
#product #content-wrapper .col-md-6{
background:rgba(255,255,255,0.8);
padding: 1%;
}
.product-flags li.product-flag{
background:#000;
}
#product .current-price span{
color: #a91428;
font-size: 1.5rem;
}
.product-actions .add-to-cart{
background: transparent;
border:1px solid #a91428;
color:#a91428;
}
.product-actions .add-to-cart:hover{
background: #a91428;
border:1px solid #fff;
color:#fff;
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-o-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
transition: 0.5s;
}
.product-actions .add-to-cart:not( :hover ){
-moz-transform: rotate(0deg);
-webkit-transform: rotate06deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.5s;
}

I add small transitions to the mouse over the add to cart buttons, which helps me energize these call to action so important in e-commerce (and then I like the CSS3 rotations on the sites )

To make the background a bit more visible, but while maintaining visibility, I also put a little opacity here and there, which gives a smoother effect to the pages.

Immediately, it looks a little more classy, ​​and on top of that we get the typeface directly from the editorial. The next step, in e-commerce logic, is now the shopping cart page, just before the checkout. If you’ve been paying attention to CSS from the Classic theme or those provided below, you may have spotted that it’s going to be possible to target the cart page with it body#cart.

From the outset, on my shopping cart page, the list of products ordered is not at all readable. So I have to adapt the HTML table listing the products in the basket. Willy-nilly, I contented myself with this:

#wrapper .cart-grid-body a.label{
color:#fff!important;
}
body#cart .product-line-grid-body{
background-color: #000;
}

And personally I do not find it very beautiful, but I did not know how to be able to do better, time being limited… I am interested in any better solution!

My CSS code for the cart page turns to this:

/* Cart */
.cart-summary .btn-primary{
background: transparent;
border:1px solid #a91428;
color:#a91428;
}
.cart-summary .btn-primary:hover{
background: #a91428;
border:1px solid #fff;
color:#fff;
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-o-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
transition: 0.5s;
}
#wrapper .cart-grid-body a.label{
color:#fff!important;
}
/* Meh ! ça c’est vraiment moche… */
body#cart .product-line-grid-body{
background-color: #000;
}

A little disappointed to have stuck on the basket to make it prettier in CSS, I go to the command tunnel.

Disappointed, but CSS from the command tunnel

The particularity of the order tunnel is that the displayed design changes enormously compared to the rest of the site.

/* Checkout */
body#checkout #header .header-nav{
background: transparent;
}
body#checkout #header .header-nav a{
color:#FFF;
}
body#checkout section.checkout-step{
background-color: rgba(255,255,255,0.9);
}
#wrapper .label, #wrapper label{
color: #000!important;
}
.cart-grid-right{
background: rgba(255,255,255,0.8);
}
body#checkout #order-summary-content #order-items h3 {
font-family: ‘Noto Sans’!important;
font-size: 0.9rem!important;
}
#payment-confirmation .btn-primary{
background: transparent;
border:1px solid #a91428;
color:#a91428;
}
#payment-confirmation .btn-primary:hover{
background: #a91428;
border:1px solid #fff;
color:#fff;
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-o-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
transition: 0.5s;
}

The devil is in the details in CSS

There is a somewhat generic law, called the “80-20” rule . She specifies that 80% of the work is done in 20% of the time, but that the 20% of the work takes up 80% of the allotted time.

It is therefore a question here of settling all the small details which pollute the webdesign a little. You will forgive me therefore the CSS comment describing what the CSS rules refer to, but it is indeed small details here and there to adapt or “webdesigner” to make it consistent with the layout. global page.

/* Bordel à la con */
body#prices-drop #js-product-list-header, body#new-products #js-product-list-header, body#best-sales #js-product-list-header{
background: rgba(255,255,255,0.8);
border-radius: 50px;
text-align: center;
}
.featured-products h2{
background: rgba(255,255,255,0.8);
border-radius: 50px;
text-align: center;
}
#blockcart-modal .cart-content p.product-total .label{
color: #363a42!important;
}
.blockreassurance_product {
box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
position: relative;
display: block;
margin-bottom: .75rem;
background-color: #fff;
border-radius: 0;
border: 1px solid rgba(0,0,0,.125);
padding: 4%;
}
/* Contact */
#contact #left-column {
box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
position: relative;
display: block;
margin-bottom: .75rem;
background-color: #fff;
border-radius: 0;
border: 1px solid rgba(0,0,0,.125);
padding: 4%;
}

Overall, it’s background color changes, a bit of shadow on some blocks, and the Contact page to review.

The background colors are not basic in the Reassurance module, I prefer to remove it completely, even if it means managing content later with a simple HTML block. The advantage is that the editorial will be fully managed from a single module, which will avoid having to navigate through the multiple tabs of Prestashop administration, both for Houria and me and for the end customer.

Media queries!

Like a good web designer, I check on mobile if my design is consistent. And there is panic!

It’s unreadable, the menu texts are invisible… So I have to readjust all the mobile part, thanks to some media queries in CSS. The Classic-themed “toggle” format between mobile devices and computer is based on a size of 767px, as my inspector tells me on my internet browser.

So let’s separate these two types of device:

@media only screen and (max-width: 767px) {
/*Mobile*/
}
@media only screen and (min-width: 768px) {
/*Ordinateur*/
}

For smartphones, I have to “whitewash” certain elements. So I put these CSS:
@media only screen and (max-width: 767px) {
#header .header-nav{
background: transparent;
}
#header .header-nav #menu-icon .material-icons {
color: #fff;
}
#header .header-top a[data-depth=”0″]{
color:#1e1e1e;
}
.block-category{
box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
background: #fff;
padding: 1.563rem 1.25rem;
margin-bottom: 1.563rem;
}
#footer .h1, #footer .h2, #footer .h3{
color: #fff;
}
.footer-container .links ul{
background-color: transparent;
}
}
With a little elbow grease, it’s pretty quick. However, I do not like, but not at all on the product sheets, the white space below the images. On top of that, I will try to center the menu and the logo, with flexbox , on a width of 100%, to position the menu below the logo.

By the way, I struggled to have a CSS that could enlarge the description of the product, usually I go through a modification of the theme, but here… No choice!

@media only screen and (min-width: 768px) {
#_desktop_logo{
display: flex;
justify-content: center;
width: 100%;
}
.header-top .position-static{
display: flex;
justify-content: center;
width: 100%;
}
#top-menu{
display: flex;
justify-content: center;
width: 100%;
margin-top: 3%;
margin-bottom: 0;
}
/*Si quelqu’un est doué en CSS, qu’il m’explique, j’ai rien compris mais ça marche !*/
body#product .tabs{
margin-left: calc(-100vw / 2 + 100px / 2);
}
}

And immediately the product description takes up more space, occupying the empty space that was just before. I understood absolutely nothing about CSS, but with a little hacking it worked

By the way, I was reported from Twitter a slight bug. Like what not only did I understand nothing, but in addition I did not check everywhere .

The menu, like the logo, are now centered thanks to flexbox in CSS, but only for computers:

Missing Bootstrap CSS

Here, I save you some time. Indeed, I had to go to the next step (adding Bootstrap HTML block) to realize that I could not have the latest features provided in the official Bootstrap documentation .

Technically I need to juggle centering and margins a bit in CSS, as well as quickly centering text. I just need to add this in my CSS code:

/* Missing Bootstrap */
.d-flex {
display: -ms-flexbox!important;
display: flex!important;
}
.justify-content-center {
-ms-flex-pack: center!important;
justify-content: center!important;
}
.text-center{
text-align: center!important;
}
.mt-3, .my-3 {
margin-top: 1rem!important;
}

As the code comes directly from the popular Bootstrap tool, a copy paste is enough to make these classes functional. In my case, I had to realize while entering Bootstrap HTML code that some elements were not working. As usual, I first moaned, then I added the few CSS which ultimately did not take that long to set up, thanks to the CSS module.

Integrating HTML Blocks with Bootstrap

What is good with Bootstrap 4 is that it is based on Flexboxes and that’s life !!

So if you don’t know Bootstrap at all, I recommend this extremely rich site from Pierre Giraud https://www.pierre-giraud.com/bootstrap-apprendre-cours/ to give you a little overview then what will make the difference. is practice!

So, Boostrap layouts are based on a 12 column grid that will help you create multiple layouts.

Creation of the block code to insert

Here is our cutout design:

Here we have 2 “parent” groups in green for which we will add the d-flex class in our css file (see above) so we can act on the child elements with the properties of Flexbox!

/*Flex*/
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
.flex-column {
-webkit-box-orient: vertical!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
}
.flex-wrap {
-ms-flex-wrap: wrap!important;
flex-wrap: wrap!important;
}
.justify-content-around {
-ms-flex-pack: distribute!important;
justify-content: space-around!important;
}

Then to the green groups, I add the class ”  flex-column  ” so that the child elements are placed one below the other, and to the group containing the images I add the classes ”  d-flex flex-wrap justify- content-around  ”so that the images are arranged one after the other, that their sizes are preserved and that the space left in the margin is well distributed between and around the images.

<div class=”d-flex flex-column text-center text-lg-left”>
<div class=”text-center”>
<h2 class=”products-section-title text-uppercase text-center”>Notre restaurant sur Toulouse ~ Blagnac</h2>
<h3>LE BLACK ANGUS, HOTEL HOLIDAY INN</h3>
<h3>1 Porte de Bordebasse, 31700 Blagnac</h3>
</div>
<div class=”d-flex flex-wrap justify-content-around”>
<img class=”img-fluid img-thumbnail” src=”/g1.jpg” alt=”g1.jpg” />
<img class=”img-fluid img-thumbnail” src=”/g2.jpg” alt=”g2.jpg” />
<img class=”img-fluid img-thumbnail” src=”/g3.jpg” alt=”g3.jpg” />
<img class=”img-fluid img-thumbnail” src=”/g4.jpg” alt=”g4.jpg” />
<img class=”img-fluid img-thumbnail” src=”/g5.jpg” alt=”g5.jpg” />
<img class=”img-fluid img-thumbnail” src=”/g6.jpg” alt=”g6.jpg” />
<img class=”img-fluid img-thumbnail” src=”/g7.jpg” alt=”g7.jpg” />
<img class=”img-fluid img-thumbnail” src=”/g8.jpg” alt=”g8.jpg” />
</div>
</div>
<div class=”d-flex flex-column text-center text-lg-left mt-3″>
<h3 class=”text-center”>Retrouvez le Black Angus Steak House sur Toulouse Blagnac</h3>
<h3 class=”text-center”>Restaurant de grillades à l’américaine</h3>
<p>Nous privilégions les produits frais, le plus naturel possible, issus de productions locales et régionales. Nous sommes adhérents au mouvement Slowfood qui combat la standardisation du goût et des cultures. Certains de nos plats sont marqués de
la mention «Km zéro» et du logo Slowfood. Il s’agit de recettes dont les matières premières principales sont approvisionnées dans un rayon de moins de 180 km de notre établissement.
</p>
<p>We strongly value fresh products which are mostly picked from local ang regional organic productions or sustainable farming. We are adherents to the Slowfood movement that fights against the standardization of taste and culture. Some of our dishes
are marked with the «Km zero» and the Slow Food logo. This concept induces that the main ingredients are supplied within less than 180km from the hotel.
</p>
<iframe width=”100%” height=”450″ style=”border: 0;” src=”https://www.google.com/maps”
frameborder=”0″></iframe>
</div>

Setting up the block in the HTML Block Module:

We are going in the configuration of the module add a new block that we will position on the ”  displayFooterBefore  ” hook so that it is displayed just before the footer on the Homepage (root page), do not forget to give a name speaking to your block and activate it.

Then all you have to do is click on the chevrons to display the source code and paste what we have prepped with our text editor, and thus keep the classes. And here it is, and it’s responsive !

SEO content generation

The content is a bit the key to your SEO door , if your site is poor in content it will have to have in return a strong popularity to go up on Google. Unfortunately, it is often this part that is neglected by e-merchants due to a lack of time and information. The good news is that with our great Ever SEO module , we will be able to do content spinning , in other words we will generate text from the content already present in our pages to enrich our pages in two steps!

This will generate variations of our content and thus we will avoid duplicate content which is very frowned upon by Google’s SEO robots. We will also be able to place internal mesh using links on short codes.

How to do content spinning in practice with Ever SEO?

To do this, go to the product content generator menu in the general settings of the Ever SEO module.

We arrive directly on the list of short codes available. Below, you will also have the possibility to choose to replace the existing content or to add it after the content already listed on your product page. You can also select the language you want to work on.

To generate the content, you will then have to choose the category concerned , and finally you will be able to create the content of the short description or the long description of the product.

Thanks to our content generator we will be able to write this for the short description of the product:

o easy, right? Now it’s up to you to play by taking care to structure your content with titles and bulleted lists … and by adding links to other pages of your store which will improve the internal network!

Thanks

First of all, a huge thank you to the entire Friends Of Prestashop team , who have all fought (and often more fiercely than us) to help merchants have free online stores. This initiative during a period of confinement so difficult is to be welcomed, not to mention that many experts gave the best of themselves while putting aside their own activity.

It is indeed a proof of incredible dedication that all knew how to contribute, with a spirit of mutual aid, communication and support during these historic and anxiety-provoking moments that we all lived.

Our thanks also go to all the partners who offered tools and services , such as the host 772424 mentioned several times here, but also Store Commander, which offered its module allowing to manage product catalogs much larger than the one we have. had to manage here.

We would also like to mention in particular Julien Mutzenhardt of Web RD who was given the heavy task of managing domain names and hosting , thus being upstream of any request made for solidarity e-commerce.

With Houria , despite our very busy schedule, we are happy to have been able to create this shop for free , we assumed that during this period, any help is welcome, and that what has been described above as constraints was actually seen as an exercise in webdesign , allowing people mastering HTML, CSS and Bootstrap to design a store without breaking the bank.

Read More:

How to add sitemap to google for prestashop 1.7