Purplish – Block Design Toolkit for WooCommerce

Open a few WooCommerce stores on block themes and you’ll see the same add to cart button, the same gallery and the same product cards, whatever they sell. The blocks are good. They all start out looking alike, though.

Purplish is a block design toolkit for WooCommerce. It gives those blocks, and the patterns you build from them, the design options they don’t have on their own. Select a block in the Site Editor, open the Purplish panel, and decide how it looks and moves. You need no page builder and no custom CSS, and nothing of WooCommerce’s gets replaced.

Think of a product page that takes the color of the variation a shopper picks, a gallery that tilts toward the mouse or slides in like a film reel, or a shop page where product cards fan out and hang from a clothes line.

Built to stay out of your way

• Works on the blocks you already use: Purplish adds a panel to 19 WooCommerce blocks, from the Product Gallery to the Checkout, and to 8 core blocks, like Group, Cover and Button. It replaces nothing.
• Each template keeps its own look: your choices are saved on the block in the template, so two templates can look different.
• Off means off: deactivate Purplish and your store looks exactly as WooCommerce draws it.
• Loads only where it’s used: the color script loads on variable products only, and each effect loads only on pages that use it.
• Your photos stay on your server: no outside requests, no tracking and no account to sign up for.
• Quiet admin: no banners, notices or upsells.

Product page colors

When a shopper picks another color on a WooCommerce product page, the photo changes and nothing else does. The button, the sale badge and the price look the same for the orange sweater and the navy one.

With Purplish, the page follows the color. Pick blue, and the add to cart button, the selected option and the sale badge turn blue. Pick orange, and they turn orange. Each variation has a Page color setting:

• Automatic: the default. Purplish finds the product in the photo, not the wall behind it, and takes its color. If the color attribute has a swatch color, that comes first.
• Custom: pick a color or type a hex code. Purplish uses it exactly as you set it.
• Off: the variation keeps your theme’s colors.

A photo’s color is often too dark or too pale for a button, so Purplish keeps the hue and adjusts it for each use, with readable text on the button. Simple products get one color for the whole page.

You pick what takes the color: the add to cart button, the selected option and the sale badge (all three on by default), the sale price and a soft background tint. The page opens in the default variation’s color, so there’s no flash of your theme’s colors first.

When the color changes, the photo changes with a transition: Blur (the default), Fade, Zoom, Slide, Flip, Wipe, Circle reveal, Color wash or None.

Product gallery

Select the Product Gallery block and choose how the photos behave:

• Hover style: 3D tilt leans the photo toward the mouse, Zoom magnifies the spot under it, and Loupe shows a round magnifier. Lift, Parallax, Glare and Slow zoom add softer motion. Any hover style replaces WooCommerce’s own hover zoom, and touch screens skip it.
• Full-screen style: the view that opens when a shopper clicks the photo. Pick Snap stack, Zoom from photo, Filmstrip, Cinema or Classic fade. It needs the gallery’s “Open pop-up when clicked” setting.
• Slide style: how the next photo comes in: 3D media gallery, Circular slider, Reel slider or Image tunnel.
• Layout: hide the thumbnail strip, round the photo’s corners, and add frosted arrows that show on hover.
• Thumbnail shape: select the Thumbnails block inside the gallery for rounded or circle thumbnails.

Product cards

On shop and collection pages, select the Product Collection block:

• Add to cart on the photo: a small frosted button sits on the photo, and the title and price share one line. It shows on hover, and always on touch screens.
• Details on the photo: the title, price and add to cart sit on the bottom of the photo over a soft shade. They show on hover, and always on touch screens.
• Effect color: one color for the button fill, the card effects and the hover looks. On a product page with a variation color, the variation color wins.
• Card effect: one of 23 effects for the whole collection. Cards can fan out like a hand, hang from a clothes line, or stack in a coverflow.

Effects on hover: Spotlight, Color reveal, Fan deck, Expanded cards, Magnetic panel, Card folder, Bookmark and Roster.

Effects in a carousel (a grid stays as it is): Deck, Arc, Spotlight carousel, Grow, Tilt, Depth, Overlap, Momentum, Wheel, Helix and Reel. Momentum, Helix and Reel can also be dragged with the mouse.

Effects as cards scroll into view: Clothes line, Parallax, Zoom reveal and Unfold (Unfold needs the Grid layout).

• Hover: one look each for the card, the photo and the add to cart button, alongside any card effect. Photo looks include Second photo, which swaps in the product’s first gallery photo.

Small details

On the Add to Cart + Options block:

• Title and price rise: after the photo changes, the title and price rise into place. Or pick Title comes into focus, and the title sharpens into view.
• Glow ring: a soft ring in the page color around the add to cart button.
• Halo: a ring leaves the button and fades each time a product goes into the cart.
• Mesh background: soft blobs of the color sit over the background tint and move each time the color changes.
• Color dots: each color option shows a dot in its own color, like Orange or Blue.
• Liquid glass and spectrum ring: the add to cart button gets a frosted fill with a highlight that follows the mouse, and a rainbow ring that travels once around its edge on hover.
• Googly eyes: one or two eyes inside the add to cart button follow the mouse.

On other blocks:

• Accordion, Accordion Group and Details, Soft style: each item becomes a soft card, and its icon fills with the page color when open.
• Group, Take the page color: on product pages, the section’s background becomes a soft version of the color the shopper picks.
• Variation Selector, Grayed-out look: options that can’t be bought get a diagonal line over the chip (swatches too), or they blur out.
• On-Sale Badge, Shape and Corner: a pill, circle or price tag badge. On the gallery photo, it can sit in any corner.
• Product Reviews, Review style: each review on its own soft card, or the review text in a chat bubble.
• Product Specifications, Table style: every other row shaded, or each row on its own soft card.
• Product Filters, Matching chips: the active filters take the look of a selected chip, and a chip fades into its selected color when picked.
• Mini-Cart, Count pop and Fly to cart: the item count pops each time something goes into the cart, and Fly to cart sends the product photo into the cart icon.
• Image, Hover style: the gallery’s 7 hover styles on any image block, from 3D tilt to Slow zoom.
• Button, Looks: a glow ring, a light sweep, liquid glass, a spectrum ring and googly eyes, in any mix.
• Heading, Reveal on scroll: the heading rises into place or comes into focus as it scrolls into view.
• Group and Columns, Entrance on scroll: the section fades up or zooms in, and columns come in one after another.
• Cover, Scroll effect: the background slowly zooms or drifts with the scroll, or the cover opens from a small pill to full size.

Nothing moves on its own. Every effect plays on a hover, a scroll, a color change, an add to cart, an opened cart drawer or a placed order, then stops. Visitors who turn on reduced motion on their device get the colors without the animation.

Cart, checkout and order confirmation

• Proceed to Checkout, Place Order and Go to checkout, Looks: the glow ring, light sweep, liquid glass and spectrum ring from the Button block, in any mix, with one effect color. Place Order can also show a small lock before its label. Place Order is in the checkout’s Actions block, and Go to checkout is in the Mini-Cart drawer.
• Mini-Cart drawer, Looks: the drawer opens with a soft spring and the items follow one after another. Items can sit on soft rounded rows, with bigger photos.
• Cart, Looks: items on soft rounded rows, bigger product photos, and totals that stay in view while a long cart scrolls.
• Checkout, Looks: soft, filled or underline fields, a focus ring in the effect color, shipping and payment choices as cards or one list with the picked one tinted, step numbers as badges or a timeline, the order summary on a soft rounded card with a bigger total, a tinted side panel, the whole checkout on a raised card, and bigger order photos. Labels still float, and nothing on the checkout moves.
• Order Status, Thank-you moment: when the order confirmation page opens, the heading rises into place and a burst of rays in the effect color flashes behind it once.
• Order Summary, Receipt card: the order number, date, total and payment method sit on a paper receipt with a torn bottom edge and a dashed line between rows.

Hanging Rail block

A block of Purplish’s own, in the Purplish group of the block inserter. It holds a heading, a short line and one Product Collection, so you pick the products the way you already do.

• Products on a rope: the section holds still while the page scrolls, and the products slide along a rope that sags between them, swinging on their clips.
• Clip and rope: a wooden peg, a binder clip or a strip of tape, on a rope that sags a little or more.
• Scroll length: short, medium or long, scaled to how many products there are.
• Pattern: Hanging rail of new arrivals adds the block with a heading, a short line and your 8 newest products.

Visitors who turn on reduced motion see the products as a row they can scroll sideways, with the rope and clips still drawn.

Story Deck block

Each story is a group with a photo, a quote, the customer’s name and, if you want, a button to the product. The photos become a deck of cards, and the top card’s story sits beside it.

• Flick through: visitors drag or swipe the top card away, or use the previous and next buttons or the arrow keys. After the last story the deck starts again.
• Deck options: cards on the left or right, rounded or square, fanned like a hand of cards or flat. On phones the cards sit above the story.
• Pattern: Customer stories deck adds the block with three sample stories, each with a Shop this button.

The deck never moves on its own. Visitors who turn on reduced motion switch stories with a short fade.

Runway block

It holds a heading, a short line and one Product Collection, so you pick the products the way you already do. Every product photo becomes a look, and the looks stand in one line that gets smaller and softer toward the back.

• Walk the line: visitors drag or swipe, tap a look further back, or use the previous and next buttons or the arrow keys. After the last look the first one returns.
• Product rail: the product cards sit beside the line and follow the look at the front. On phones they run under it as one row.
• Runway options: every product photo or the featured one, framed or cutout photos, look numbers, and photos that fly into the mini cart.
• Pattern: Runway lookbook adds the block with a heading, a short line and your 6 newest products.

The line never moves on its own, and a normal mouse wheel still scrolls the page past it. Visitors who turn on reduced motion step one look at a time with a short fade.

Scroll Lookbook block

It holds Cover blocks, one Product Collection and a Group. Each Cover is a shot: as visitors scroll, the camera moves from shot to shot, holds at each one and brings in that product’s card on the side away from the subject.

• Shots and cards: each Cover holds a video or a photo, and the first Product Collection gives the cards. Each card’s button takes its product’s Purplish color.
• Scroll Lookbook options: a chapter list on or off, a timecode on or off, and a short, medium or long scroll for each stop.
• Pattern: Scroll lookbook storefront adds the block with an opening shot, three shots and a closing line.

The opening video plays once and stops within 5 seconds, and nothing loops. Visitors who turn on reduced motion get each shot with its card beside it as a plain page.

Block and classic themes

Purplish is built for block themes and tested with the free Purple theme. On a block theme, every option sits in a Purplish panel on the block it changes, in the Site Editor.

Classic themes get a smaller set under WooCommerce > Settings > Products > Purplish: the page colors (except the selected option, since classic themes show a dropdown), the photo transition, the title and price rise, and three gallery options: hide thumbnails, rounded corners and the hover style.

Why I made it

Purplish started with one small idea from a chat on X: let the product page take the color of the variation a shopper picks. Building it showed me how much more WooCommerce’s blocks can do with a few good options, so I kept going. The Purplish website runs on WooCommerce, the Purple theme and Purplish itself.

Shameem Reza

Source code

The code is on GitHub. The readable source of the scripts ships in assets/src, next to the built files in build. To build them, run npm ci and npm run build.

Privacy

Purplish doesn’t collect, store or send personal data. It sets no cookies and makes no outside requests.

Credits

Thanks to Luigi Teschio for the idea, from a discussion on X: set each variation’s color by hand, or read it from the photo.