Retail sites: Price test your checkout funnel

  • Updated
This topic describes how to:
  • Optimize pricing on your site, client-side
  • Create variations using Optimizely Web Experimentation Code Editor
  • Brainstorm test ideas for pricing

Pricing is equal parts art and science—a delicate balance of perception and reality that many businesses struggle to get right. One approach to establishing pricing is to ask your customers what they are willing pay. But what people say can be different from what they do, especially when it comes to money.

So, how do you optimize pricing for your business? A/B testing can help you gather direct data about your customers' behavior at different price points.

Let us imagine the following scenario:

You run an ecommerce business. Accessories are your most profitable segment, but you notice that bags are underperforming. Visitors to your site view the product detail pages, but add-to-cart events and purchases are lower than expected. Customers are interested, but they are not converting. After digging into the data, you wonder: are your bag prices limiting the conversion rate? Would lowering prices by, say 10%, increase purchases and overall revenue?

Price testing is a sensitive issue, but it can help ground the question in data and guide your decision making.

Let us return to the bag example. You decide to test the bag prices. Your hypothesis is:

If we lower the price of bags by 10%, then your prices will be more competitive in your market space. Customers will feel comfortable buying more bags, and the overall revenue will grow by 5-8%.

So, you build an A/B test that tracks visitors' behaviors when they see these variations. You wait for statistically significant results to tell you whether customers respond favorably to the new pricing. Voila! You have used A/B testing to optimize pricing on your site.

Before implementing a price test experiment, take into consideration the possible impact of customers receiving different prices. Rather than offering only a 10% discount to your variation, perhaps you can offer 10% discount to all your experiment's visitors and instead test on the messaging of your discount to see which variation's messaging performs best. Explore the different possibilities for experimenting on your checkout funnel.

This article walks you through the step-by-step process of setting up a client-side price test. It also shows you how to build those experiments with the Optimizely Web Experimentation Visual Editor and Code Editor.

Use this example to:

  • Brainstorm your own test ideas based on concepts shown here
  • Practice creating a variation with the Optimizely Web Experimentation Visual and Code Editors

Recommended goals to track:

  • Primary goal: add-to-cart events
  • Secondary click goals: revenue per purchase, items in cart, cart value
  • Pageview goals across the checkout
  • Pageview goals for product pages

General tips when price testing:

  • If your price test means that customers end up paying less than they expected, let them know! Imagine that you run a test that raises prices on the product page. You show this new price with the Visual Editor, but customers are charged the original (lower) price when they check out. This is a safe way to test price elasticity and learn how your change impacts revenue. And if the final price is less than a customer intended to pay, delight them with a message when they check out!

  • Take care when testing prices if you promote just one or two products heavily. If visitors are used to seeing certain prices listed publicly, it may be difficult to test different ones on your site.

If you are looking for more test ideas, check out this list of ideas for ecommerce and retail sites.

Having trouble loading your checkout funnel in the Editor? Try this article on loading a session-specific page.

Add a butterbar

Let's start by creating a variation that shows visitors a new price point. For example, add a butter bar that shows the message: "Give yourself a summer treat. Take 10% off bags this weekend (discount applied at checkout)."

You do this by adding sample code to Optimizely Web Experimentation's Experiment CSS option and the Code Editor.

  1. Load your site into the Editor.

  2. Then, add the global CSS for your butterbar. Click Options, then Experiment CSS.

    Paste the following sample code into the box:

#butterbar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: rgb(95,138,178);
color: white;
display: none;
font-size: 1.45em;
font-weight: 500;
font-style:italic;
height: 42px;
padding-top: 6px;
text-align: center;
white-space: nowrap;
}

It will look something like this:

  1. Click Edit Code to open the Code Editor to add the variation code.


In the Edit Code box, add the following sample code to create a butter bar (and modify the text for your message).

$('body').prepend('<div id="butterbar" style="display: block;">Give yourself a summer treat. Take 10% off bags this weekend (discount applied at checkout).</div>');

If you see an error in the sample variation code, make sure the single quotes (') are unformatted when copied into the Code Editor.

Awesome! You have now created a variation that offers a different price in the butter bar.

Auto-fill the coupon field

Next, use the coupon field in your checkout to automatically apply the discount to visitors in this variation.

For example, let us imagine that you already created a coupon code that offers 10% off bags, in your system. The code is: CODE_TEST. You add variation code that applies this discount automatically. Any visitor who enters this variation will see the new price point announced in your butter bar when they check out.

Let us walk through how to inject this code in a variation using the Code Editor:

  1. Load your site into the Editor.

  2. Click Edit Code to open the Code Editor.

  3. In the Visual Editor, click the field you would like to hide and select Custom JavaScript from the menu. This shows you the name of the element (such as “#coupon-code”).

  4. Add the.valcode to the end of$(“#YOURELEMENT”)so it becomes $(“#YOURELEMENT”).val('CODE_TEST').

    For example, $(“#coupon-code”) becomes $(“#coupon-code”).val('CODE_TEST').

    Then, click Apply. You should see the code appear in the coupon field.

    You can replace "CODE_TEST" with the coupon code that you generated.

Hide the coupon field

Once you auto-populate the discount code, you can hide the coupon field to prevent visitors from sharing the code outside of your experiment. This helps provide a seamless experience and protect your results.

  1. Select the field in the Visual Editor and click Remove. In the Remove dialog, select Make element invisible.


    Do not forget to remove the field labels and extra buttons as well.

  2. Once you are done creating your variation, follow steps 2 - 6 in this Six steps to build an experiment article. Hit Publish when you are ready to launch your experiment.

Fantastic! Now you know how to auto-populate and hide a coupon field using the Code Editor. When visitors are bucketed into the variation, their purchases will be automatically discounted when they check out.

Using Optimizely Web Experimentation to price test your checkout funnel will only change the value of your products on the front end. You will additionally need to tie the price changes to your site's back end.