What is the first optimization to conduct on your website? Without a doubt it is to make sure your calls to action can be easily identified. It may sound trite, but too often, you find that these buttons could do with improvement.
The most common mistakes include:
- a style that does not sufficiently emphasise the clickability of the button;
- a contrast that is too low to make it stand out from other page elements;
- an inappropriate location (e.g. below the float line).
Another common occurrence is on pages where you have to scroll. For example, a product sheet can span multiple screens because of the wealth of information it is advisable to include: visuals, description, technical specifications, customer reviews, related and/or recommended products to promote cross/up selling, etc. On such pages, although the add-to-basket button is above the float line, as soon as the user scrolls to view the most relevant information, the button disappears from the screen.
To solve this problem, you can use our Stick on Scroll plugin, which ensures that your calls to action are always visible on-screen, regardless of scrolling level. The principle of this plugin is simple: it makes any of your page elements fixed, creating the impression that it moves as the user scrolls on the page.
The implementation of this modification is very simple and only requires a few clicks. From the editor, select your call to action and choose “Plugins”. You are then directed to the library, where you can filter by plugin category. Here, the “Stick on Scroll” plugin is in the “Content” category. Activate the plugin by clicking on the button “Add to test” on the top right of the page describing the plugin. You are automatically redirected to the editor, where you are presented with a configuration window to specify the settings for this plugin. There are several options to adjust the behaviour of this button once it is fixed.
You can, for example:
- impose a background colour on the block containing the button;
- force the display to the foreground (useful if other elements on the page have higher z-index values and hides the scroll button); and
- insert a space between the top edge of the page and the button so that it can “breathe”, etc.
You can then customise the look and feel of the button with the different options typically available in the visual editor. Then apply your changes only to product pages and run an A/B test to measure the impact of this change or apply it directly to all your users.