Anatomy of a Shopify product page: How to optimize every inch of your product listings

Anatomy of a Shopify product page: How to optimize every inch of your product listings

What's in a Shopify product page? Uncover how to create the best Shopify product page with titles, descriptions, details, and images with examples for inspiration.
Written by Mandy Bray
Apr 30, 2024
Shopify product page
Share

With an online store, customers don’t get the chance to hold a product in their hands and feel the fabric, open it up, or try it on. All they have is your product page.

A good product listing gives shoppers a sense of what a product looks like, how it works, and how it will fit into their space and lifestyle. Let’s look at each component that makes up a Shopify product page, and how you can use it to optimize your listings for higher sales.

What to include in a Shopify product page: The basics

Each Shopify product detail page contains blocks and sections that build your product information. While you can create highly customized product pages, it’s important to nail these basics before moving on to advanced features.

Product title, subtitle, vendor, and description

First, you need a product title that’s both descriptive and distinctive. Include keywords that people will use to search for your product, but don’t overload it. Optional elements you can add include a subtitle for extra selling points and a vendor or brand.

Finally, craft a product description to communicate your product’s unique selling proposition. Keep it succinct and scannable, conveying key information in your unique brand voice. Let’s examine the product detail page example from Shopify store Meow Meow Tweet. You’ll see:

  1. A product title that’s both descriptive (“face toner”) and unique (“geranium palmarosa”)
  2. A subtitle “A hydrating mist…”
  3. A product description that’s clear and speaks to the product’s tangible and intangible benefits
Shopify product page example, Meow Meow Tweet

What makes a great Shopify product description?

Communicate the unique selling proposition of your item and give a high-level item description with product keywords. Describe the product itself, but also how it makes the end user feel. For example, see how this product description from Lunchskins talks about the product’s durability and freshness and how making a sustainable choice makes the user feel.

Shopify product description example, Lunchskins

What should you leave out of a Shopify product description?

Don’t treat a product description as the text box where you dump all your product details. Information like shipping, product specifications, and item origin should be left out. Instead, encode these as rich text metafields. Then if you need to update a shipping estimate or any particular detail, you don’t have to update all product descriptions.

Images and videos

Baymard Institute found that images are the most important content that customers look for on a product page. You need high-quality photos and videos to let customers see your product in action. Shopify allows you to add up to 250 product media to a listing, so take advantage. Here are a few tips for engaging and high-converting images.

  1. Show your image in scale. 45% of product listings don’t show their products “in-scale”. This means that the background is cut out, making it difficult to gauge how large an item is (who wants to dig out a ruler?). Showing a product in a hand or on a desk, etc. lets shoppers know at a glance how large the item is.
  2. Use lifestyle shots and humans in product photos. Show your products from different angles and in lifestyle shots with real people. 81% of ecommerce sites don’t use human models. But images with people are particularly powerful for shops setting clothing, apparel, and jewelry, which are the top Shopify product categories.
  3. Include unique images for each variant. If you offer different colors or styles in a single product listing, add images for each one so customers can envision each variation.
  4. Create interactive content. Another effective tactic for online sales is 360-degree product views, letting customers interact with a product as if they were in a store.
  5. Leverage product videos. Videos are powerful in your image carousel, but that isn’t the only place for them. Another option is to embed full-width product videos lower down on the page.
Shopify product image examples, BURGA

In this example, Shopify store BURGA shows multi-angle and lifestyle photos of its electronics cases together.

Product price

Of course, shoppers need to see how much an item costs to make an informed choice. Your price should be clear and above the fold on the page. A compare-at price, showing a full price slashed out and replaced by a sale price, can be a great selling tool. You can also include any payment plans you offer, like Klarna or Afterpay.

Shipping and returns

One important piece of product information for customers is shipping. Can it ship to their location? How long will it take to arrive, and how much will it cost?

While you may want to place a detailed section lower down, place any shipping selling points (“Free shipping over $”) up close to the buy button for better conversion. Shopify uses location and a product’s weight to calculate shipping, so you must include each product’s (and variant’s) weight.

While it’s not a best practice to include your entire return policy on a product page, you should include a link to it with any highlights like the Everlane example below.

Shopify product page example, Everlane

Inventory, barcodes, and SKU numbers

To track your inventory, you need to enter what quantity of items you have available for each location (if you have multiple). This lets customers order a quantity that doesn’t exceed your supply and can add urgency to product sales (like “2 remaining!”). For most physical products, you also need barcode and SKU numbers to differentiate similar products.

Buy button

To move customers from interest to purchase, you need a compelling call-to-action button. Most stores use “Add to Cart,” but you can customize your Shopify buy button to another language as you wish. Your buy button should be prominent at the top of your product page.

Advanced elements to elevate your Shopify product pages

Beyond the basics, there are many ways to elevate your product detail page. Consider these advanced product details to boost your engagement and sales.

Product options and variants

In most cases, it’s better to combine product variations, known as variants, into a single product listing. You can select up to three options like size, color, and fabric in Shopify for customers to choose from. Choose between a drop-down menu and buttons (usually an icon, small image, or color swatch, called pills by Shopify) to illustrate your product choices. User experience experts say that buttons are better than drop-downs.

Product specifications

Customers need to know product dimensions, fabric, and other details to determine if it will fit their space or meet their unique needs. In Shopify, use a text metafield to add product specifications like this example from Helm Boots below. Product specs should be lower down on a page below key selling information.

Shopify product specs example, Helm Boots

Purchase options

In Shopify, you can give customers multiple purchase options. For example, customers can choose a subscription versus a single purchase or bundle. Use purchase options to allow customers to compare pricing options and upsell them on larger or recurring orders. Consider the example below from Shopify store Obvi.

Shopify product option example, Obvi
A store owner’s guide to Shopify variants
Read Article
A store owner’s guide to Shopify variants

Customer reviews and ratings

After images, customer reviews are the most important content that shoppers look for. Make it easy for customers to leave a review and authentic photos of your product in use– giving others confidence to buy the item.

To add reviews to your store, Shopify requires a third-party app. If you have an Online Store 2.0 theme, you can also add star ratings as a block in the main product section of the product template.

Cross-sell and up-sell with complementary products

Another key feature to encourage browsing and higher cart orders is complementary products. This section recommends cross-selling items, which pair well with a product, or up-selling items to replace it with one of a higher value. You can add these to your Shopify store with the Shopify Search and Discover app.

Custom sections

Last, there are endless ways to use custom sections in Shopify. You can use this to share usage instructions, ingredients, supply chain or sourcing info, and warranty options. Some stores also create visual blocks highlighting their top selling points. See the product page example below from Cocofloss, who created an interactive product exploration and product highlights with custom sections.

Shopify custom page example, Cocofloss

Metadata for SEO

Metadata is the back-end data that doesn’t appear on a product page itself, but does appear in Google search results. 51% of online shoppers use Google for product research, so you must match your page title, meta description, and alt text with keywords your audience uses. It’s important to update these in Shopify to optimize for search.

Alt text for images ensures that people using image search can find your products and ensures that visually impaired shoppers can browse your site. A meta description should be a little shorter than your product description– just two sentences or so to hook someone scrolling through search results.

Google Shopping fields

Go beyond basic Google search by creating a Google Shopping feed that’s campaign-ready. While this doesn’t appear on your product page itself, it does ensure that your products are published to Google Shopping.

This takes a few extra steps like setting up a Google Merchant Center account and adding fields like product categories, but it’s worth the time. To simplify this process, we created a way for merchants to bulk edit their Google Shopping fields.

How to bulk edit your Shopify products

All of these product details translate to a better user experience, but they also add up to a lot of time adding and updating products. To create great pages at scale, you need a system to bulk edit products.

Bulk editing is useful for various scenarios like quickly adjusting prices to run sales, updating product descriptions, and managing Google Shopping fields for better visibility. Shopify Admin has a bulk editor, but it has many limitations. To seamlessly edit all of the fields you need, we recommend the Ablestar Bulk Product Editor.

How to bulk edit Shopify products
Read Article
Bulk edit

Bulk Product Editor lets you edit unlimited products and fields at once, preview and undo product edits, and add rules like discounting prices by a percentage. It’s a time-saving hack to make Shopify owners’ lives easier– and their store management less chaotic.

Create your first bulk product edit on Shopify using Bulk Product Editor

Shopify product page FAQs

How can I find a Shopify page template?

A Shopify page template is a collection of sections that make up a page. Your theme editor will provide several templated product page templates for you to choose from. However, you can customize any existing page template to create a new one. Shopify lets you save up to 1,000 page templates.

How do I add a custom section to a Shopify page?

You can create a custom section to a Shopify product page using any of the blocks available: text, images, collapsible tab, or pop-up, for example. For anything diverging from those, you’ll need to embed custom liquid code for a unique design outside your theme. You need to know some basic code to do this, or hire a Shopify developer to create custom pages for your site.

What’s the best way to optimize a Shopify product page?

Choose a clear and uncluttered design to optimize your product detail page and write a compelling title and product description, focusing on the benefit to the buyer. Include keywords that a shopper would likely use to search for your products in your product information. To boost conversions, add lifestyle and in-scale photos and incorporate customer reviews for social proof.

How do I add products to Shopify?

There are multiple ways to add products to Shopify. You can add a product individually, import products from a spreadsheet, or migrate them from a previous store like WooCommerce.

How do I bulk edit Shopify products?

There are three ways to bulk edit Shopify products. You can use Shopify’s bulk editor, import them into Shopify with a spreadsheet, or use a bulk editing app for Shopify. We break down the pros and cons of these three methods in our guide.

Looking for a better way to manage your Shopify product data? Try Ablestar Bulk Product Editor to save time and gain visibility into your product edits.

Related Articles

Save hours—add Ablestar to your Shopify store today