15 Design Tweaks That Transformed Etsy’s Product Page in 2020
This article reviews fifteen specific UI changes Etsy implemented on its product pages in 2020, explaining how larger search areas, repositioned image selectors, revamped price displays, enhanced reviews, and other tweaks improved visibility, usability, and brand perception for shoppers.
1. Larger Search Area
The top of the page was changed to a larger header bar, expanding the form area to increase hit range, making it more visible and easier to click.
2. Image Selector Position Adjustment
The selector moved from the bottom of the image (common in e‑commerce) to the left side.
Reasons: (1) The new top‑area added a back navigation, lowering the first‑screen height; (2) The left side was previously empty, improving first‑screen space utilization.
3. Updated Image Navigation Buttons
The previous semi‑transparent rectangular buttons were replaced with opaque circular icons with shadows, making them stand out against varied image backgrounds and creating a more unified style.
4. Larger Price Display
The price font size was increased, making it easier to locate and more prominent, aligning with user goals for clear price visibility.
5. Bigger Selection Box
The selection box’s font and clickable area were enlarged, increasing hit range and visibility similar to point 1.
6. Highlighted Review Stars and Count
Star ratings and the number of reviewers are now displayed more prominently, enhancing credibility.
7. Split Product and Shop Review Dimensions
A new tab shows reviews for the individual product, separate from the shop’s overall reviews, reflecting the growing number of product‑specific ratings.
8. More Complete Reviews in a Smaller Area
Although the visible review section’s height was halved, it still shows four full‑text reviews without truncation, removing the previous one‑line cut‑off issue.
9. Paginated Review Display
Reviews now appear with bottom pagination instead of link‑based navigation, making pagination clearer, more convenient, and more strongly guided.
10. Revised Review Photo Gallery
The gallery now shows larger images, reduced to five photos, with the navigation button placed on the last image, reinforcing the perception of more images and aligning with other gallery buttons.
11. Strengthened Delivery Information
Delivery details are now more prominently displayed through layout adjustments, helping users quickly grasp expected arrival times.
12. Simplified Return Information
The new version provides store‑specific return notes instead of a full list of return policies.
13. More Visible Contact Button
A clearer contact button is added to help users seek assistance when needed.
14. Special Styling for Different Products in the Same Shop
The shop logo is enlarged and each product gets a distinct background color, clearly separating same‑shop items and boosting brand exposure; double‑row layout also enlarges product images, improving horizontal space usage.
15. Footer Style Changes
The page footer now uses a distinct visual style, creating contrast with the main page and strengthening brand recognition.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
JD.com Experience Design Center
Professional, creative, passionate about design. The JD.com User Experience Design Department is committed to creating better e-commerce shopping experiences.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.