This article was originally published on this site

TwitterFacebookLinkedIn Designing a product page is part art, part science A while ago I wrote you about a conversion problem. Conversions are always about trust. But when it comes to eCommerce, we’re never done optimizing conversions, right? That’s why I wrote and delivered a talk on designing the product page back in 2019. I must have given that talk 10 times between 2019 and 2020. But now we’re in 2021 and things have gotten a bit more complex as people transition from page builders like Elementor and Beaver Builder, and check out Gutenberg to see if it can create delightful product pages. Product pages that work great Anova Precision Cooker Nano One of my favorites is the Anova Precision Cooker Nano.

  • Sticky header with the purchase button
  • Large typography
  • Beautiful images
  • Video of product at work
  • Feature callouts
  • Photo gallery
  • Tons of testimonials

Olukai Lae‘ahi Slip On Shoes Here’s another great product page by Olukai. Below the standard photo, shoe selector, and size options, you’ll again find all the stuff that makes a product page inviting these days.

  • Video
  • Fit Guide
  • Feature Callouts
  • Notices for free shipping
  • Reviews and Q&A sections
  • And that sticky header to purchase

Contrast that with this product page selling a different shoe. Not the same, is it? I don’t see galleries. I have to click extra to see details. The fit guide is ridiculous. How to create these without a page builder If you had asked me a year and a half ago, I would have told you that you needed a page builder like Beaver Builder (my go-to for page builders). You just weren’t going to be designing the product page with what was available via Gutenberg at the time. But that was then. Today things are different. You now have options. WooCommerce Blocks First, you have Gutenberg blocks that come directly with WooCommerce. But if you want to get access to more of them, you can install this feature plugin. It gives you the bleeding edge of what’s possible from the team behind Woocommerce and they keep updating things. Kadence WooCommerce Extras There are also theme folks like Kadence that are creating solutions that deliver extras to your WooCommerce product page. It also comes with ways to tweak your checkout. Iconic Extensions Of course we can’t talk about tweaking your product page without talking about Iconic. These are the folks that give you attribute swatches, different gallery options for thumbnails, break apart variations into their own products in your catalog, and have their own improvements to the checkout. WooBuilder Blocks But if I had to point you to only one repository of Gutenberg blocks for your WooCommerce Product Page, it would have to be WooBuilder Blocks. These blocks let you design the product page from scratch, or use one of your own templates, or choose from one of theirs. I would have created a video to show you this, but they already did. Now, there’s only one thing left Once you realize that you can create any product page you want – especially because of WooBuilder Blocks – there’s really only one thing left. It’s now your turn to create anything you can imagine. But that can be tough if you’re not creative. So here are Hubspot’s Favorites in case they give you some inspiration. Whatever you find, I’m pretty sure you can re-create, using these tools and WooCommerce. TwitterFacebookLinkedIn This post may contain affiliate links. If you click on them and make a purchase, I’ll get a commission, at no cost to you.