Call us: +45 65 71 12 16
This week, we will begin to really get deeper into the Prestashop-thirtybees 1.1.0 ecommerce systems in a concrete way. We will start with how to change the logo at the top, customize some css and many more.
This is the second part of the tutorial series on how to properly learn Prestashop or thirtybees ecommerce systems.
Below are the list of what we are going to learn in this tutorial:
- Integrate your own logo, if you do not have one, you can buy one easily and cheaply on Graphicriver (do not forget to have a slogan, so that we remember you).
- Add a favicon to your shop (thumbnail of your logo). We suggest to use Dynamicdrive for conversion or Favicon.cc for manual generation.
- Make changes to the HomeSlide module and configure it to suit your need.
- Configure the contact block to enter our own store contact details.
Where to change the Prestashop-thirtybees ecommerce logo?
Firstly. Prestashop developers have abandoned Prestashop 1.6 and built a totally different system Prestashop 1.7.
Secondly. thirty bees is a fork of Prestashop 1.6 which had a lot of promise but for some reason was abandoned 3 years ago by its original developers, the prestashop team. Most of that original developers are now with thirtybees and are helping in its development.
Thirty bees development team are not funded by anyone, that makes them independent from any pressure outside, to compensate with the funding if they are funded otherwise. So, you can be sure that, thirtybees is not serving any company or entity, but the whole open source community. And for that, we owe a great deal of thanks. Having said that, I would like to take this opportunity to give them a shout out here!
You may send your support to them as an appreciation of thanks over at patreon.
Alright, we go back to the point of this second part of this series which is Changing the header and banner correctly.
To change the Prestashop-thirtybees ecommerce logo in the header, login to your back office area.. once there, look for “Preferences” then click on “themes”. It should bring you to the theme administration.
The default thirtybees have two themes available for you.
Niara version 1.1.0
Designed by thirty bees community
and the other one is the,
community-theme-default
You can configure your theme’s advanced settings, such as the number of columns you want for each page. This setting is mostly for advanced users.
If you are here, click on the “add file” button to add your own Prestashop-thirtybees ecommerce logo.
Scroll to the bottom and click “Save”.
A lot of people come to us feeling flustered with this. They would say, changing the logo doesn’t work. They tried it many times. Only to find out that they did not clicked the “Save’ button after adding their logo file. So, go ahead and click save.
Doing this will automatically change the email and invoices icon logo as well as other icons that the shop needs.
You can click on the “advanced settings” and play around with it.. In this area, you will have the options of displaying and not displaying certain elements on the right column and left column of your ecommerce website. The default is set to left column.
You can also set the number of product per page on the advanced settings, enable and disable content pages as you see fit. There is a lot of things you can do here. Go ahead and play around with it.
Your header logo area should look different with the newly uploaded logo like the image below after saving:
That wasn’t so bad? Was it?
The next thing you would learn to change is how to change the slider that has the product images on it. This slider is a module called “HomeSlider” some calls it “Block Image Slider”, it is a module made by thirtybees and comes free, and it is very easy to customize.
Let’s get it started.
Before doing that, I would like to make a suggestion to you, I know, you are eager to learn how to customize your Prestashop or thirty bees ecommerce, but you need some inspiration.
You need some ideas, right? So what I will suggest to you guys is to go and search over at google.com for the best ecommerce website that are out there right now. Check them out to see how they are doing. Get some ideas in and customize it to yourself. OK? There’s nothing like watching what’s happening among competitors and taking inspiration from their ideas.
Alright! How’s it so far?
How to change the slider product image.
Click on the Modules and Services menu. it should give you a page like the one you see below:
Click on the “configure” button to the right side of the module. It is not shown in the image, but it is there. Click on that, and you will be directed to a configuration page for the “Block Image Slider” module.
In homeslider configuration page, you will have the options to change the following;
Click on the “Choose a file” to upload your own image. Make your changes especially the url or link of the image. You can link this image to your actual product.
In the description area, if you see the word “Shop Tea” in bold letters, that is the one that will appear in the homepage as a title to this image not the “Slide title”. I just would like to make that clear to erase confusion.
Once done, scroll down a little bit and save your changes. The changes will automatically be implemented by thirtybees system.
Check your homepage and see how you are doing!
There is one thing that you need to change along with the changed just made. That is the contact block. Remember, your customers are looking to connect with you as easily as possible, so you need to clearly display a phone number in your ecommerce website.
How and where to change the store information?
Prestashop and thirty bees are modular. This is a good thing as you only have to reach the module to change something in your store.
So, go ahead and click on the Modules and Services menu again. Once there, type the word “information” in the search box.
Click the “configure” button to the right side of the page.
You should be given a page that will allow you to make your necessary changes for your store like below:
Click “save”.
That is it! We are done with the second lesson of this series How to peoperly Learn Prestashop and thirty bees ecommerce systems.
In this tutorial we have covered three of the basic areas you need to change in order to run your ecommerce website properly.
Here is what we have done so far in this episode for this series, How to Change HomeSlider and Prestashop-thirtybees Ecommerce logo.
- You learned to integrate your own logo,
- You learned to Properly add a favicon to your shop.
- We made changes to the HomeSlide module and configure it to suit your need.
- We configured the contact block to display your own store contact details.
Yayyyyy!!!
Hope you enjoy this tutorial. We want you to learn how to manage and use Prestahop-thirty bees ecommerce system in a simple and effective way. And it starts with knowing how to change the Prestashop-thirtybees ecommerce logo. There are more to be covered in this series. Look for it next week.
Subscribe to our newsletter to get the latest content right into your inbox.
Feel free to give us a feedback using the comment section below. If there is something we should have included in this episode, let us know soonest.
