Advanced Background Changer

Presentation

Advanced Background Changer has been designed to allow you to further customize the background for your PrestaShop shop. This module allows you to add custom background images, create slide shows and clickable areas and use them over your entire shop or on specific pages only. It supports multiple languages and an unlimited number of backgrounds.

General Points and Operating Principles

Advanced Background Changer supports an unlimited number of backgrounds that you can deactivate whenever you want.
The module has been designed to be easy to use for someone who is new to PrestaShop. If you have need the more advanced options, activate Professional Mode, available in all the tab panes.

The module provides you with the following two methods for inserting background images in professional mode:

– JavaScript, which allows slide shows to be created or full-screen display to be used. This doesn’t require any specific knowledge, but has few customization options.
– CSS3, which offers a very high level of customization thanks to more detailed settings and gives you the option to set your own CSS rules using the advanced styles field. This integration mode requires the user to have some web integration knowledge.

This module allows you to plan and set specific timers for backgrounds, thus allowing you to concentrate on your business whilst automating your commercial animations. During sales, for example, the backgrounds that you previously defined will activate and deactivate on the dates entered and the site will return to the initial background after that.

Advanced Background Changer allows you to differentiate between visitors and customers. You can thus show a specific background for your customers and another background for your visitors, which allows you to provide offers to your customers via a background, for example.

Finally, in order to improve the responsive design of your shop, the module automatically deactivates for any user viewing it from a smartphone, so as to avoid slowing down the load times for your site owing to the loading of large images that are not of any use for this type of device.

Installation

To install Advanced Background Changer, see our tutorial on how to install a module here

Maintenance Mode

This module has a maintenance mode. You can find the tutorial here

Configuration

You will need to be able to access its configuration panel to set the settings for the module. To this end, go to the back office of your shop and navigate to Modules. Look for Advanced Background Changer and click Configure.
abg-list

You are now in the admin interface for the module. This is where you can set the parameters of the module to suit your needs.
abg-bo

Manage Background Rules

This allows you to manage the rules for displaying the backgrounds. Each image will be associated with one or more rules. A rule defines the pages on which you want the backgrounds to appear, the period of time during which they will be displayed and/or the slide show options.

Create New Rule

Name of the rule

name-of-the-rule
This allows you to name your new rule.

Apply everywhere

apply-everywhere
Select Yes to apply the rule being created to all the pages in your shop. This means the image(s) associated with this rule will be visible on all the pages in the shop.

Activation Period

activation-period
This allows you to program the display period for your rule (and thus the image(s) that will be associated with it later on). The rule that was previously in force will be re-established when this period expires.

You can, for example, use this option to show a different background during sales.

Associations

Apply this rule to some categories

apply-this-rule-to-some-categories
This allows you to apply the rule to all or some of the category pages.

NB: the product pages do not inherit this rule, even if the products belong to the category chosen.

Apply this rule to products into these categories

apply-this-rule-to-products-into-these-categories
This allows you to apply the rule to all the products in the category selected.

You can, for example, use this option to show a background image of a watch for all the products in the Watches category.

Apply this rule to some products

apply-this-rule-to-some-products
This allows you to apply the rule to all or some of the Product pages.

Apply this rule to some manufacturers

apply-this-rule-to-some-manufacturers
This allows you to apply the rule to all or some of the Manufacturer pages.

You can, for example, use this option to show a special offer image on a manufacturer page

Apply this rule to some suppliers

apply-this-rule-to-some-suppliers
This allows you to apply the rule to all or some of the Supplier pages.

Apply this rule to some CMS pages

apply-this-rule-to-some-cms-pages
This allows you to apply the rule to all or some of the CMS pages.

Apply this rule to some special pages

apply-this-rule-to-some-special-pages
This allows you to apply the rule to the pages that have not been listed above.

You can, for example, use this option to show a special image on your 404 page.

Background Options (professional mode only)

Background Color

background-color
This allows you to choose the color displayed behind the image.

This allows you to choose the color displayed behind the image. To do this, create a rule and set this option to the desired color and do not apply any image to the rule created.

Delay of display

delay-of-display
This allows you to set the time for which each background image will be displayed. You must enter a value in milliseconds (5000 milliseconds = 5 seconds).

This only concerns rules for which several images have been assigned (therefore creating a slide show). JavaScript backgrounds with a single image and CSS backgrounds are not affected by this setting.

Texture to apply over background

texture-apply-over-background
You can choose to apply a pattern to your background images. The image will not be altered, rather the module superimposes the pattern over the background images.

Restrictions (professional mode only)

Users concerned by this rule

users-concerned-by-this-rule
This allows you to restrict the rule to a single group of users (and therefore restrict the image that you assign to same).

You can, for example, show an offer-related background to your customers only and not to your visitors.

Image Sort

sort-images
This allows you to set the display order for the images associated with the rule. When you assign several images to one rule, an order is applied, whatever type of background is used. To edit this order, just click and drag the background to the order position you want, whilst the mouse is on the arrow.

The order set here sets the display order of the images in the slide show for a JavaScript background. So the first image on this list will be the first one to appear and then the second one and so on.
The order set here sets the depth order of the images for a CSS background. So the last image on this list will be at the bottom and the others will be displayed over this one, as per the order defined.

NB. the images have to be assigned to the rule before their order can be modified.

Manage Background

Add a background

add-a-new-background
This returns a list of rules that you created previously. This is where you can assign an image to them.

Only professional mode allows you to name your images. They shall be named automatically by the module for this example. This name will only be visible in your back office and not on the page on your shop.

Rules

rules
This allows you to select one or several rules to which you want to assign the image that you are going to add.

Upload a Background

upload-a-background
This allows you to send an image you choose on your computer to your shop. You can set one title for each language that you have installed on your PrestaShop shop.
Once you have selected the file, a preview will appear in order to allow you to check the image. If you are happy you can continue with the procedure. If, however, you want to delete the image tick Delete this File below the preview.
ex-upload

NB: If you have several languages installed on your shop, you will need to add one image per language. To do this you have a drop-down list that allows you to choose from among the languages available. To apply the image that you are currently adding to all the languages for your shop, click Apply to All Languages that don’t have any Images, under the preview.
ex-apply-to-all-languages

Name of the background (professional mode only)

name-of-the-background
This field allows you to name the image that you are adding.

Background type (professional mode only)

background-type
This allows you to set the type of background that you want to create. You can create one of the following:

– A JavaScript background (default option in Normal mode), which is a single, full-screen image. You therefore need to associate several backgrounds to one rule to create a slide show.

– A CSS background is a more customizable background, that allows several images to be both displayed at the same time and accurately positioned.

Activate (professional mode only)

activate
This will activate the background that you are creating once it has been saved. This option is automatically set to Yes in normal mode.

Background Options (professional mode only)

Keep original background size (JavaScript background only)

keep-original-background-size
This allows you to set the alternate size of the image to be added. If you select No, the background will be displayed in full screen automatically. If you select Yes, the image that you add will retain its original size.

We do not advise that you add an image with a specific size and apply it to your site in JavaScript mode. It will be distorted if the screen size changes (e.g. on a smartphone).

Horizontal Alignment (JavaScript background only)

horizontal-alignment
This allows you to set the horizontal alignment, in percentage, for the image you are adding.

Vertical Alignment (JavaScript background only)

vertical-alignment
This allows you to set the vertical alignment, in percentage, for the image you are adding.

Time of Fade transition (JavaScript background only)

time-of-fade-transition
This allows you to set the fade transition animation time, in milliseconds.

This is set to 2000 milliseconds, which corresponds to 2 seconds, by default.

Background Position (CSS background only)

background-position
This allows you to position your background image very accurately, for both small and large images. You have access to 4 configuration methods via the drop-down list:

– By Position: allows you to select from the pre-defined horizontal and vertical positions (top left, bottom right, center left, etc.)
byposition

– By Percentage: allows you to set a horizontal and vertical percentage for the position of the image.
bypercentage

– By Pixels: allows you to enter a number of horizontal and vertical pixels for the exact position of the background.
bypixel

– Custom CSS (advanced user): allows you to enter custom values for the Background-Position CSS tag. Enter your the in the following order to do this: horizontal value, vertical value.
bycustomcss

This allows you to combine the key word hooks (center top etc.) and pixels, as in the example below.

Examples:

The dimming effect on our images is only there to highlight the result. The module will not apply any effect to your background.

exemple-position-top-left
By Hook set to Vertical:Top and Horizontal:Left
exemple-pourcentage-8:100-20:100
By Percentage set to Vertical:8% and Horizontal:20%
exemple-pixels-400-1240
By Exact Position set to Vertical:440 pixels and Horizontal:1240 pixels
custom-css-center-10px
Custom CSS set to center 10px

Background Repeat (CSS background only)

background-repeat
This allows you to create a repeating background. There are 4 options:
no repeat, repeat-x, repeat-y and repeat

– No repeat allows you to not repeat your background.

– Repeat allows you to repeat the background vertically and horizontally.

– Repeat-x allows you to repeat the background horizontally.

– Repeat-y allows you to repeat the background vertically.

Examples:

no-repeat
No-Repeat
repeat
Repeat
repeat-x
Repeat-x
repeat-y
Repeat-y

Background Fixed

background-fixed
This allows you to attach the background to the page. If you activate this option, the background will not move when the user scrolls the page. However, if you select No, the background will move when the user scrolls the page.

If you want the background image you added to show a special offer, for example, it might be more advantageous to have the background move when the page is scrolled, so that your customers always see it.

Activation Period

activation-period
This allows you to set an activation period for the background. You can thus schedule when it is to be displayed by setting a start date and end date (Year/Month/Day Hours:Minutes:Seconds).
Enter the same date and time in the start and end fields to activate the background indefinitely.

We recommend that you use this feature to show a special offer background or sale background, for example. You can use this to define the display period for the dates that you have set.

Manage Click Zones

Add a click zone

Title appearing when the cursor is over the zone

title-appearing-when-the-cursor-is-over-the-zone
This allows you to set the title for the clickable area. This will be displayed if your customer passes their mouse over the clickable area (this field corresponds to the image title tag).

Link

link
This allows you to set the visibility of the clickable area. You can enter a link to either a page on your site or to an external page. You need to enter a full, valid URL.
Example: http://google.fr

NB: not entering the http before the URL will not create the desired link. In this example, this would cause google.fr to be added to the end of the URL for your shop i.e. yourshop.com/google.fr. You must enter “http://” in front of the link for it to work properly and solve this problem.

Activate

activate
This allows you to activate or deactivate the clickable area that you are creating You can edit this parameter later.

Select a background to associate the zone with

select-a-background-to-associate-the-zone-with
This list gives you all the backgrounds that are compatible with the clickable area function. For a background to be compatible, it needs to be a JavaScript Background and have a display rule associated with it (under Association Rules). All the JavaScript backgrounds that meet these two conditions will be displayed in this list.
Tick one or several boxes to associate the backgrounds with the clickable area. These will then become operational immediately.

Display Options

Zone fixed

zone-fixed
This allows you to set the scrolling of the clickable area. If you select YES, your area will not move if your customer scrolls down the page. If you select NO, your clickable area move with the page.

Border for development

border-for-development
This allows you to highlight the clickable area, by adding a color border.

We recommend that you use this option only when you are developing your shop, since the border is not appropriate for commercial display.

Border Color

border-color
This allows you to set the border color for the development border defined above.

If the development border is deactivated, the color set here will not be displayed

Width

width
This allows you to set the width of the clickable area. You can choose one of two units of measurement – pixels or percentage.

The origin point for the calculation for an area in pixels, is the top left corner of your page. However, this point may be edited by the following options or by your theme

Height

height
This allows you to set the height of the clickable area. You can choose one of two units of measurement – pixels or percentage.

The origin point for the calculation for an area in pixels, is the top left corner of your page. However, this point may be edited by the following options or by your theme

Left Margin

left-margin
This allows you to insert a margin to the left of the clickable area (horizontal margin). You can thus position the clickable area wherever you want it horizontally.

Combine this parameter with Margin-Top in order to allow you to position your area where you want it on the page

Top Margin

top-margin
This allows you to insert a margin above the clickable area (horizontal margin). You can thus position the clickable area wherever you want it vertically.

Combine this parameter with Margin-Left in order to allow you to position your area where you want it on the page

Advanced Settings

Edit CSS Styles

advanced-styles
This allows you to add custom CSS code to the module parameters, providing a high level of customization. For this method, however, you need to know CSS.

Do not edit the options present in this text area if you do not have any CSS knowledge

Advanced Settings (professional mode only)

CSS Selector where to apply background

css-selector-where-to-apply-background
This allows you to set the tags to which your CSS backgrounds will be applied (so does not concern JavaScript backgrounds).

CSS Selector for hiding backgrounds

css-selector-for-hiding-backgrounds
This allows you to set the tags for which you want to hide the backgrounds applied by your theme, in order to use those inserted by our module.

Z-Index Value for click zones

z-index-value-for-click-zones
This allows you to set the z-index for the clickable areas. The z-index is a value associated with the depth of an element. The element with the highest z-index will appear above the others, and so on in decreasing order.

If you cannot see the clickable areas, it is possible that your theme modifies the z-index of some of the elements on your shop.
If this applies to you, see the next section on how to modify your theme.

If you cannot analyse your page, enter a very high value so that it is higher than all the other elements (e.g. 5555), since most of the elements have a z-index of around 1.

You should be aware that the default PrestaShop theme has a z-index of 5003 for the header element, which may cause you problems.

Adapt your Theme

The use of Advanced Background Changer may create conflicts with your existing theme. It is possible that some elements may disappear once a new background is applied.
This section provides a guide to help you to solve the conflicts that are the most commonly encountered.

The terms used are explained below:

– HTML Code: HTML is a web language that allows data to be displayed and formatted using content tags.
– CSS Code: CSS is a style language that allows the HTML code to be formatted.
– Z-index: z-index is a CSS attribute that sets the depth of an element. The element with the highest z-index will appear above the others, and so on as the z-index decreases.
– Tag: a tag contains the content that the page is to display. It is placed between angle brackets, < and >, and may comprise attributes such as class or href, for example.
– Class: A class is the name given to all the CSS attributes that can be assigned to a element in its tag. They are defined in the CSS files.

Installing the Tools

You need to have the tools in place in order to be able to find the conflicts. This is not hard. You simply need to download two programs:

– The first is the Mozilla Firefox browser (unless you are already using it): it is free and available for Windows and Mac. It can be downloaded here: Download Firefox

– The second is a Firefox add-on called Firebug. Firebug can be installed in Firefox and adds very efficient development tools. It can be found here: Download Firebug

To install Firefox, open the executable file you downloaded above and follow the instructions.
Once the installation is complete, open Firefox and go to the Firebug page (above). Click Add to Firefox. This downloads the add-on.
Click Install when the download has finished.

Now you have the tools you need to remedy the conflicts.

Searching for Conflicts

You can start your search now that you have the tools you need.
If you right-click a website, you now have an Inspect Element with Firebug option. Select this. This window then appears at the bottom of your browser:

inspect

We are going to use the following tools:

– Click an element that is on the page that you want to inspect: this will allow you to inspect the source code for an element by simply clicking on it.

bouton-inspecter

For example, if you go to the Advanced Background Changer demo page and you want to inspect the background, you can use this function and click on the background for the page.

– HTML Tab Pane: this shows all the HTML code for the page being viewed. If you inspect an element using the above option, the code for the element is highlighted in blue in the HTML tab pane.

inspection-colonne-html

– Style Tab Pane: this shows the CSS code for the page. This is the section you will use to detect any style conflicts between Advanced Background Changer and your theme.

inspection-colonne-css

Common Problems

Solutions to the problems that are frequently encountered with the module are given below.

Clickable Areas not Visible

If you create clickable areas and you cannot see them, even though you have the right settings, it is possible that there is a conflict between the module and your theme. The z-index is often the problem.
To check this, we are going to use the Firebug inspector previously installed. Start by activating the development border in the parameters for the clickable area. Go to the page where your area should be visible and inspect the area. It has been set to the left-hand side of the entire page in this example.

inspection

Inspection of this section shows the code for the page but does not detect the clickable area. If we scroll up the code a little way, a <a>  tag (which creates a link) is given with class .abg_click_zone and the title given in the parameters (“Stone Wall” in this example). It also comprises the link previously entered in the back office. We can therefore conclude that this is the clickable area that we can’t see. Clicking this tag will show the associated CSS code in the right-hand column and shade the block on the page.

cliquer-sur-(a)-pour-afficher-son-style

This is where the conflict search work starts. If the area does not appear even though the code is present, then it must have been covered by another element (that has a higher z-index value). We are therefore going to look for the z-index value for our area. Scroll through the styles until you find the z-index. It is set to -1 here, which should have it show on the top. There must, however, be an element with a higher value nearby.

z-index-zone-de-clic

The clickable area shown here does not have any margin above it or to the left. Its origin is therefore the top left corner of the page. This is where we are going to inspect and search for the problematic element. The inspector here shows that we have selected the <body> block and that the next block is the <header> (if the cursor is placed on the <header> tag in the HTML code, Firefox shows us its position using colors). So let’s check the z-index for this block. Click the  <header> tag and navigate to the right-hand column.

code-header

In this example, when we scroll through the CSS code, we can see that the z-index value for the <header> block has been set to 5003. This therefore explains the disappearance of the clickable area – the <header> block has been placed on a layer that is 5002 layers above it. Now that we have identified the conflict, we will need to modify the z-index for our area to get it to appear.

z-index-header

To do this, navigate to the parameters for the Advanced Background Changer module and activate Professional Mode. Next, click Advanced Settings. This gives you a Z-Index Value for Clickable Areas option: This is exactly what we want to change. In our example, the block that hides the click zone has a z-index of 5003. That means we are going to set a higher value (5004 is enough in this case). Click Save after you have entered the value. Reload the page and the click zone is now working properly.

The value that you enter for this parameter will be applied to all your click zones

zindex-click-zone

Make the changes then deactivate the development border and the area is now fully operational.

The search approach is the same for all themes

Do not apply the background to the center of the page

When you set a background for your shop, the centre of your page will show this background and the other elements will be placed over it, providing a result that is sometimes not very attractive.

sans-modif-css

To remedy this, you will need to edit the Advanced Styles for the module and indicate that you do not want the background color in the middle of the page. To do this, navigate to Advanced Styles under the parameters for Advanced Background Changer.

advanced-styles-tab

You must uncomment a section of pre-entered code depending on the PrestaShop version used for your shop (this code is inactive when commented out). This version number is given in the top left of your back office. Once identified, scroll the Advanced Styles area until you find your version (only the first 2 figures of your PrestaShop version are used for these settings. i.e. use the PrestaShop 1.6 section for a 1.6.1.0 shop).

Delete the comment tags for the required code to uncomment it. These tags are as follows:

– “/*” to start a comment
– “*/” to end a comment

You do, however, need to delete the right tags. The ones to be deleted for each version are shown on the following screenshots:

modifs-ps1.6
Comment Tags to be Deleted for a PrestaShop 1.6.X shop
modifs-ps1.5
Comment Tags to be Deleted for a PrestaShop 1.5.X shop

Once the comment tags have been deleted, click Save and refresh the page for your shop. Your background is now no longer applied to the central section of your shop, for all the pages in your shop.

avec-modif-css

Show an Image on Each Side of a Page

Creating an image with specific dimensions for your background to show only 2 columns, to the left and to the right of your page, is not the correct way to achieve this result. If the size of the window changes, your background would not look like you want it to.

The correct way to achieve this result is to create two CSS backgrounds and place them in the left-hand and right-hand columns. This keeps your backgrounds at the right size and the result will be optimised since you will have reduced the size of your images and therefore the page load time for your shop.

These are the two images that we will use in this example:
fond-bleu fond-rouge

The two images will be tiled to fill the entire page since they are small (256×256 pixels). However, the repeat is not necessary to achieve this result with the larger images. We are here setting “Background repeat” option to “repeat-y”.

To do this, find an image for each of the columns, then navigate to the parameters for the module. Create your association rule as per your needs, then navigate to Manage Background Images. Create a background image for each of your columns and allocate the CSS Background type to them. Go to Background Options, then select By Hook under Background Position. Select the vertical position you need, then choose Left for the left-hand column or Right for the right-hand column. Fill out the other settings as per your needs and save the settings when you have finished.

config-img-blue

config-img-red

Return to the page to which the rule applies and refresh it. You now have an image on each side of the page.

résultat

If you cannot see the images, check that no other rules conflict with the one that has just been created and that your images are among the first ones in the sort order you specified (under Association Rules).

Show Background Image in a Specific Block

You may want to allocate a background image to a specific block such as the <header> or the <footer>. There are not any presets for this type of hook. You will therefore have to tell the module where to put the image using the Edit CSS Styles parameter under Advanced Settings (activate Professional Mode to access this option).

You will need to identify the name of the block to which you want to assign the background. To do this, use the inspection tools you installed previously.
In this section, we will take the example of the <footer> block, which corresponds to the block at the bottom of the page.

footer-before

Firstly you need to upload your image to your server. You can navigate to Manage Background Images and add the image using the module tool. Once you have selected the element, right-click on the preview and inspect-it. You will then see an <img> tag with a src="..." attribute. Copy and keep the URL between the quotes: this is the position of your image

balise-img-src

If your image has already been added, edit and inspect it, just as you did to you retrieve its URL.

Now click the Advanced Settings Tab, then scroll to the end of the Edit CSS Styles area. We are going to add the code needed to display the image in the block <footer>.

Add the following code:

footer { background: URL("Enter your URL here"); }

Save this and then go back to your shop. Refresh the page and see the modified block, you now have an image that has been applied to only one block (the footer, in this case).

footer-after

Background Image not Visible

You just added and configured a background image, but it still hasn’t appeared in spite of the performance of different tests. It is possible that the image conflicts with the theme currently installed on your shop.

header-before

To remedy this, locate the block in which your theme already shows an image, preventing the new background from showing. To do this, you must go to the area where your new image is supposed to appear, then inspect it using Firebug.

exemple-conflit-code2

The current theme has already applied a behaviour to the <header> block in this example. This therefore hides the background that we want to apply to this <header> block. To remedy this, go to your back office and navigate to Advanced Settings. Use the second selector, add a comma, then indicate the name(s) of the block(s) that is hiding your image from the inspector, separating them with commas.

bo-advanced-settings-hide-background

Save this then refresh the page. Your background is now visible.

header-after