Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Custom Product Pages in the UH+ Drupal Commerce 2 Demo

Parent Feed: 

 

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

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web