Skip to main content

We are currently experiencing an issue that is preventing customers from submitting support tickets. Please contact us at (866) 819-4486 if you need immediate assistance.

x
Optimizely Knowledge Base

Retail sites: Price test your checkout funnel

THIS ARTICLE WILL HELP YOU:
  • Optimize pricing on your site, client-side
  • Create variations using Optimizely's 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're 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's imagine the following scenario:

You run an e-commerce 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 aren't 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's 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've used A/B testing to optimize pricing on your site.

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

Use this example to:

  • Brainstorm your own test ideas based on concepts shown here
  • Practice creating a variation with Optimizely's 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're looking for more test ideas, check out this list of ideas for e-commerce and retail sites.

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

1. 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'll do this by adding sample code to Optimizely'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've now created a variation that offers a different price in the butter bar.

2. Auto-fill the coupon field

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

For example, let's imagine that you've already created a coupon code that offers 10% off bags, in your system. The code is: CODE_TEST. You'll 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's 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’d 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.

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


    Don’t forget to remove the field labels and extra buttons as well.

  2. Once you’re done creating your variation, follow Steps 2 - 6 in this Six steps to build an experiment article. Hit Publish when you’re 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.