18 Feb Prestashop customization
We show You all the steps for a basic Prestashop customization.
“You should always focus on making your store look professional and trustworthy, using theme customization is the best way to do this”.
While also giving it a unique identity. It is important to give your store a unique identity that will differentiate it from the others and convince customers to choose you. In this blogpost we will teach you how to customize the main features of your theme. Let’s begin!
How to change our logos and favicon
It’s simple, just login to your Prestashop store back office and click on: Preferences -> Themes. You will see all the themes that your store currently has and an option to change the logo. Just click on “Add file” and upload your new logo. We have done it on our testing website with our own logo! Check it out:
For changing the favicon, it’s exactly the same, easy process. Click on “Icons” and you will be able to upload your new favicon. Don’t forget to also change your store icon, this is the icon that will appear on the store locator (Google Maps).
For this, we are using the Prestashop icon. You can also checkPrestashop blog in order to look for more info!
Customize your Prestashop store’s front page
For doing this, we are using the “Theme Configurator”. Just click on “Modules” and search for the “Theme Configurator”. Select it and click on “Configure” and you will be able to see the main setting of the theme we are using:
- Social accounts display: You can click on “Configure” to set the links and choose which social media account you want to display on your store. This is a great way to promote your social media profiles among your customers!
- Display your contact information: Use this if your store has a physical address in order to give more information about your business.
- Social Sharing on product’s page: Activate this to show the social media sharing icons, let your customers spread your store!
- Display the Facebook block on the home page: Do you want to give extra visibility to your Facebook page? Use this feature and add a Facebook icon to your homepage that will lead the customers to like your page! All you need to do is click on “Configure” and paste your company’s Facebook link.
- Custom CMS Icons: Use these icons to write extra information about your shop, like shipping information, support information… This will help your website to look more trustworthy.
- Display quick view: This will allow you to show a pop-up alike window when your customers click on “Quick view” button. They will be able to check the main characteristics of the product.
- Display top side banner: Do you have any special seasonal offers? Any discounts? Limited time free shipping? Then this is your perfect tool. Activate it to show a cool banner with this information. Just click on “Configure” and choose the image you are using or the banner’s link…
- Display logos of payments methods: Are there any restrictions with credit cards? Let your customers know which credit cards are accepted as a payment method!
- Display live configurator: Customize your theme fonts and colors quickly and easily with this tool. Activate it to show a theme control panel (only visible to you) and start customizing!
Change the images of your store
Once you have finished editing the main settings of our front page, it’s time to move to the images editing part. This can be done in the “Hooks” section, there are 2 types of “Hooks”:
- Action Hooks: These hooks will interact with the customers when they perform certain actions, for example: add discounts to the cart or send a confirmation email when the customer creates a new account. These hooks must be activated with triggers.
- Display Hooks: This is the most traditional and most common display banner that will allow us to show images and products of our store.
Depending on the position of the hooks, we can configure up to 5 hooks:
- Hook “Home”: This will be shown at the lower part of your homepage.
- Hook “Top”: These hooks will be shown at the top of your homepage.
- Hook “Left” and Hook “Right”: Will be displayed on the sides of the page.
- Hook “Footer”: As the name says, it will be displayed at bottom of your page, right below the footer.
The process of adding new hooks is really simple, just click on “Add item” then we can access a bunch of options:
- Language: We can set up which banners to show depending on the language of the customer.
- Hook: Choose where you want to place the hook.
- Image: Select the image you want to upload.
- Image width and height: Use this to fit your banner on your website. Some themes will be an example banner, make sure to check the example banner’s height and width in order to apply it to your own banners.
- URL: Select the URL that you want to redirect the customer to when they click on your banner.
As you can see, basic customization of your Prestashop store’s front page is really easy! This a necessary process in order to make your store look more professional. Also, don’t forget to check out the 5 best modules for Prestashop.