Ecommerce product page checklist: 18 elements that sell

In short: a product page sells when the first phone screen shows a clear photo, the product name, the final price, the variant picker, stock status and the "Add to cart" button, followed by delivery cost and time, payment options, returns and reviews. That is 18 elements. EU consumer law sets rules for six of them, and in CloudCart each one is switched on from the admin, without code.

For every element below you get three things: what the shopper needs to see, what EU law and Google require, and where the setting is in CloudCart, the ecommerce platform with AURA built in. The legal points apply in every EU country, because they come from EU directives that each member state has written into its own law.

What a product page is and which 18 elements sell

A product page (also called a product detail page, or PDP) is the page of a single product in your store: photos, name, price, variants, the buy button and the information that answers questions before the order. Search results, ads and emails all land shoppers here. The table lists the 18 elements and where each one lives in the CloudCart admin.

#	Element	Where it is in CloudCart
1	Main photo	Products → Products → Media (the first image)
2	Gallery, video and 360°	Media: up to 36 images, 1 YouTube video, 1 360° image
3	Title (H1)	Product title in the product editor
4	Final price	The theme's price block
5	Discount with the prior price	Marketing → Discounts; old price and "You save" in the price block
6	Variant picker	Variants: dropdown, buttons, image tiles or colour swatches
7	Stock status	Products → Product statuses
8	Size chart	Apps → Size Chart
9	"Add to cart" button	Settings → Cart and checkout
10	Button that stays on the phone screen	Depends on the theme; in a Nitrogen storefront, built to your design
11	Delivery cost and time	Link to a "Delivery" page in the product details module
12	Payment options	CloudCart Pay with Apple Pay and Google Pay on the product page
13	Returns	A separate tab, or a page shown in a side panel
14	Short and full description	Description and Short description, written with Aura Studio
15	Specifications	Category properties, shown as a table on the page
16	Reviews	Apps → Product Reviews
17	Questions and answers	Q&A in Product Reviews, tabs, Aura Chat
18	Related products	Related products in the editor, Marketing → Cross Sell

Which fields appear is decided in one module: Design → Modules → Products → "Product details". The module sets what is shown (price, button, stock status, SKU, brand, specifications, gallery, descriptions), and the theme decides where each field sits. How to pick a theme is covered in the guide to online store design with themes and the editor.

Photos, video and 360°: elements 1 and 2

The main photo shows the whole product on a clean background, and the gallery shows the angles, the detail, the scale and the product in use.

What Google requires from a product image

If your products appear in Google Shopping, every image is checked against the Merchant Center image requirements. From January 31, 2027 the minimum size is 500 × 500 pixels for all products, and Google recommends 1500 × 1500 pixels or more. The product should fill 75% to 90% of the frame. Promotional text, prices or shipping details on the photo, watermarks, added logos, borders and "coming soon" placeholders are not allowed. Each variant needs its own image showing only that variant, in its exact colour and material.

Badges such as "-20%" or "New" belong in Products → Banners and labels: a text label in your colour or a small image in the corner, which the theme shows over the photo without changing the file itself.

How to upload photos, video and 360° in CloudCart

In the product editor, on the Media card, you drag images into order; the first one becomes the main photo. A product can have up to 36 images, one YouTube video (you paste its address) and one 360° image built from up to 36 frames. JPG, PNG, WebP, GIF and SVG files are accepted.

The Image Health app checks every image in the catalogue for quality and for Google and Meta requirements, gives the store a score out of 100 and shows which products to fix first. By default it expects at least 3 images per product. How to shoot with a phone and remove the background with AI is in the guide to AI product photos on a white background.

Title, price and discount: elements 3, 4 and 5

The title says exactly what the shopper is buying, and the price must be the final amount, with no surprises in the cart. A good title has the type, the brand, the model and the main difference: "Stainless steel travel mug 450 ml, black".

In CloudCart the title is the Product title field and becomes the H1 of the page. If each variant feels like a separate product to the shopper, turn on adding the selected variant to the title in the product details module: the H1 then reads, for example, "T-shirt, red, M".

What EU law says about the price on a product page

Before the order, an online seller in the EU must tell the shopper the main characteristics of the product and the total price including taxes, plus delivery costs and any other charges. This comes from the Consumer Rights Directive 2011/83/EU, summarised on the EU portal page on information a trader must give before you buy. A shopper does not have to pay delivery costs or other charges that were not shown in advance. Products sold by weight or volume also show a unit price, such as per kilo or per litre, in a way that is easy to read.

When you announce a discount, the prior price you show is the lowest price you charged for that product in the 30 days before the reduction. This rule was added to the Price Indication Directive by the Omnibus Directive (EU) 2019/2161 and applies in all member states from May 28, 2022. The EU portal explains it on its page about unfair pricing. Member states may set their own exceptions, so check the national rule if you sell perishable goods or run reductions that grow over time.

The price block in CloudCart themes shows the new price, the old price crossed out and a "You save" line whenever the product has a discount from Marketing → Discounts.

Variants, stock and sizes: elements 6, 7 and 8

A good variant picker shows a colour as a colour and a size as a button. In CloudCart the look comes from the type of the parameter: dropdown, radio buttons, image tiles, colour swatches or a two-dimensional grid (for example width × length). Each variant has its own price, SKU and stock. Turn off pre-selecting the first variant (in the product details module) when variants have different prices.

Stock status that helps the sale

In Products → Product statuses you set the texts the shopper sees and the rule behind each one: "In stock", "Only 3 left" when the quantity is 3 or less, "Coming soon", "Request a quote". Each status also decides what happens to the buy button: it stays, it hides, it becomes an enquiry button or a "Notify me when available" button. The exact number of items appears in the badge if both the status and the quantity in the status are switched on in the product details module.

Shoppers who click "Notify me" are collected in Products → Missing products. The back-in-stock email does not go out on its own: once you restock, the campaign button on the row sends it to everyone waiting.

Size chart for clothing and shoes

The Size Chart app adds a "Size chart" button to the page that opens the chart in a window. You create separate charts (for example "Women's tops" and "Shoes EU") and use conditions to decide which chart appears on which products. If you sell into several countries, an EU size column next to the UK or US sizes saves a lot of returns.

The "Add to cart" button and the mobile button: elements 9 and 10

The "Add to cart" button is the most visible element on the page, in a colour you use for nothing else.

What happens after the click is set in Settings → Cart and checkout, in the setting for the action after the buy button: go straight to checkout, go to the cart page, show a confirmation popup, or keep the shopper on the page. For single-item purchases (furniture, appliances) going straight to checkout is shortest. For baskets of several items (cosmetics, food) keeping the shopper on the page works better.

A button that stays on screen (sticky add to cart)

A sticky add to cart button is a bar with the buy button that stays at the bottom of the screen while the shopper scrolls. In CloudCart this depends on the theme: some themes have it, others do not. Check it in the live preview of the theme on a phone. For a page built entirely to your own design, the route is Nitrogen, the headless storefront of CloudCart: the catalogue, cart and orders stay in the same admin, and a developer writes the storefront as code.

Button size, fonts and speed on a phone are covered in the guide to the mobile version of an online store.

Delivery, payment and returns: elements 11, 12 and 13

Delivery cost and delivery time should be visible on the product page, before the shopper reaches checkout. EU law requires the seller to state delivery costs and the payment and delivery arrangements before the shopper is bound by the order, and to tell them about the right to cancel within 14 days.

How to show delivery in CloudCart

In the product details module, switch on the link to a page and choose your "Delivery and returns" page. If you also switch on the side panel display, the page opens over the product and the shopper never leaves it. If you have a free shipping threshold, write it next to the button. If you ship to several countries, list the cost and time per country or region in that page, because a shopper in Vienna and a shopper in Warsaw ask different questions.

Payment: cards, wallets and cash on delivery

Card icons next to the button tell the shopper they can pay the way they are used to. Add a "Cash on delivery" line only in the markets where you offer it. With CloudCart Pay, the Apple Pay and Google Pay buttons for one-tap payment also sit on the product page (the "Express checkout" box, on for product pages by default), so a shopper can pay without filling in the checkout.

Returns you don't have to search for

One line with the return period and a link to the conditions is enough. Online shoppers in the EU have 14 days to withdraw from a purchase without giving a reason, so a plain line about it answers a common doubt before the order. In the product editor, "Add new tab" creates tabs such as "Delivery and returns", "Materials" or "Warranty", which you put in order by dragging. The full EU rules are in the guide to returns and consumer rights.

Description and specifications: elements 14 and 15

The short description sits next to the price and says in 2-3 lines who the product is for and what the benefit is. The full description answers the questions that would otherwise reach your support inbox: material, use, what is in the box.

Specifications (power, volume, material, dimensions) in CloudCart come from the category properties and appear as a table. The same properties feed the filters in the category, so fill them in for every product.

For many products the page also carries legal information. Under the EU General Product Safety Regulation, an online listing shows the manufacturer, a product identifier and any warnings or safety information in the language of the country you sell to; the GPSR guide for online sellers lists what goes where.

Aura Studio writes the description, the short description and the meta description in the product editor from the data already in your store, and you accept or edit the text. The structure of a good description and how AI writes hundreds of them at once is in the guide to writing product descriptions with AI. If you run a separate store per country, each in its own language and currency, the same checklist applies to every version; see the guide to multilingual and multi-currency stores.

Customer reviews and questions: elements 16 and 17

The star rating sits next to the title, and the reviews themselves go below the description.

Reviews in CloudCart and the line the law requires

The Product Reviews app adds star ratings and written reviews to the product page. In its settings you choose whether everyone can write a review or only customers who bought the product, and whether reviews go live immediately, after your approval, or automatically above a certain rating. If only buyers may review, a paid or completed order counts as proof of purchase.

Since May 28, 2022, a seller who shows consumer reviews in the EU must say whether and how it checks that reviews come from customers who actually used or bought the product. This rule was added to the Unfair Commercial Practices Directive by the same Omnibus Directive (EU) 2019/2161, which also bans presenting reviews as verified when you have taken no reasonable steps to check them. Put one line under the reviews, for example "Only customers with a completed order can write a review. We publish all reviews, positive and negative", and keep it true. How to collect reviews and answer bad ones is in the guide to customer reviews for an online store.

Questions and answers on the page

In Product Reviews you can also switch on the Questions and answers section: shoppers ask on the product page, you or other customers answer, and you approve what is shown.

Related products and cross-sell: element 18

Related products show what else the shopper needs: a case for the phone, a serum for the cream. They raise the average order value.

CloudCart offers three ways. Related products in the product editor are chosen by hand, with an optional two-way link. The similar products module shows other items below the product by category, brand or tag. Offers from Marketing → Cross Sell appear at a moment you choose: on the product page, when the product is added to the cart (with a discount and a timer in the window), in the cart or at checkout. The types of offers are on the page about cross-sell and upsell in CloudCart.

Offer 2-4 complementary products priced below the main one.

Schema markup: structured data for the product

Schema markup (structured data) is code on the page that tells Google, in machine language, the product's name, image, price, availability and rating. Google calls this kind of result a merchant listing, and AI assistants read the same data when they compare products.

Property	Required?	Where it comes from in your store
name	Yes	The product title
image	Yes	The main photo
offers with price and priceCurrency	Yes, price above 0	The price in the store's currency
availability	Recommended	The stock status
gtin, sku, brand	Recommended	Barcode, SKU and brand from the editor
aggregateRating, review	Recommended	Product Reviews
shippingDetails, hasMerchantReturnPolicy	Recommended	Your delivery and returns conditions

In CloudCart the structured data comes from the theme template, so check your own page before relying on it. Paste the address of one product into Google's Rich Results Test and see whether a Product with price and availability is detected. If something is missing, write to support@cloudcart.com. The rest of the technical SEO setup is in the ecommerce SEO checklist. In a Nitrogen storefront the structured data is written into the page code from the same data, including markup for questions and answers. You can also set delivery and returns in Merchant Center, and there those settings take priority over the ones in the code.

How to set up the product page in CloudCart: 7 steps

Most settings are shared by all products, so start with your best seller.

1. Choose what is shown. Design → Modules → Products → "Product details": switch on the price, the button, the status, the specifications, the gallery and both descriptions.
2. Connect the delivery page. In the same module, switch on the link to a page, choose "Delivery and returns" and the side panel display.
3. Arrange the media. In the product editor, upload at least 3 photos and, where useful, a video or a 360° image. Run Image Health.
4. Set the stock statuses. Products → Product statuses: a "Last items" status for low quantities and "Notify me" for sold-out products.
5. Turn on reviews and questions. Apps → Product Reviews: who can write, how reviews are approved, and the Questions and answers section.
6. Add related products. In the editor, pick 2-4 complementary products.
7. Check on a phone and in Google. Open the page on a phone: the photo, name, price, variant and button must fit on the first screen. Then run the address through the Rich Results Test.

Product page mistakes that cost orders

• Text or a price on the photo. Google rejects such an image in Shopping, and on a phone the text is unreadable.
• A crossed-out price with no basis. The prior price must be the lowest of the last 30 days. Inflating it before a sale is exactly what the Omnibus rules target.
• Delivery cost appears only at checkout. The shopper learns the price in the last step, and some stop there. Under EU law, charges not shown in advance do not have to be paid.
• A pre-selected variant with a different price. The shopper sees one price, picks their size and sees another.
• A sold-out product with no alternative. Add "Notify me" and a row of similar products so the visit does not end there.
• One page for every country. A shopper in another country needs the price in their currency, delivery to their country and the text in their language.

How to tell whether the new page sells more

A change works if add-to-cart clicks and orders rise while traffic stays the same. Change one element at a time and compare 2 weeks before and after; how to measure it is in the guide to online store conversion rate. With 0% commission on your sales, what you pay CloudCart is the plan price and does not grow with your orders.

Frequently asked questions

Have a question about the product pages in your store? Write to us at support@cloudcart.com.