Increase Conversion Rate Shopify Product Pages with Decoys

Implement it step by step

Here's how to build and style your decoy pricing directly in the Shopify Theme Customizer. No complex coding required.

Step 1: Audit the current product page variant structure

Head to your Shopify Admin and open Products. Pick your main seller. How are your variants set up right now? Most stores just use boring dropdowns or plain pills. That's a missed opportunity. Check your current AOV and conversion rate in your reports. As Blackbelt Commerce explains, improving conversion rate usually starts with analytics, friction diagnosis, and a prioritized CRO roadmap.

Identify your "target" SKU—the one you want everyone to buy. Now, do the math for your decoy. It has to offer less value than the target but cost almost the same.

Check: You've set up three tiers: Tier 1 (Anchor), Tier 2 (Decoy), and Tier 3 (Target).

Step 2: Create product metafields for visual badges

You want to highlight that target tier without breaking your theme's code. Metafields are the way to go:

1. Go to Settings > Custom data > Products.
2. Hit Add definition.
3. Set the Name to "Variant Badge Text" and use the key custom.variant_badge.
4. Pick Single line text and save it.
5. Do the same for a second one called "Variant Savings Callout" using the key custom.variant_savings.

Now go back to your Products page.

Check: Your product data now has custom badges saved in the Shopify database.

Step 3: Configure variant display in Shopify Theme Customizer

Go to Online Store > Themes. Click Customize. In the top dropdown, pick Products > Default product.

Find the Product information section on the left. Look for the Variant picker block. Switch the setting to Pills instead of Dropdown. Dropdowns hide your prices; pills show them. If your theme allows it, add a Custom Liquid block right under the variants. We'll use this for the styling.

Check: You see clickable pills on the page instead of a menu.

Step 4: Inject custom Liquid and CSS for visual default anchoring

In that Custom Liquid block, you're going to add some code to make the target tier stand out. We want a border and a badge to catch the eye. The goal is to make the target the obvious default choice.

Paste this exactly into your Custom Liquid block:

<style>
  .product-form__input input[type="radio"] + label {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 18px;
    position: relative;
    transition: all 0.2s ease;
    display: inline-flex;
    flex-direction: column;
    min-width: 130px;
  }
  /* Target tier default anchor styling */
  .product-form__input input[type="radio"][value*="Target"] + label,
  .product-form__input input[type="radio"][value*="Bundle"] + label {
    border-color: #0f172a;
    background-color: #f8fafc;
  }
  .product-form__input input[type="radio"][value*="Target"] + label::before,
  .product-form__input input[type="radio"][value*="Bundle"] + label::before {
    content: "MOST POPULAR";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0f172a;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Ensure target variant radio is selected by default on page load
    const targetInput = document.querySelector('.product-form__input input[value*="Bundle"], .product-form__input input[value*="Target"]');
    if (targetInput && !targetInput.checked) {
      targetInput.click();
    }
  });
</script>

Hit save in the top right corner.

Check: Refresh the page. The target bundle should be pre-selected with a high-contrast badge. It's working.

Step 5: Quality assurance and device compatibility check

Open your store in an incognito window. You need to see what the customer sees. Check it on your phone, too.

• Is the "Most Popular" badge overlapping other text on small screens?
• Do the prices update immediately when you click different pills?
• Run a test order. (Crucial). Make sure the right variant ID goes to the cart.

Check: Switching variants is smooth on all devices with zero layout jumps.

Step 6: Launch and initiate split test tracking

If you have an A/B tool, send half your traffic to the new layout. If you're doing this manually, just track your stats for the next two weeks. Don't change anything else during this time.

Check: Use GA4 to confirm that people are actually clicking the variants and adding them to their carts.