We'll redesign any section of your website to be optimized for conversion. Get a quote
Back

Category Page

1. Bug: overscroll happening somewhere on the page

A wrapper is spilling past the viewport and triggering horizontal scroll (i.e. overscroll).

Effort: Low

Impact: Low

2. Remove "home" link in breadcrumbs

Users are familiar with the pattern of clicking a site's logo to return to the homepage. Including a "home" link in a page's breadcrumbs is not necessary.

You only need breadcrumbs for the secondary categories, e.g. Women/Accessories/Hats

Effort: Very Low

Impact: Very Low

3. Remove background photo in hero section (behind "New Arrivals")

Your hero image may be working against you here. It feels visually cluttered—my eye is torn between the hero scene and the row of product shots right below.

Try removing the hero image and left align the title text. Gap is a good example.

Effort: Low

Impact: Medium

4. Allow users to mouse scroll/use trackpad through categories

Effort: Low

Impact: Medium

5. Bug found on URL path for each category

Each of your category pages has #cs-anchor-serp at the end of the URL path. When you click on a category, the URL appears to redirect to the correct page. This is fine, unless you want to go back to the previous page. Currently, this bug makes a user to click the back button twice to return to the previous page.

Steps to reproduce:

  1. Click "Shop Mens"

  2. Click "Back" button in browser

  3. You'll notice the URL updates to https://crazyshirts.com/collections/mens-apparel-just-in#cs-anchor-serp

  4. Then, you need to click "Back" again in order to get back to New Arrivals

Effort: Low

Impact: Very Low

6. Present alternate views of product images via hover

Here are two examples of hover animations:

  1. Quince - standard behavior; display related image on hover

  2. Gap - slightly less traditional behavior but very nice; display arrows to view alternate product images

Best Practices

Providing multiple images on product listing pages gives users additional details about each product to help them decide what to click on. Alternate views can be displayed on listing pages using a carousel-style presentation, where a default image is shown and users can click, hover, or swipe to view to additional images.

If using hover to display an alternative image, it must be adapted for touchscreens, where there is no cursor to hover. Many sites simply opt to only provide alternate photos on larger devices. Other sites show carousel dots to indicate alternate views, and allow swiping on the image in the product listing to view other images.

Effort: Medium

Impact: Medium

7. Display filter panel by default

This works okay since you can still filter, but hiding all your filters behind that single “Show Filters” button adds friction and buries discoverability—especially since it doesn't look like a button.

Lay out the full filter panel on the left sidebar so every option is visible at a glance.

Effort: Low

Impact: High

8. Badges/images should be high resolution

The orange badges appear blurry. Make sure you're using a large enough photo for any image. For these badges, we'd recommend using SVGs so they look good on all screen sizes.

Effort: Low

Impact: Low

9. Remove "New" badge on "New Arrivals" collection page

Badges shouldn't be displayed on their corresponding collection page. In this case, hide "New" badge on "New Arrivals" page. When every product has a badge it loses its impact. Instead, show other relevant tags like Bestseller or Top Rated.

Effort: Low

Impact: Very Low

10. Reserve larger sizes for main titles only

The product name & price font size is too big at 20px. It shouldn't be any more than 16px here (15px is typically a good size and you may even make the price a touch smaller).

Effort: Low

Impact: Low

11. Add more padding below page numbers

Add ~50-80px padding below the page numbers to give enough space before the USPs. This will help the page content from feeling too squished.

Effort: Low

Impact: Low

Next steps

That's all the notes for this design. Check out the other designs in this section—