5 Product Page Size Chart Tweaks That Cut Your Return Rate Without Adding Another Plugin

Your Size Chart Is Probably Costing You Sales

Here is a number most store owners do not think about: 20 to 30 percent of online clothing and footwear returns happen because the customer ordered the wrong size. Not because the product was bad. Not because the shipping was slow. Because the size chart did not help them pick correctly.

And the fix is not a bigger table or more measurements. The fix is in how you present the information. A size chart that shoppers actually use has less to do with data and more to do with layout, context, and friction reduction.

These five tweaks take under an hour each and do not require a plugin or a developer.

1. Put the Size Chart Inside the Buy Box, Not Below the Fold

Most stores put their size chart as a text link below the product description, or worse, at the bottom of the page in a separate tab. By the time the shopper finds it, they have already scrolled past the buy button.

Move the size chart link directly next to the size selector. One line of text: “Not sure of your size? Check the size chart.” Place it between the size label and the size dropdown.

<div class="size-selector">
  <label>Size</label>
  <a href="#size-chart" class="size-chart-link">Size guide</a>
  <select name="size">
    <option>XS</option>
    <option>S</option>
    <option>M</option>
  </select>
</div>

The chart opens in a modal, not a new page. The shopper never leaves the product page. They check, they close the modal, they pick the right size, they buy.

Stores that move the size chart link next to the selector see a 15 to 20 percent drop in size-related returns within the first month.

2. Show Body Measurements, Not Garment Measurements

Most size charts list garment measurements: “Pit to pit: 52cm.” That means nothing to someone shopping at 10pm in their bedroom. They do not have a tape measure. They do not know their pit-to-pit measurement. They know their height and their usual dress size.

Switch to body measurements with a second column for “usual dress size” or “usual shoe size”:

The “Aus Size” column is the anchor. It gives shoppers a reference point they already know. “I usually wear a 10, so I am an L.” Done. No tape measure, no guessing.

3. Add a “Model Is Wearing” Line With Real Numbers

Shoppers want to know what the product looks like on a real person. Not a size 4 model in a studio. Someone they can compare themselves to.

Add one line under the size chart:

<p class="model-info">
  Model is 173cm tall, usually wears size 8 Aus,
  and is wearing size S in this product.
</p>

That single line answers the question every shopper asks: “Will this look like that on me?” They can compare their height and usual size to the model’s. If they are 168cm and usually wear a 10, they know to size up.

Put this line directly under the size chart modal, not in the product description. It is sizing information, not marketing copy.

4. Highlight the Bestselling Size for Each Product

This is a subtle nudge that works. In your size chart, add a small badge next to the most commonly purchased size for that specific product:

<tr class="bestseller-size">
  <td>M <span class="badge">Most popular</span></td>
  <td>86-90</td>
  <td>66-70</td>
  <td>92-96</td>
  <td>8-10</td>
</tr>

“Most popular” does two things. First, it provides social proof. If most people buy size M, the shopper trusts that M is a safe choice. Second, it helps shoppers who are between sizes. If they are debating between S and M and M is the most popular, they lean toward M.

Only add this badge to products with enough sales data to be meaningful. Do not put it on a product with three total sales.

5. Let Shoppers Compare Two Sizes Side by Side

The moment a shopper is torn between two sizes is the moment they might bounce. They open the size chart, look at M, look at L, try to remember the first set of numbers, scroll back up, get frustrated, and leave.

Add a simple toggle that lets them highlight two rows at once:

<tr class="size-row" onclick="toggleCompare(this)">
  <td>M</td><td>86-90</td><td>66-70</td><td>92-96</td>
</tr>
<tr class="size-row" onclick="toggleCompare(this)">
  <td>L</td><td>90-94</td><td>70-74</td><td>96-100</td>
</tr>

function toggleCompare(row) {
  row.classList.toggle('compare-active');
}

.size-row.compare-active {
  background: #f0f0f0;
  border-left: 3px solid #000;
}

Two clicks. Both rows highlighted. The shopper can see the difference in measurements without scrolling or memorising. It is a tiny interaction that removes the last bit of friction between “I think this is my size” and “I am confident enough to click buy.”

The Compound Effect of All Five

None of these tweaks are dramatic on their own. But together, they transform a size chart from a roadblock into a conversion tool.

• Chart next to the selector: fewer bounces before purchase
• Body measurements with Aus size: fewer wrong-size orders
• Model info line: more confident purchases
• Bestseller badge: faster decisions for uncertain shoppers
• Side-by-side compare: fewer abandoned carts between sizes

Pick one to start with this week. Add another next week. Within a month, your size-related returns will drop and your conversion rate will climb. No redesign, no plugin, no developer invoice.

Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.