A/B testing different CTA colors on the product page

Back

Implementation time: 15 min.

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.

  1. From your left menu select the A/B Testing:
omniconvert ab testing menu

2. Click on ‘New A/B Test’ to create a new one:

omniconvert new a b test

3. 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,  “upload your own HTML code”, is used mainly for web pages generated dynamically, like the shopping cart page.

a b test product page url

4. Click on ‘New Variation’ to add one:

a b test new variation

5. Select the CTA button that you desire to edit and select ‘Edit element‘. In our case we’ve chosen the “Add to cart” button:

a b test edit element

6. 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:

a b test edit css

7. Once the “Edit style” window appears, go to “Color and Background” and change the background color as seen below:

a b test color background

8. After changing the color click on ‘Save‘ in order for the changes to be applied:

a b test save background changes

9. At the end the result should look like in our example below:

a b test final look

10. Set your audience

If you desire 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 wish to apply the experiment on all product pages, you can , by inserting into the Audience tab only the part of the URL that is common to all product pages and using the URL CONTAINS condition.

ab test audience setup

11. 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.

a-b test segmentation

12. 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.

create new select existing segment

13. 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.

a b test advanced settings

14. 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 ).

a b test traffic allocation

15. 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.

a b test goals

16. 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.

a b test schedule

17. At the end you can choose to publish it or to save it as a draft:

a b test publish save 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.

Shopping Basket