Optimize product page: 7 steps to the right strategy

Based on our work with Shopify brands, a 7-step process has proven effective for holistically optimizing product pages. Key steps include clearly defining the page's role, combining brand perspective with e-commerce best practices, planning mobile-first by viewport, and systematically testing changes.

We show what this looks like in practice using the example of the natural cosmetics brand nkm, whose product page we optimized for sustainable results. What learnings can you apply to your own shop? The content of this article is based on the expertise of our account manager, Anna.

1. Clarifying the role the product page plays in your shop
2. Recognizing the right time for a holistic view
3. Combining brand templates and e-commerce best practices
4. Mobile-first planning: Which viewport answers which question?
   1. Viewport 1: Am I in the right place?
   2. Viewport 2: Can I buy now?
   3. Viewport 3: What doubts remain?
5. Less is more
6. Testing instead of guessing
7. Internalizing principles instead of copying others
8. Conclusion

 

 

1. Clarifying the role the product page plays in your shop

Before you optimize anything, you should know what task the product page needs to fulfill in your shop. The answer differs significantly depending on the brand and product.

Broadly, we distinguish between 2 types of product pages for online shops:

Type	Situation	Role of the product page
Transactional channel	Purchase decision made before visiting the shop, e.g., fan merch	Quick checkout, little explanation needed
Cornerstone	Product or brand requires explanation, trust must be built first	Explain the product, differentiate, justify price, remove doubts

Most Shopify shops fall into the second category, especially when customers land directly on a product page via marketing or ads. In that case, it is the first page they see from your brand.

For nkm, the product page clearly fulfills the function of a cornerstone. Natural cosmetics require education: Which active ingredient is inside, what skin type is the product suitable for, and what is it best combined with? A category page does not offer enough space for this context.

Our recommendation: The more explanation your product requires, the more time you should invest in the structure of the product page.

2. Recognizing the right time for a holistic view

Continuous optimization is important, but it does not replace the need to zoom out regularly. If you only work on the details, you often lose sight of the big picture.

When might it be worth changing your perspective and re-evaluating your product page?

• Your brand team is sharpening the brand identity anyway: new colors, fonts, button styles, or a shifted content focus
• The last relaunch was more than two years ago
• Since then, only individual measures have been added, such as a loyalty program, a subscription model, or urgently needed features
• The page has become long and cluttered over time without anyone questioning the overall structure

At nkm, two of these points came together. The theme relaunch dated back to the end of 2023. Since then, optimization had been occurring at the detail level. Simultaneously, the brand team decided to shift focus: away from a pure focus on sustainability toward a more scientifically grounded presence. This was also reflected in a new styling. To cover both points efficiently, we decided on a relaunch.

Important note: A holistic view does not mean redoing everything. The old nkm product page already had a solid foundation with a gallery, review stars, USPs in bullet points, subscription selection, trust elements around the cart button, and an ingredient table. We deliberately kept much of this.

Our recommendation: Before any revision, conduct an honest inventory. What works stays. Only what no longer fits is rethought.

3. Combining brand templates and e-commerce best practices

A good product page arises from two perspectives: the brand, which knows how it wants to be perceived, and e-commerce experience, including insights into what drives users to purchase. Combining both sides is crucial.

Here is how the process worked at nkm:

1. Mockup from the brand team: nkm provided a visually developed briefing with a new design system and content focus.
2. Our counter-proposal with an e-com perspective: We checked the mockup against conversion logic and proposed alternatives, also based on past A/B test learnings and our agency experience.
3. Alignment in a larger circle: In addition to the brand team, other parties were involved, including SEO experts.
4. Final structure, then design: Fine-tuning the design is only worth it once the structure is in place.

The timeframe was more manageable than it sounds:

Phase	Timeframe	Effort
New basic look (colors, fonts, spacing)	November 2025, under one month	Low, as it used theme settings instead of hardcoding
Mobile design and alignment	November to January	Approx. 30 hours of consulting and design
Desktop design	From February	Followed after the final decision
Implementation	From January, over several months	Quick wins first, then the rest

The fact that the basic look was ready in under a month is due to clean theme coding. nkm uses the Impact theme, which we have been expanding for years. Because we maintained the theme structure and never hardcoded colors, for example, the new look could be rolled out via theme settings instead of section by section.

Our recommendation: Plan for alignment to take more time than the actual work. Additionally, a clean and reliable theme foundation is worth it, so that future changes can be made centrally.

4. Mobile-first planning: Which viewport answers which question?

On a smartphone, users never see the entire product page, but rather just a section. That's why we plan product pages by viewport: each visible area has a task and answers a specific question.

Viewport	User question	Goal	Elements
1: Above the Fold	Am I in the right place?	Identification, spark interest	Product title, reviews, USP teaser, gallery with badges
2: Directly below	Can I buy now?	Purchase completion for the decided	Price, add-to-cart, transactional USPs, product USPs
3: Further down	What doubts remain?	Convince the interested	Results, routine, cross-selling, ingredients

Viewport 1: Am I in the right place?

At nkm, we placed the product title, reviews, and a short USP teaser above the gallery and verified this via A/B testing. The reason: cosmetics packaging is often minimalist and says little about the product, unlike fashion. Additionally, a badge in the gallery shows the skin type, e.g., dry or sensitive skin.

The gallery itself should cover all questions someone might have: benefits, ingredients, application, expected result, the appropriate care series.

Viewport 2: Can I buy now?

Decided customers must be able to complete the purchase smoothly here. Price, add-to-cart button, and transactional USPs like delivery time and payment methods remain visible together, plus the most important product USPs compactly in bullet points.

Viewport 3: What doubts remain?

Those who arrive here are interested but have an open question. At nkm, we placed two things: a section with before-and-after results in several examples (as an A/B test, previously tested on the homepage) and a routine section that explains step-by-step which product is used in what order. The latter answers a real user question and incidentally increases the cart value.

Our recommendation: For every viewport, ask yourself what should happen there. And don't be afraid of repetition: Not everyone swipes through the gallery, so it's okay for content to appear again further down.

5. Less is more

If you sharpen a viewport and add new elements, you must make space elsewhere. Leaving things out can, in our experience, be an effective lever because fewer stimuli direct more attention to what is relevant.

Elements we questioned at nkm:

Element	Question	Decision
Magnifying glass / Zoom tool	Does anyone really zoom into the packaging for natural cosmetics?	Icon removed, zoom remains possible by clicking
Quantity selection	Is the cleanser actually bought in multiples?	Verify via A/B test; quantity can also be increased in the cart
Ingredient table	Is it used, and does it need the space?	Stays; it works and doesn't need to be reinvented

Two data sources help with such decisions:

• Analytics: Shows how often a product is purchased in multiple quantities or how far users scroll.
• Heatmaps and clickmaps: Show which elements are clicked and which are not. Often, design errors become apparent, such as areas that look clickable but are not. Tools like Microsoft Clarity are standard here, but should only run selectively because they affect page speed.

Our recommendation: For every element, ask if it answers a user question. If not, it can be removed or should be investigated more closely in a test.

6. Testing instead of guessing

Not every change to the product page can be confidently assessed in advance. We recommend: What can be tested should be tested before it goes live permanently.

At nkm, we tested, among other things:

• Title, reviews, and USP teaser above the gallery instead of the classic sequence with image first
• Before-and-after section further down on the product page, after it was first tested on the homepage
• Hiding individual elements like quantity selection to check if they are missed

There are two ways to run A/B tests on Shopify:

Option	For whom	Advantage	Limit
Dedicated A/B testing tool	Teams that test continuously and deeply	Level of detail, evaluation, segmentation	Costs, setup, often agency dependency
Shopify Rollouts	Entry level, teams without their own testing setup	Native in the backend under Markets, understood in half an hour, no dependencies	Rudimentary, theme version vs. theme version

Shopify Rollouts is a relatively new feature and does not replace a mature testing tool. However, it lowers the barrier to getting started. Anyone who currently doesn't test at all can take the first step with it.

Our recommendation: Better to run a simple test than none at all. And learnings from past tests can always be retrieved during any new revision.

7. Internalizing principles instead of copying others

Concrete measures for an optimized product page differ from shop to shop. What remains, however, are a few principles that have been repeatedly confirmed in our work:

1. Think and explain simply. If something has to be read three times, end customers won't understand it and will ask support. In the worst case, they won't buy.
2. Clarify product fit first. The most important question on every product page is whether the product suits the person. If it doesn't fit, they should realize that quickly and find their way back to the category without a detour.
3. Answer questions before they arise. Every section of the product page should solve a concrete user question, from "Am I in the right place?" to "How do I use this?".
4. Keep paths short. The fewer clicks and the less scroll depth between interest and decision, the better.
5. Stay industry-specific. Seeking inspiration from large brands makes sense, but you shouldn't just blindly adopt adjustments. What works for a fashion brand via imagery, for instance, is better solved in cosmetics through a combination of image and text.

Our recommendation: Check every idea against these five points before implementing it.

8. Conclusion

Optimizing a product page does not mean piling on more and more elements. Instead, you should understand the page's role, recognize the right time for a holistic view, and then proceed systematically: bring the brand and e-commerce perspectives together, plan for viewports using mobile-first, remove the superfluous, implement quick wins early, and test the rest.