By making a simple change to your product page such as changing the color of the main CTA button (Call to action) you can significantly improve your conversion rate.
In this example we will focus only on changing the color of a specific CTA button, but using the following steps you can also experiment with other details such as CTA copywriting and placement.
Step 1. Create a new A/B test
From the main left menu select the A/B Testing option:
Click on ‘New A/B Test’ to create a new one:
Here you can either load the URL of the product page that you desire to include into your experiment or add its HTML source code.
The second option, “or upload HTML”, is used mainly for dynamically generated web pages, like the shopping cart page.
Step 2. Create the variation
Click on ‘New Variation’ to add one:
Select the CTA button that you desire to edit and select ‘Edit element‘. In our case we’ve chosen the “Add to cart” button:
You can choose to edit the HTML, Content or CSS style of a specific element. In this case, we will use the Edit CSS feature:
Once the “Edit style” window appears, go to “Color and Background” and change the background color as seen below:
After changing the color click on ‘Save‘ in order for the changes to be applied:
At the end the result should look like in our example below:
Step 3. Set your audience
If you want the experiment (CTA button color change) to be applied only on one product page, you must insert only that specific URL using the URL IS condition.
If you want to apply the experiment on all the product pages, you can do this by inserting into the Audience tab only the part of the URL that is common to all the product pages and using the URL CONTAINS condition.
After you’ve done managing the pages where you want to run the experiment select the “Segment” of visitors which will be included in the experiment by clicking on the “All visitors” drop-down button.
The “Select a segment” window will appear. From this window, you can choose a segment that has been already created or create a new one.
Once you’ve set the segmentation you can see that under “Advanced settings” link, in the second part of the page, you can add a maximum number of users that will see the experiment (once that number is reached the experiment will stop) and select the devices where you want the A/B test to be visible.
In the end, you have the option to mark it as exclusive, meaning that no other experiments of this type will be triggered for the visitors who viewed this one first, as long as this experiment is still active.
Step 4. Set the traffic allocation and goals
In the next tab, “Traffic Allocations and Goals”, you will select the percentage of visitors that will see the experiment.
This percentage will be randomly extracted from the segment you have decided to use. You can run the test on all of the visitors who are included in the segment or just a part of them (let’s say 50%).
After the percentage of visitors is set you can use the variation traffic selector to modify how much of that percentage will see the “Control” ( original page ) and how much the “Variation” ( the page with the changes ).
In the second part of the page, you will find the “Goals“. A goal is set to track sales, conversion rate, click rate, engagement, bounce rate, etc.
There are 3 predefined goals that you can use – Sale ( which works only after the Goal tracking code is inserted on the thank you page of your website – Click here for more details), Engagement and Bounce rate.
Step 5. Schedule and publish the A/B test
The last step of setting up and A/B test experiment is “Schedule”-ing it. Choose for how long to set it live, when to be triggered to your visitors and whether or not you want to receive an email when it has expired.
17. At the end you can choose to publish it or to save it as a draft:
DON’T FORGET: After each time you publish or update an experiment, you have to wait 3-4 minutes until it will be visible on your website. If you want to see the changes live instantly, install the OmniTool extension that helps bypass the cache system which generates the delay. You can download OmniTool here.
Was this post helpful?
