Product Slider BlockFree downloadMenu

Glass bar, a frosted pill with one round button

A rounded pill of frosted glass floats just inside the foot of the picture. The name and price are on its left, a round bag button on its right, and when the card is pointed at the whole pill lifts slightly. Pro

Black over-ear wireless headphones on a white background
Soft-shell headphones€219Clear highs and a tight low end, with up to thirty hours on a charge.
Coral red wireless headphones lying on a polished red wooden surface
Coral wireless headphones€179Clear highs and a tight low end, with up to thirty hours on a charge.
White wired headphones with brushed metal ear cups on a yellow background
Brushed metal headphones€89Clear highs and a tight low end, with up to thirty hours on a charge.
White on-ear wireless headphones on a white background
Chalk on-ear headphones€129Clear highs and a tight low end, with up to thirty hours on a charge.
Black open-back headphones on a dark textured surface, in black and white
Open-back headphones€249Clear highs and a tight low end, with up to thirty hours on a charge.

What the glass gives you

The photo carries on behind the glass, so the card looks like one object rather than a picture with a caption. All the details stay visible at all times, and each card is the height of its picture. It looks at home with electronics, audio and anything photographed against dark or rich backgrounds.

A bag, not a sentence

The cart is a single round icon, and it never opens into words. That saves the width for the name, and it is a sign that visitors know from apps. Its name for screen readers remains the add to cart text. If your shoppers are not used to this, choose Slide-up or Classic, which use words.

Narrow cards and browsers

The pill needs some width: a long name is cut with an ellipsis so that the bag keeps its place, and there is no room for ratings. The blur comes from backdrop-filter, which current browsers support. Where it does not work, the pill just stays solid in your theme's base colour with some transparency, so the text remains readable.

Questions

Is the rating lost?

In this design, yes. Choose Classic or Panel if ratings matter in your shop.

Does the glass take my theme colours?

Yes. It is your theme's base colour at about three quarters strength with a blur behind it, and the text is the contrast colour.

Sample products throughout. Pro starts at $19 a year.

Get the free plugin