Sometimes, we are so sweet on a product page that we want to eat it up! That's definitely the case with the listing for Alice's new sexual-wellness mushroom chocolate bar, Happy Endings. Whoever is behind the design is getting a Valentine from us this year!
Let's take a closer look at the individual elements the make this long-scroll product page so effective!
We'll review each element or section from top to bottom, and put into words what is sometimes taken for granted or absorbed subliminally. There are 25 elements here, more than twice the count on a PDP with just Shopify's default product page settings.
We’ll also make note of which elements are “defaults” — content or formatting that comes with Shopify product pages automatically — vs custom built, and when we guess they’re using a third part app.
Note, screenshots here are representative of the site’s mobile view, since that’s how we (and most customers) usually first experience a product’s page.
The Product Page Elements
Announcement Bar
Screengrab from Alice
Announcement bars are a built-in functionality on Shopify themes pretty much across the board these days, but the wavy (actually animated) divider on this one goes a long way in communicating Alice’s “trippy but you won’t trip” vibe. It reminds me of melting chocolate and of being on acid—brilliant!
Navigation bar
Screengrab from Alice
Might seem silly to talk about a navigation bar, since it’s a given, but there are actually a lot of missteps that can be taken. I’ve seen, for example, a brand with a white logo on a white background (and by “seen”, I mean it was actually invisible!)
Alice makes no such mistakes, and their bold, brief logotype reads nice and clear. When working with clients on branding, I often take their nav bar logo appearance into consideration early on; pouring your heart and soul into a delicate, tall logo just to discover it’s unintelligible online is a bummer.
Product title
Screengrab from Alice
It’s definitely trendy right now to use glyphs in design (I do often, and my fav tool for this is glyphy.io), but I haven’t seen them used in product titles on a Shopify site until I came across Alice.
I’m all for it, and really enjoy the typeface used here too. As you can imagine, the title field is a default element on Shopify PDPs, so it’s fun to see a little flair here.
Product subtitle
Screengrab from Alice
This product subtitle element is a simple but customized field — not a default. Alice has used this really smartly, providing a very straightforward but specific statement of what this product is. If you didn’t read anything else on the page or scroll at all, you’d still be left with a very accurate impression.
Product images
Screengrab from Alice
The product image section itself is pretty straightforward, but its success is largely due to the high quality product photography and well-designed packaging here. The subtle choices that make this default carousel more “on brand” are the rounded corners on the images (called “border radius” in design/dev), and the simple dot markers instead of thumbnail images.
That swap—dots for thumbnails—is a good example of how internet users (your customers) adapt so quickly to UX developments, and how progressive designs embrace change, all in a sort of infinite feedback loop. Just a few years ago it might have felt “confusing” to have dots here; a brand would likely have given a designer pushback on this and insisted on thumbnails to make this “easy” to navigate, but now savvy shoppers (aka your ideal customer) don’t need the extra visual cue. You can probably thank Instagram carousels for this education.
Quantity, Subscribe, and Add to Cart
Screengrab from Alice
I like the use of this card-style section block to highlight the most important CTA on the page: the add to cart button. I wonder if some of the copy here is just a tad too small (she must have taken the bottle that said “drink me!") but the overall impression is very clear.
I’ve been keeping an eye on subscriptions trends, and it’s interesting to note that Alice has opted to use “one time purchase” as the pre-selected option here; it’s an ongoing debate if brands should use “subscribe and save” as the pre-selected option instead. I prefer the former, because I think it’s better to have fewer, happy customers than more, unhappy customers (folks who didn’t realize they subscribed and who are upset they got charged and must arrange to cancel.)
Microcopy
Screengrab from Alice
A little extra line included here sets expectations related to the purchase; it’s not particularly “branded” but delivers confidence in a subtle manner. Everyone always warns you to read the fine print as if it’s a bad thing, but in this instance it’s positive, and feels official.
Not to over-explain here (in more words than the reference haha), but it takes shoppers microseconds to sense if they’re having a “safe” shopping experience. Subliminal touches like the official-ness of this microcopy help support that good impression.
Bundle section
Screengrab from Alice
I think this bundle section is actually one of the weakest elements on the page because of how similar the three product shots are. They may be using a third party app for this, or it may be simply hard-coded; either way I’d try to find a workaround that helps the customer understand what products they’re getting here.
Features icons
Screengrab from Alice
I’m a sucker for a set of custom icons like these, and I think it’s easier for brands to achieve this than they think. This page section design could be achieved multiple different ways, and it doesn’t take much to make the icons feel special.
These feel custom because they’re ovals instead of circles, are all one brand color, have brand illustrations that are probably custom themselves, and address some product-specific selling points like caffeine levels and mushroom content. Compare that to any old “free shipping” or “handmade” icon pasted in from Canva and you’ll see why it matters that Alice went the extra mile.
Product description accordion
Screengrab from Alice
So, at this point in the product page you might be wondering where the default product description field ended up. Do you think this is it?
Nope! Not exactly.
This section, formatted in what we call an “accordion”, does stand in for the default product section, but is custom coded to replace it.
Why bother?
Well, otherwise you’d be looking at a wall of text, your eyes searching for something to land on, because the default product section doesn’t have a lot of formatting options. by using the accordion instead, Alice compacts and organizes these details. Each ‘tab’’s content is definitely populated with dynamic data, so this probably takes a little coding to get right.
Press slider
Screengrab from Alice
Toot toot! Why hold back? With great pull quotes from great publications like these, you should be singing from rooftops. Putting these right on the product page imparts tons of confidence to your potential customers.
As I mentioned above, it’s important to make a good first impression, quickly. But one aspect particularly relevant here is the idea that some, perhaps many, shoppers may land on this product page directly from an ad without any contextual info about the brand. Putting this press info here rather than on the homepage or about page, delivers confidence while keeping them shopping (and reducing bounce rates.)
Product call out
Screengrab from Alice
Oh, you’re still scrolling? Alice brings the focus back on the product at hand here with a new, quippier callout to remind shoppers why they should buy. They also reinforce the product usage instructions (“one daily bite”) but in a non-boring way. Plus, there’s tiny line drawing sex!!
Trifecta with CTA
Screengrab from Alice
This section is an exciting spin on the usual custom “trifecta” section because in addition to the headline/featured image/subheading, there’s a call to action button, which, somewhat surprisingly, takes you back to to the top of the page.
This is an alternative to a floating “back to top” button that I haven’t seen before, it’s like a reverse anchor link. I think it’s really smart and love how it feels like a mini ad for the product on its own product page.
Trifecta
Screengrab from Alice
This is a more straightforward example of a product trifecta feature (headline, featured image, subheading), which hinges on a fantastic graphic. Again, it feels like a vintage ad, and succinctly delivers a lead in to the more detailed ingredients list section up next.
Ingredients accordion
Screengrab from Alice
Like the product description accordion at the top, this is a space saver and keeps things tidy.
But the appeal of tapping to interact with the list shouldn’t be overlooked. I think everyone can agree it’s satisfying to open these little lists. Did you know those arrow characters are called carets?! 💎 🥕
Trifecta with CTA
Screengrab from Alice
Again, the trifecta with CTA that takes you back towards the main Add to Cart section.
At first glance it might feel silly or superfluous to assert that these chocolates are gender neutral and can be used solo or in groups, but it’s a pretty major moment here for the brand to assert their values, in the hopes of matchmaking with customers who share the same.
Features slider
Screengrab from Alice
More buzzwords here (“creates space”) that resonate with younger shoppers. This section, a custom carousel with playful copy, doesn’t have much important info, but expands upon the overall story of this product—and which customers ultimately buy into.
Infographic chart
Screengrab from Alice
There has been a trend recently of including infographics like this competitor comparison chart in products’ main image carousels, but I like it here in the body of the PDP, too.
Not only is Alice telling buyers what they offer that others don’t; this chart reminds customers of the alternatives, and paints them in a relatively negative light. It’s Psych 101 and I’m here for it.
Reviews
Screengrab from Alice
No reviews yet. Will yours be the first? Looks like they’re using the built-in Shopify reviews block, though rumor has it the platform is planning to change this up soon. We’ll be sure to keep you updated.
You might also like...
Screengrab from Alice
I LOVE this YMAL section, because unlike most “you might also like” blocks, it’s a combo: one featured product and one featured collection. This is definitely customized with some coding, as this type of section is usually a group of one or the other.
Also, maybe I’ve been staring at this all for too long but I’m just now realizing how much the little mushie icons look like arrows!
FAQ
Screengrab from Alice
We’re at the point on our long-scroll product page that the content is more brand-general rather than product-specific, and that’s what we’re seeing here in the FAQs. This is likely the same on all chocolates pages, so no dynamic data needed here, but it’s certainly not a default section!
About feature
Screengrab from Alice
This graphic is a little weird, but I like the option to dive deeper if I’m a shopper not ready to buy; presumably, if they’ve gotten this far without purchasing, they may be in an earlier stage of the buying journey. Having made it past the awareness stage, they’re stuck in consideration, and so prompting them to learn more about the business’s story is a calculated more.
Newsletter block
Screengrab from Alice
A nice example of going the extra mile by using copywriting infused with a strong brand voice. It doesn’t take much—just 20 words —but it’s hard to be brief and entertaining (see: this article).
In my opinion this is actually a super critical customer touchpoint to get right. If slick , cutesy copy here isn’t backed up by quality email marketing that delivers on the promises made here (enlightening sparks of joy and knowledge), they’re in danger of major churn on their list.
Based on this PDP, I suspect their emails won’t disappoint, but I haven’t gotten any campaigns yet. Will report back!
Charity line
Screengrab from Alice
I wish this was easier to read, but at least it’s linked to the org itself. Including it here is a nice touch, and the relevancy of the non-profit’s mission (healing with psychedelics) to Alice’s brand makes this feel really sincere.
Footer
Screengrab from Alice
It’s a footer! Not too much to say here other than to note that they use a secondary logo here as a final brand reinforcement.
Conclusion
There’s so much to crush on with regard to Alice’s Happy Endings product page. There’s even a mushroom-shaped cursor with a sparkly mycelium-magic-dust trail. We commend the Alice team for delivering such an in-depth, on-brand experience for their customers. I know they’re going to sell outta these before Valentine’s Day, so grab a dose while you can and start getting it on!