How to Create a Full Width Slider in Prestashop 1.7

How to Create a Full Width Slider in Prestashop 1.7

Everybody knows that in the default Prestashop 1.7 theme the content part has a fixed width, that’s why the slider on the homepage has also a fixed width. Nobody likes limitations, that’s why we’re going to make the slider full width. In fact, there are a few ways how to solve the problem, but we’d like to consider the most interesting ones.

How to create a full image slider in Prestashop 1.7_1

Way 1: It’s necessary to create a hook out of the container (that means the block with .container) and output the slider into it. The way means that you can create your custom hooks and output modules into it, that’s why here you can’t find the step-by-step guide related to the topic (in case you don’t know how to do it, read the article Custom hooks in Prestashop 1.7). So first off, we create a custom hook (for example, displayHomeFullWidthSlider) and set the module output into the hook. Then open the template file “themes/classic/templates/layouts/layout-both-columns.tpl” and find the block <div class=”container”>. Here we put the code of the hook output {hook h=”displayHomeFullWidthSlider”}. This way is considered as the most flexible and suitable one.

Way 2: The way is suitable for those who don’t like creating custom hooks. It is based on CSS styles. We need to carry out the following on the homepage in the content part (except the slider): to make the same width as the block with .container has while the block with .container should be 100% wide. So we need to open the styles file (for example, “themes/classic/assets/css/theme.css”) and add the following code:

It should be mentioned that if new modules are to appear on the home page in the content part, they should be applied with the styles described above in order to get them centered as the rest of modules. Additionally, both ways imply horizontal scrolling appeared which can be removed if you add the following code in the styles file:

As a result, we get a full-width slider:

How to create a full image slider in Prestashop 1.7_2


Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *