UX review · Solar Fairy Lights

Truncated product names: what shoppers see, and 5 ways to fix it

Across every screen size, the details that tell fairy light variants apart (LED count, colour, length) are cut off. Different products end up looking identical in the category grid, related-products carousels and add-to-basket sheet.

Live site thesolarcentre.co.uk · measured 30 October 2026 · Solar Fairy Lights (41 products) and Outdoor Christmas Lights (65 products) · Updated: new basket screenshots and 5 ideas that combine fixes 1 and 3
Findings

Nearly every name is cut, and the part that's cut is the part that matters

Names follow the pattern brand → generic words → the detail that matters, e.g. "Lumify Warm White & White USB Solar Fairy Lights – 300 DualWhite LEDs". Cards show 2 lines, so the bold part is what gets cut.

38 / 41names cut off on iPhone SE (375px)
40 / 41names cut off on a 1280px laptop, the worst case
21laptop cards whose visible name matches at least one other card
57 / 65names cut off in Outdoor Christmas Lights (iPhone SE)
ScreenName widthNames cut offCards that look identical
iPhone SE · 375px144px38 of 41 12 cards in 5 groups
iPhone Pro Max · 430px171px33 of 41 9 cards in 4 groups
iPad mini · 768px213px19 of 41 2 cards
Laptop · 1280px126px40 of 41 21 cards in 6 groups
Desktop · 1536px190px35 of 41 9 cards in 4 groups

"Look identical" means the visible, cut-off text matches another card word for word. 1280px is worst because the filter sidebar leaves 680px for 4 columns, which gives each name 126px. That's narrower than on an iPhone SE.

"Lumify Warm White & White USB…"
On iPhone SE, 4 different products show this text:
  • 100 DualWhite LEDs · £39.99
  • 300 DualWhite LEDs · £69.99
  • 1000 DualWhite LEDs · £149.99
  • Curtain Lights, 300 Micro LEDs
"Lumify USB Solar Fairy Lights – Warm…"
100 LEDs (£39.99) and 300 LEDs (£69.99). These are the two best-reviewed products in the category (205 and 180 reviews).
"Lapland USB Solar…" ×6
At 1280px, six different Christmas figures (reindeer, stag, sleigh, doe and fawn…) all show the same cut-off name.
Screenshots · live site

Current experience by screen size

Click any screenshot to enlarge it.

iPhone SE, 375px. Lumify 300 vs 100: both read "Lumify USB Solar Fairy Lights – Wa…".
iPhone Pro Max, 430px. Two "Lumify Warm White & White USB Solar Fair…" cards at £39.99 and £69.99.
Added to basket, iPhone SE. The added item's name is shown in full, but the related products are cut and look the same.
Main-site cart, iPhone SE. Names run to 4 lines and the price runs off the screen (£39.9, £139.9).
Laptop, 1280px. 4 columns next to the filter sidebar: "Lumify USB Solar Fairy…", "Retro USB Solar Bulbs S…". The £74.99 was-price is also clipped.
Desktop, 1536px. Better, but 35 of 41 names are still cut.
iPad mini, 768px. The best case: 3 columns with no sidebar. Still 19 of 41 cut.
Main-site cart, desktop. Full names fit here, but most of each name is generic words.
Screenshots · new basket

The new basket fixes the price, but on phones it cuts the size

These screenshots show the new basket (the basket and checkout component used by the new customer checkout) with the same three Lumify Dual White sizes: 100, 300 × 2 and 1000. On a laptop the full name fits on 2 lines. On phones the name is cut at 2 lines with "…", which removes the LED count first. At 320px all three items show the same text.

3 / 3full names shown at 1280px (306px name column)
3 / 3names cut at 375px. "DualWhite LEDs" is lost and the number only just fits ("100…")
3 → 1at 320px the three items all read "Lumify Warm White & White USB Solar Fair…"
✓prices fit on screen at 320px. The main-site cart's price bug is gone here
New basket, iPhone SE, 375px. 2-line cut: "…Fairy Lights - 100…", "- 300…", "- 1000…". The difference is the last thing you can see.
New basket, small phone, 320px. All three lines read the same. Only the photo and price tell them apart. Also note "£74.99£69.99 each", with no space between the prices.
New basket, laptop, 1280px. Full names fit, and the summary panel keeps the total in view. This is the best basket layout we have.

This was a local test basket, so the line under each name shows "Product ID". Items added on the site show "SKU" on that line instead.

Fix 1

1Put the key spec on the photo

Effort: smallWorks at every screen size

Keep the name as it is, but show the details that tell variants apart in the dark strip the "New" label already uses. The detail that varies within the product family (usually LED count) is highlighted in yellow.

Data: the Light Colour and Cable Length filters already exist. LED count and set size can be read from the name until they become proper attributes. The strip also works in carousels, search results and the add-to-basket sheet.

Now · iPhone SE
Proposed
Fix 2

2Shorter card names, spec on line two

Effort: small–mediumBiggest gain in readability

On the Fairy Lights page, "USB Solar Fairy Lights" adds nothing. Cards show brand + type on line 1 and the spec on line 2, so nothing important can be cut.

Build: add an optional CMS "card name" field. Without one, a rule removes words the category already implies (USB, Solar, Powered By Leaf, the category noun) and moves the numbers to line 2. The full name stays on the product page, in the image alt text and in the screen-reader label.

Now
Proposed
Full product name (unchanged on product page)Card name
Fix 3

3One card per product family, with size buttons

Effort: medium–largeRemoves the duplicates at the source

Lumify Dual White is sold as three near-identical cards (100, 300 and 1000 LEDs). One card with size buttons shows the choice directly. Tapping a size changes the photo, price and link without leaving the grid, and the grid gets shorter.

Needs: a family/variant grouping in the product data, similar to product_pairs. Each size stays its own product for tracking, reviews and stock. Sizes that are out of stock appear greyed out but stay visible.

Now · 4 cards, 2 rows
Proposed · 2 cards, 1 row
Fix 1, second round · combined with fix 3

Five ways for the photo strip to show the size and let shoppers change it

Fix 1 labels each card. Fix 3 merges the sizes into one card. Combined, the dark strip on the photo can do both: show the spec, and switch size. All five ideas need the same data, which is products grouped into families. That grouping can be suggested automatically, because the names in these families differ only in their numbers (100 / 300 / 1000, 5M / 20M). Staff would confirm each group in the CMS. Each size stays its own product, with its own reviews, stock and link.

ASize buttons in the photo strip

Effort: mediumClosest to fix 1. Recommended

The strip becomes the size picker, with the chosen size in yellow. Tapping another size swaps the photo, price, reviews and link without leaving the grid. The name becomes the family name, which fits at every screen size, and line 2 repeats the chosen size so it's never lost. The colour moves to a tag in the top corner of the photo.

  • Same strip, same place as fix 1. Fix 1 can ship first and this replaces it later.
  • The grid gets shorter: the two Lumify families go from 5 cards to 2.
  • The 40px buttons sit just under the 44px tap-target guideline. The whole strip can be made 44px on phones.
  • Only 4 sizes fit. Larger families need idea C's sheet.
Phone · as loaded
After tapping "1000" on the first card
Laptop · 1280px, 4 columns beside the filter sidebar. Hover previews a size, click keeps it

BPrice ladder

Effort: mediumBest for comparing value

The strip on the photo only shows the colour and how many sizes there are. Under the name, each size gets its own row with its own price, and each row links straight to that product. Shoppers can see "300 for £30 more" without tapping anything.

  • Every size and price is visible at once, so there's nothing to discover.
  • Each row is a normal link, which suits search engines and tracking.
  • The card is about 60px taller for 3 sizes, so fewer products fit on screen.
  • Was-prices don't fit in the rows. Reviews need one family total, or move to the product page.
Phone

CStrip + "more sizes" sheet

Effort: mediumGets the right size into the basket

Cards look like fix 1, with the size on the strip, plus a "+2 sizes" cell. Tapping it opens a sheet from the bottom with every size: photo, reviews, price, was-price, and an Add button that names the size ("Add 300 LEDs").

  • Cards stay the same size as today, with one card per family. The sheet has room for a proper comparison.
  • Adding from the sheet means the shopper picks the size on purpose, which fixes the basket problem at the start.
  • Seeing the other sizes takes an extra tap. Desktop needs a pop-over instead of a sheet.
Phone · grid
After tapping "+2 sizes"

DExpand in place

Effort: medium–largeBest on tablet and desktop

Tapping "3 sizes" on the strip opens a full-width row under that card, with a mini card for each size. Tapping it again closes the row.

  • Every size is shown with its own photo, and nothing covers the grid.
  • The grid below moves down when the row opens.
  • On a phone the mini cards are only about 100px wide. Better on wider screens.
Phone · first card opened

EOne size switch for the whole page

Effort: medium + dataCompare brands at the same size

Quick buttons above the grid: LEDs: Any · 100 · 200–300 · 1000. Choosing one switches every family card to that size, and the strip highlights it. At 100 LEDs, Elan at £19.99 sits next to Lumify at £39.99, which is easy to miss today.

  • Works with idea A. The switch just sets every card's chosen size.
  • Needs the LED count as a product attribute. Today it's only in the name.
  • Families without that size must be hidden, or show the nearest size with a clear label.
Phone · "100" chosen
Sort & Filter 3 products
LEDsAny100200–3001000

Side by side

IdeaShopper sees sizesGrid lengthData neededMain risk
A · Strip buttonsOn the card, 1 tap to switchShorterFamiliesTap-target size; max 4 sizes
B · Price ladderAll, with prices, no tapShorter, but taller cardsFamiliesFewer products per screen
C · Sizes sheet1 tap, full comparisonShorterFamiliesExtra tap; pop-over on desktop
D · Expand in place1 tap, all with photosShorter until openedFamiliesGrid moves; small on phones
E · Page size switchEvery card at onceShorterFamilies + LED count attributeEmpty or "nearest" results

Recommendation

A for the grid at every screen size, using C's sheet for families with more than 4 sizes and as the add-to-basket step from the card. Add E later, once the LED count is an attribute, since it builds on A.

Until families are grouped, ship fix 1 as it is. Idea A reuses the same strip, so nothing is thrown away.

Fix 4

4More room for names

Effort: smallFixes the worst screen size

Laptop: while the filter sidebar is open, use 3 columns up to about 1440px instead of switching to 4 at 1280px. Name width goes from 126px to 184px, about 46% more.

Phone: add a Grid/List switch to the Sort & Filter bar. List view gives each name about 190px and up to four lines.

This alone is not enough: in the 3-column version the two Lumify Dual White cards still match. Combine it with fix 1 or 2.

Now · 1280px, 4 columns beside the filter sidebar
Proposed · 1280px, 3 columns
Now · phone grid
Sort & Filter 41 products
Proposed · phone list view
Sort & Filter GridList
Fix 5

5Basket: short name + spec chips, price always on screen

Effort: small–mediumFewer wrong-size orders and returns

The basket is where shoppers check they picked the right size. The new basket already keeps the price on screen, but on phones it cuts the name at 2 lines, so the LED count goes first. The main-site cart shows 4 lines of mostly generic words, and its price runs off the screen.

Proposed for both: a short bold name that always fits, then spec chips with the LED count highlighted, then the quantity control and price. On phones the chips go on the line that shows the SKU today. The SKU moves after the chips, or is kept for desktop only.

When the basket holds more than one size of the same light, a note asks the shopper to check the sizes.

Also apply the same chips to the add-to-basket sheet's "Related products" and the basket drawer, which currently cut names at 2 lines. The full name stays in the link and in the screen-reader label.

Now · new basket, 375px
Proposed · new basket
Your basket has 3 sizes of Lumify Dual White (100, 300 and 1000 LEDs). Check these are the sizes you want.
Now · main-site cart, 375px

Basket

Proposed · main-site cart

Basket · 4 items

Your basket has 3 sizes of Lumify Dual White (100, 300 and 1000 LEDs). Check these are the sizes you want.
Bugs found during the review

Three layout bugs to fix whichever option you choose

Main-site cart: price runs off the screen on phones

On a 375px screen the price column starts at x=302 and is 74px wide, so it ends past the 360px edge. Prices show as "£39.9" and "£139.9", and the crossed-out "£149.9" is cut too. Stack the price under the quantity control, or let it shrink. The new basket doesn't have this bug: prices fit even at 320px.

New basket: was-price and price run together on phones

The phone layout shows "£74.99£69.99 each" with no space. Desktop adds a 6px gap (desktopBasket.module.css line 38), but the phone layout has no matching rule. A one-line CSS fix: add a right margin to the crossed-out price.

Laptop cards clip the was-price

At 1280px, the 158px cards can't fit a 24px "£69.99" plus "£74.99" on one line, so the crossed-out price is clipped. Fix 4 (3 columns) solves this. Otherwise, wrap the was-price below the price.

Recommendation

Suggested order

Now

Quick wins

  • Fix 1: spec strip on the card photo, one product per card
  • Fix 5: spec chips in the new basket on phones, plus the was-price gap fix
  • Both are styling changes. Specs can be read from the names for now.
Next

Name, layout and data

  • Fix 2: CMS "card name" field with automatic fallback
  • Fix 4: 3 columns at 1280–1440px beside the sidebar, plus a phone list view
  • Families: suggest groups automatically from the names, then staff confirm them in the CMS
Later

Merchandising

  • Idea A replaces fix 1: size buttons in the same photo strip
  • Idea C's sheet for families with more than 4 sizes, and as the add step
  • Idea E once LED count is a product attribute