Custom Product Pages in the UH+ Drupal Commerce 2 Demo

Custom Product Pages in the UH+ Drupal Commerce 2 Demo

Acro Media recently launched a demo ecommerce site called Urban Hipster that exhibits the incredible range of out-of-the-box functionality you get with Drupal Commerce 2 (check it out here). To make the demo even more amazing, we've also created a “Plus” version that shows you what's possible with a bit of extra work.

Some background

If you have an ecommerce business or have a product that you're trying to sell online, a product catalog could be just what you need. But if you produce your own product or you only have a few different products, a product showcase is actually a better way to demonstrate and sell your wares. It's like buying something on Amazon vs buying something on Apple: Amazon has an enormous list of products and all the pages look the same, whereas Apple has fully customized, unique pages for each item it sells.

UH Axe builder product page

When you go to buy the UH Axe on the demo, you'll bring up a unique UH Axe builder product page in the Apple style. The page talks about what the UH Axe is and what its purpose is, and then you're able to choose the type of handle you want, the handle length, how heavy the axe head should be, whether you want a sheath, etc. By the time you add it to your cart, it has become a completely unique product with all the variations that you've chosen. But it exists and is configured the same way that any other product would.

Check Out Our High Five Drupal Web SeriesIt's actually a very similar configuration as the White and Wood Chair example on the demo; it just looks completely different.

The functionality behind a lot of the extra content is a module called Paragraphs. It's similar to Panels (which a lot of people use), but a bit simpler and more streamlined. It doesn't have the same breadth of functionality, but it's easier to work with, and it lets you do all those customizations like deciding where you want to put it on the page and so on. It looks very custom, but it is surprisingly configurable through the back end.

(A note of caution: while it's mostly out-of-the-box functionality, some of the more complex design elements did require a bit of custom code. That’s why it’s on the “Plus” demo.)

Keep in mind that it's not uncommon to have both ways of viewing the product: a fancy customized page as well as a more standard catalog. People can get to the product through either route.

The bottom line

You can make awesome product pages through Drupal Commerce without a lot of effort.

Visit Our Drupal Commerce 2 Demo Site

 

More from Acro Media

Chat with us

If you'd like a personalized tour to discuss how Drupal Commerce fits into your ecommerce solution, give us a shout. We're happy to show and tell.

Contact Us

Crystal Lee
Contributed by

Crystal Lee

, Drupal Wordsmith
Up Next:

Web Design - The Post Template Age

Next Article
Get Free Widget

Fields marked with * are required.

×