Using product detail pages to your advantage

For the online seller, creating an engaging and user-friendly online store is essential to attract customers and boost sales. There are a variety of built-in tools you can use to captivate and convert your audience, but let’s focus on how product detail pages can showcase your products effectively and convert visitors into loyal customers. These pages are your opportunity to share more details, dimensions, images, and variants with your customers. Here are some tips to make the most of your product detail pages:

• Use high quality images that showcase your products from various angles. Having multiple images per product allows your customers to get a complete understanding of what they’re purchasing. 
• Include compelling product descriptions that provide detailed information about the product’s features, benefits, and usage. Keeping these descriptions concise and scannable will make them easier for your customers to understand. Be sure to be mindful of SEO best practices!
• Enhance the user experience by suggesting related products or cross-selling items that complement the one being viewed. You can do this by switching on the Related Products toggle in the Commerce panel. These related products may increase the amount of time a customer spends on your site and give more visibility into your product range.
• Leverage customer experience to instill confidence in potential buyers by including product reviews. 

What do you find most impactful to include in your product details page? Do you like to style it in any particular way? Share in the comments below! 

Check out our free webinar Design tips to increase your store sales for more ideas to make your store a success. 

Quote

Do you like to style it in any particular way?

A couple of oft requested custom modifications folks like to make.

Reordering the elements of the detail area ( price, description, add to cart, and etc. ).

Moving info from Additional Info into the details area.

Another request:  A way to set "sold out" text to be consistent with the product's type.

Use case:

• For products that can have multiples (e.g., posters): "Sold out" should be displayed
• For products that are one of a kind (e.g., original works of art): "Sold" should be displayed
• For products with limited capacity (e.g., classes and workshops): "Full" should be displayed

Currently the only way to do this is to organize products types by page and use code injection on each page.

Being able to sort your products would be a good first start. Not having a sorting option built into the settings is a gross oversight. And then ignoring customer requests for years to add it...

We need a unit of measure text descriptor option so badly. So many businesses sell by the ton, cubic yard, or by the unit. Need a way to add that in.

We have a lot of info to convey in the description of our products. It would be nice if there was an option for keeping the product image on screen while the description is scrolled through, so basically the same way amazon works - keeping the images accessible while the description is scrolled - until you reach the "additional info", at which point it then scrolls off. This would help to keep the product image there for reference or further exploration while the description is being read. In addition, although selecting variants currently changes the main image to reflect the variant chosen - most of the time the image isn't actually on-screen, having long since scrolled off, so this feature is pretty useless unless you have a very short description.

I've tried some simple custom code to achieve a non-scrolling product image, but unfortunately it doesn't entirely play nice with squarespace and causes some untidiness when scrolling, especially on mobile, so I've not gone that route.

Overall it feels like the layout options for product pages are very limited, especially when compared to the flexibility of fluid engine on other pages.

3 hours ago, sussexseamstress0603 said:

We have a lot of info to convey in the description of our products. It would be nice if there was an option for keeping the product image on screen while the description is scrolled through, so basically the same way amazon works - keeping the images accessible while the description is scrolled - until you reach the "additional info", at which point it then scrolls off.

@sussexseamstress0603 This should be possible with a few lines of CSS, but it will depend on the PDP layout you are using. Can you provide a link to a product?

Hi @paul2009

Thanks for your offer of help. An example product can be found here: https://www.sussexseamstress.com/patterns/p/glynde-womens-waistcoat-pattern

When trying this with css before, I ran into some untidiness where scrolling up/down into additional product info would do odd things, or I'd end up with text overlapping the photo in certain situations on mobile, I also had some issues with the header bar if I remember correctly - it was a while ago I tried it - my memory is hazy!

@sussexseamstress0603 Is this what you want to achieve?

You should be able to achieve this with the following CSS:

/************************************** 
Make the Product Gallery sticky on PDP
Provided by paul @ https://sf.digital
Use freely in your Custom CSS.   
Do NOT re-publish.
**************************************/
@media screen and (min-width: 800px) {
  .ProductItem-gallery {
    float: none;
  }
  section.ProductItem-gallery {
    flex: 45%; 
    position: sticky;
    top: 130px;
   }
  section.ProductItem-details {
    flex: 55%;
  }
}

Did this help?

Please give feedback by clicking one of the icons below  ⬇️

That's brilliant @paul2009 - thank you ! Will give it a try.