What's the best way to display product images for optimal user experience?

What's the best way to display product images for optimal user experience?

propel
Excursionist
33 0 5

Hello there

 

I need your honest opinion on how to display images on a product page.

 

Currently, I am displaying the basic product images at the top in a form of a carousel and 3-4 mockup images(those with the grey background) next to those.

 

 

pc version (1).png

 

This is because I referred to my country's e-commerce store at the beginning. We think that the users scroll fast as soon as they access the page so we place the images vertically.

 

But recently I found that most of the stores in the US, which is my target market, puts all the images on the top.

https://www.tentree.com/products/highline-kapok-crew-sweater-pale-oak 

 

It seems like they're not dividing the images into two groups. I think it looks more clean. 

 

So my question is...

  • Which way do you think is better for the user experience? Can you tell me why?
  • What do you think about the size of the images with a grey background? Currently, it is 100% page width.  Are those too big or ok?
Reply 1 (1)

PageFly-Kate
Shopify Partner
1199 344 358

Hi @propel ,

 

This is Kate from PageFly - Shopify Landing Page Builder app. 

Congrats on your store! Your store looks so pretty with color panels and high-quality images, and I can tell you've put in much effort. I understand that building a beautiful website is not simple. From my Conversion Rate Optimization (CRO) expertise, I'd love to give you my suggestions that might be helpful for your product page:

 

1. Regarding your questions

Q1: Which way do you think is better for the user experience? Can you tell me why?
From my experience, there is no direct comparison between the two, as each type offers its own set of benefits. Depending on your purpose, you can determine which one is more suitable: 

  • With carousels, it can help customers save time by minimizing the need for excessive scrolling. They also excel at highlighting elements that might otherwise be lost in navigation. Moreover, carousels allow customers to compare different variants of a single product by displaying a range from wide to narrow, accompanied by small thumbnails below. This provides an overview of all available product options, making it particularly effective for products with numerous variants (more than 3).
  • On the other hand, scrolling images focus on showcasing each variant of the product separately, showcasing intricate details and angles for each option. This approach is well-suited for products with fewer variants (up to 3).

For me, carousels can be more popular in certain cases and will be a safe choice for your potential customers who become accustomed to using them. There are also numerous renowned Shopify stores in the US that employ carousels, like Taylor Stitch:

PageFlyKate_0-1692543566177.png

 

Q2: What do you think about the size of the images with a grey background? Currently, it is 100% page width.  Are those too big or ok?

I have no problem with the size of the gray background as it allows me to see more details about your products. My suggestion is that you should consider providing additional angles of the product, including close-up images that highlight the material or pattern. For instance:

PageFlyKate_1-1692543566177.png

 

2. Other suggestions

Beside enhancing the product image display, I have a recommendation for improving your CRO:

  • Consider modifying the color of the button's hover state. This change can serve as a distinct indicator for visitors, informing them about the button's status when making purchase decisions.

PageFlyKate_4-1692544045451.png

  • Get prepared for the holidays: This time is suitable for you to prepare for the upcoming shopping events like BFCM, Christmas, and New Year's. Plan ahead, and you'll likely see positive campaign results. Here are a few recommendations to consider: 
    • Create holiday-themed landing pages: This page should showcase your featured products, promotions, and campaign information with an appealing design that complements the holiday theme, thereby delivering a unified holiday experience for your visitors.
    • Promote BFCM Discounts: Provide special discounts exclusively for your clients. These could include flat percentage reductions or tiered discounts based on the total purchase value.
    • Create a free gift or bonus: Extend a free, smaller jewelry item with every purchase over a designated amount. This incentivizes customers to spend more in order to receive added value.
    • Take advantage of social media: Harness the power of social media platforms to publicize your holiday offers and interact with your audience. Launch campaigns infused with festive themes, share content generated by users, and engage with customers to cultivate brand loyalty.

PageFlyKate_5-1692544045422.png

I hope you find these suggestions helpful for optimizing your website's conversion rate. If you have any further questions or need additional assistance, feel free to reach out. Wishing you all the best with your online venture!

Best regards,

Kate | PageFly team

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.