20 Shopify Product Page Templates & Design Ideas That Convert (2025 Update)

The Shopify App Store has more than 8,000 apps, giving you endless ways to customize your Shopify product pages. 

Each Shopify product page template you choose plays a crucial role in shaping conversions, but the real key lies in making the product page design template uniquely yours.

When we study high-performing Shopify product page designs, what stands out is how much the small details matter. 

The right Shopify product template isn’t just about looks; it’s about blending beauty with functionality.

Jump to:

Top 20 Shopify product page templates for you to get inspired by

9 elements that the best Shopify product pages have in common

20 Shopify Product Page Templates For Inspiration

Let’s jump right into Shopify product page examples. These are fresh, inspiring, and every bit copy-worthy.

1. Storytelling Descriptions That Sell Without Feeling Salesy

A Shopify product page isn’t just a list of specs or ingredients; it’s an opportunity to tell a story that resonates. 

Shoppers want to know why your product exists, how it’s made, and why it matters. Story-driven descriptions do more than inform; they build trust, spark emotion, and create a memorable experience that encourages purchase.

Rocky Mountain Soap’s Shopify product page example tells a story:

• Packaging update narrative: “New look, same Rocky formulas”, explaining sustainability choices and building brand transparency.
• Craftsmanship detail: Cold-process, cured for four weeks, traditional techniques adapted for today.
• Emotional pull: “Each bar is a testament to our dedication to quality and craftsmanship.”
  

This isn’t just what the product is; it’s why it matters and why you should care. The brand connects quality, tradition, and eco-consciousness in a way that makes the product memorable.

How to replicate this in your Shopify product page template:

• Start with a human-centered note (sustainability, heritage, behind-the-scenes).
• Layer in benefits first, then features (hydrating lather → ingredients → process).
• Use short sections or storytelling blocks so the page feels engaging, not overwhelming.
• Add brand transparency moments (packaging updates, sourcing, ethics) to build trust.

2. Eye-Catching Hero Images That Hook Shoppers Instantly

Your product’s visuals are the first thing customers notice, and first impressions matter. 

Bold, above-the-fold images grab attention, show the product in action, and encourage visitors to scroll further. A well-placed hero gallery not only highlights your product but also tells a story visually, helping shoppers imagine themselves using it.

Rump’s Shopify product page example demonstrates how to use visuals effectively:

• Above-the-fold gallery: Visitors immediately see the product in context, being used by a camper.
• Lifestyle imagery: Shows scale, use case, and comfort, not just a flat product shot.
• Multiple perspectives: Close-ups and full-scene shots help shoppers visualize the product in their own lives.

How to replicate this on your Shopify product page template:

• Use full-width hero images or galleries above the fold.
• Include lifestyle or context shots to help shoppers imagine real-world use.
• Provide multiple angles (zoomed details + environmental shots) to reduce hesitation.

3. Product Bundles That Increase Average Order Value

Bundling products into one complete package is a smart way to boost sales, simplify the shopping experience, and give customers a sense of value. 

Instead of buying items separately, shoppers see the convenience and savings of a curated set, often nudging them to spend more.

Manscaped’s Shopify product page example shows how bundling can be presented effectively:

• Clear headline & offer: “Save 46%” immediately communicates value and urgency.
• Detailed kit breakdown: Lists every included item, from trimmers to grooming products, so customers know exactly what they’re getting.
• Bonus items & perks: Free gifts like boxers and a toiletry bag make the package feel premium.
• Luxury positioning: Words like “full-body grooming kit” and “all the formulations your body could ever ask for” emphasize quality.

How to replicate this on your Shopify product page template:

• Highlight total savings or discounts prominently to show value.
• Use a kit breakdown section with bulleted items for clarity.
• Include bonus gifts or exclusive perks to enhance perceived value.

4. Reviews and Wishlists That Build Trust

Shoppers are more likely to purchase when they see proof that others love your product or that the brand stands behind it. 

Highlighting reviews and guarantees prominently on your product page builds credibility, reduces hesitation, and encourages conversions.

Pele Case’s Shopify product page example shows trust-building elements in action:

• Highlighted review above the CTA: A single, compelling testimonial placed right under the product title reassures potential buyers before they even click “Add to Cart.”
• Guarantee & upsell placement: The $500 Screen Protection Guarantee is positioned above the CTA, emphasizing security and risk-free purchase.
• Shipping & perks info below the CTA: “Ships from our studio in 2–7 days | Free shipping over $85 | Made in Canada” reinforces reliability and transparency.
• Overall layout: Customers get social proof, risk reduction, and convenience messaging exactly where they need it most, above and below the CTA.

How to replicate this on your Shopify product page template:

• Place key reviews or testimonials above the fold, ideally near the product title or image.
• Highlight guarantees, warranties, or risk-free offers near the CTA to reduce friction.
• Include shipping info or perks below the CTA to reassure shoppers.

5. Interactive Product Details That Educate

Providing information in a way that’s easy to explore keeps shoppers engaged and reduces hesitation. 

Interactive product details like pop-ups, expandable sections, or clickable tabs let customers learn at their own pace without overwhelming the page. 

Combined with clear bundle information, this approach both informs and persuades.

Huel’s Shopify product page example shows interactive details and bundle layout done effectively:

• Nutrition & Ingredients pop-up: Clicking this section opens a clean, easy-to-read overlay with detailed nutrition info; shoppers get the depth they need without leaving the page.

• Bundle breakdown: “What’s included” lists all items in the bundle clearly.
• Learn More links: Direct shoppers down the page to deeper information, keeping the layout uncluttered while offering optional detail for those who want it.
• Interactive flow: Customers can explore product benefits, ingredients, and bundle content without scrolling excessively or losing context.

How to replicate this on your Shopify product page template:

• Use expandable tabs, accordions, or pop-ups for detailed product info (ingredients, specs, nutrition).
• Highlight bundle contents clearly with checklists or visual cues.
• Include “Learn More” links to guide customers to additional details further down the page.

6. Virtual Product Experiences Using Stats and Reviews

Shoppers increasingly expect to experience products online as if they were in-store. 

Videos, user-generated content, and real-world demonstrations make a product feel tangible and trustworthy. 

Adding stats, expert opinions, or testimonials in a visual format helps potential buyers visualize results and build confidence before purchase.

Absolute Collagen’s Shopify product page example shows how virtual experiences enhance credibility:

• Video gallery: Shows doctors explaining the product and customers enjoying it, helping shoppers see both authority and real-life use.
• User reviews integrated visually: Testimonials and short clips make benefits more relatable and credible.
• Results-oriented messaging: Stats or claims are supported visually, showing the impact of using the product.
• Interactive experience: Customers can play videos directly in the gallery, keeping them engaged without leaving the page.

How to replicate this on your Shopify product page template:

• Incorporate video galleries or carousel sliders to show the product in action.
• Highlight expert endorsements or real-user reviews visually, not just in text.
• Use stat-driven messaging (e.g., percentages, improvements) to reinforce credibility.

7. Let Customers Visualize with “Try It On” Features

Giving shoppers a way to see products on themselves virtually bridges the gap between browsing and buying. Interactive tools like virtual try-ons, shade selectors, or “Get This Look” previews help customers make confident choices, reducing returns and increasing satisfaction.

Fenty Beauty’s Shopify product page example demonstrates interactive visualization effectively:

• “Try This Shade On” feature: Let shoppers see how the color looks on different skin tones or in real-time using AR, making it easier to choose the right shade.
• “Get This Look” section: Shows complementary products and the full makeup effect, encouraging cross-sells.
• Interactive engagement: Customers feel involved, reducing hesitation and increasing purchase confidence.
• Visual hierarchy: Placed above the fold near the product image, ensuring visitors notice the feature immediately.

How to replicate this on your Shopify product page template:

• Implement virtual try-on tools or shade selectors for visual products like makeup or apparel.
• Include “Complete the Look” recommendations to increase average order value.
• Position interactive features near product images or CTA buttons for maximum engagement.

8. Social Impact Messaging That Drives Purchases

Shoppers are increasingly motivated by brands that give back. 

Highlighting social impact directly on the Shopify product page not only builds trust but also creates an emotional connection, encouraging conversions and loyalty.

Bombas’s Shopify product page example shows social impact messaging in action:

• “4 Purchased = 4 Donated” under the CTA: Customers immediately understand that buying contributes to a good cause, making the purchase feel meaningful.
• Clear placement: Positioned right where customers are making their buying decision, reinforcing positive action.
• Simple, powerful messaging: Minimal text conveys the impact quickly, without cluttering the page.
• Emotional engagement: Helps customers feel part of a larger mission, which can increase both conversions and brand loyalty.

How to replicate this on your Shopify product page template:

• Include impact statements near the CTA to connect shopping with a cause.
• Use concise, easy-to-understand messaging (e.g., X purchased = Y donated).
• Consider visual icons or small graphics to make the impact instantly recognizable.

9. Flexible Purchase Options That Encourage Commitment

Giving shoppers multiple purchasing choices, like one-time buys or subscriptions, caters to different buying behaviors. 

When paired with clear pricing and incentives, these options can increase conversions, average order value, and customer retention.

Fly By Jing’s Shopify product page example demonstrates flexible purchase options effectively:

• Two CTAs: Customers can choose between a one-time purchase or joining a membership, giving flexibility based on their preferences.
• Anchor pricing: The “$20 with membership” offer highlights savings and encourages long-term commitment.
• Clear layout: Both options are visually distinct, making the decision simple and intuitive.
• Incentive-driven engagement: The membership pricing adds perceived value while nudging shoppers toward recurring purchases.

How to replicate this on your Shopify product page template:

• Provide multiple purchase options (one-time, subscription, or bundle) to accommodate different shopper needs.
• Highlight savings or incentives clearly using anchor pricing or discount callouts.
• Use distinct CTA buttons for each option to reduce confusion and improve conversion.

10. Interactive Product Comparison Tools That Reduce Decision Fatigue

When shoppers face multiple options, helping them compare products directly on the page reduces confusion and boosts confidence. 

Interactive comparison charts allow customers to see differences at a glance, making it easier to choose the right product without leaving the page.

Troubadour Goods’s Shopify product page example shows product comparison done effectively:

• “Compare Backpacks” button under Add to Bag: Gives shoppers immediate access to side-by-side product info without navigating away.
• Interactive pop-up chart: Customers can toggle between specs, features, and even on-model visuals for context.
• Visual clarity: Comparison tables highlight key differences, helping buyers make informed decisions.
• Reduced decision fatigue: Instead of scanning multiple product pages, customers can quickly assess which backpack fits their needs.

How to replicate this on your Shopify product page template:

• Add comparison buttons or toggles near the CTA to make side-by-side evaluation easy.
• Use interactive charts or pop-ups to display features, specs, and images clearly.
• Allow visual context (e.g., product on model) to aid shoppers in understanding scale and fit.

11. Detailed Fit Guides That Reduce Returns

One of the biggest concerns for online shoppers is fit. 

Providing detailed sizing and fit guides helps customers choose the right size the first time, reducing returns and increasing confidence in their purchase.

Maguire Shoes’s Shopify product page example shows fit guidance done effectively:

• Clear size selector: Customers can choose their size with confidence using an intuitive dropdown.
• Detailed fit guide link: Clicking shows a pop-up that leads shoppers to a dedicated guide with measurements, shape tips, and model info.
• Visual aids: Images showing the shoe on different foot shapes or sizes help customers visualize fit.
• Positioning: The guide is placed near the size selector and CTA, ensuring it’s accessible right when shoppers need it.

How to replicate this on your Shopify product page template:

• Include size charts or fit guides prominently near the size selector.
• Use images or diagrams to clarify sizing and fit.
• Provide model references or measurements for added context.

12. Accessible Q&A Sections and Live Chat That Answer Questions Instantly

Shoppers often have last-minute questions that determine whether they purchase or abandon a page. 

Accessible Q&A sections and live chat support help reduce uncertainty, build trust, and improve conversion rates by giving customers the answers they need in real-time.

Cheekbone Beauty’s Shopify product page example demonstrates effective customer support integration:

• Live chat integration: Shoppers can reach out instantly if they have a unique question, creating a responsive and trustworthy experience.
• Placement near CTA: Support options are accessible without overwhelming the page, so buyers can quickly find answers while considering a purchase.
• Enhanced confidence: Customers feel assured about product details, shipping, ingredients, or usage, reducing hesitation.

How to replicate this on your Shopify product page template:

• Add a Q&A or FAQ section directly under product details or above the CTA.
• Integrate live chat or messaging widgets for real-time support.
• Highlight common concerns or questions to preemptively answer them.

13. Smart Upselling with “Pair With” Recommendations

Upselling done right feels helpful, not pushy. 

By suggesting complementary products directly on the product page, you increase cart value while improving the shopper’s experience. 

Smart upselling keeps customers inspired to build an outfit, bundle, or set without leaving the page.

Kirrin Finch’s This Shopify product page example shows a seamless approach to upselling:

• “Pair With” section: Suggests items that complement the shirt, encouraging full outfit purchases.
• Quick add-to-cart buttons: Shoppers can add recommended items instantly without leaving the page.
• Clear product images and names: Customers see exactly what they’re adding, making upsells feel natural and transparent.
• Boosts AOV (average order value): Encourages multi-item orders while reducing friction.

How to replicate this on your Shopify product page template:

• Add a “Pair With” or “Complete the Look” section under the main product.
• Include quick add-to-cart buttons so shoppers can build their cart without navigating away.
• Showcase product thumbnails and names for clarity and trust.

14. Multiple Payment Options and Social Sharing Features

Customers want flexibility when it comes to checkout—and visibility when it comes to sharing. 

Giving shoppers the choice of multiple payment options (credit card, Shop Pay, PayPal, etc.) reduces purchase hesitation. 

Adding social sharing buttons lets them spread the word about your product instantly, creating organic reach.

United By Blue’s Shopify product page example highlights two subtle but powerful features:

• Multiple payment methods at checkout → ensure shoppers can pay the way they prefer.
• “Share” options → allow customers to post the product directly to their networks.
• Improves trust and convenience → making checkout smooth while turning customers into brand advocates.

How to replicate this on your Shopify product page template:

• Enable alternative payment methods like Shop Pay, PayPal, and Buy Now Pay Later (BNPL).
• Add social share icons near the “Add to Cart” button to encourage quick sharing.
• Test placement of share icons to keep them visible but not overwhelming.

15. Email Signup Incentives That Drive Conversions

Turning browsers into subscribers is one of the smartest plays for long-term sales. 

By offering simple, valuable incentives like free shipping, discounts, or exclusive perks, you give shoppers a reason to join your list before they leave.

Soko Glam’s Shopify product page example shows how a subtle prompt:

• “Sign up for free shipping” → right under the CTA button, helps capture emails without distracting from the purchase flow.
• Placement: Directly below the CTA button, so it’s seen at a high-intent moment.
• Messaging: Short, simple, and action-oriented.

How to replicate this on your Shopify product page template:

• Add an email capture prompt near or under the Add to Cart button.
• Offer immediate incentives like free shipping, 10% off, or early access.
• Keep messaging short and benefit-driven (e.g., “Sign up & unlock free shipping”).

16. Space-Savvy Layouts for Mobile Shoppers

With more than half of eCommerce traffic coming from mobile, your product page layout needs to be optimized for small screens. 

Space-savvy design ensures shoppers can scroll, tap, and explore without friction. 

The Beauty Chef’s Shopify product page example highlights:

• Tappable options: Tabs and accordions that save space and organize details.
• Mobile-friendly layouts: Scrollable image galleries designed for vertical browsing.
• Persistent CTA: A layout that keeps the CTA button accessible without endless scrolling.
• Skimmable copy: Information structured for quick skimming on small screens.

How to replicate this on your Shopify product page template:

• Use a mobile-first Shopify product page template with collapsible sections.
• Prioritize the most critical info (title, price, CTA) at the top.
• Add interactive content (like accordions or swipeable galleries) to keep pages clean.
• Test your layout across multiple screen sizes to ensure smooth usability.

17. Transparent Pricing Options That Build Buyer Confidence

Shoppers appreciate honesty, especially when it comes to pricing. 

By making different pricing tiers, bulk discounts, or special programs clear and accessible, you reduce friction and increase trust. 

Transparency also helps high-volume buyers feel catered to without needing extra back-and-forth.

Made in Cookware’s Shopify product page example highlights:

• Dropdown menu for different pricing: Purchasing programs like industry pricing, group gifting, trade programs, and dealer inquiries.
• Speed up process: Reduced the need for manual inquiries, speeding up the purchase decision.
• Trust-building: transparency that encourages larger, more confident orders.
  

How to replicate this on your Shopify product page template:

• Add a pricing options dropdown above or near the CTA.
• Include bulk pricing, trade programs, or subscription rates if relevant.
• Keep messaging clear and jargon-free to encourage trust.

18. Step-by-Step Guides That Simplify Complex Purchases

Some products need more than a photo and description, they need a guided experience.

Step-by-step product pages help shoppers configure, customize, or understand their purchase without confusion. This approach reduces overwhelm, builds trust, and makes it easier for customers to buy confidently.

Cowboy’s Shopify product page example highlights:

• Step-by-step configurator: A guided flow that breaks big decisions into small, easy steps with interactive customization that updates in real time.
• Visual progress tracker: So customers know exactly where they are in the process.

How to replicate this on your Shopify product page template:

• Break down choices into small, sequential steps rather than long forms.
• Add visual progress indicators to reassure shoppers.
• Incorporate dynamic previews or updates as customers make selections.

19. Product Quizzes That Personalize the Shopping Journey

When customers feel overwhelmed by options, a guided product quiz can simplify the decision and deliver tailored recommendations.

By asking a few quick questions, you help shoppers discover the product that’s right for them, making their experience feel personalized and increasing conversion rates.

Luxy Hair’s Shopify product page example highlights:

• Interactive quiz experience: Help shoppers choose the perfect shade and style instead of scrolling endlessly.
• Build brand connection and trust: Customers get customized suggestions that fit their needs, boosting confidence in their purchase.

How to replicate this on your Shopify product page template:

• Keep quizzes short, visual, and easy to answer.
• Provide clear, personalized recommendations at the end.
• Highlight the quiz near the top of the product page to catch shoppers early.

20. Accessible Navigation That Guides Every Shopper

A great product page isn’t just about visuals; it’s about making the journey easy for everyone. 

Accessible navigation ensures shoppers can quickly find product details, explore options, and complete their purchase without frustration. 

Hiya Health’s Shopify product page example highlights:

• Sticky menus or tabbed navigation: Simple layouts that reduce cognitive overload. Mobile-friendly navigation that keeps everything tappable and scannable.
• Hierarchy of information: Inclusive design that ensures everyone can navigate smoothly.
  

How to replicate this on your Shopify product page template:

• Use clear, concise labels (e.g., “Details,” “Ingredients,” “FAQs”).
• Test the flow on both desktop and mobile for accessibility.
• Structure content with logical hierarchy so shoppers never feel lost.
  

BONUS: More Shopify Product Page Tips

1. Experiment with custom pricing  

Use discounts strategically and at specific times to boost short-term sales, get more customers or move slow-moving stock.

There are two pricing strategies you can implement on your Shopify store.

a. Custom pricing levels  

Through Bold Custom Pricing, you can offer multiple wholesale pricing and tiered pricing on products. Also, explore "Power Features" where you can assign each product’s wholesale price and bulk discount.  

b. Compare at pricing

While offering discounts on the online store, applying the ‘compare at’ prices lets customers know how much money they’re saving.

Pro tip: Use auto apply coupon codes at checkout

2. Replicate mobile gestures  

Google says that page ranking might be affected if it detects pop-ups that cover the main content when a shopper immediately lands on a mobile page.

A brilliant way to avoid the penalty is to not show the pop-up as soon as the user lands on the product page. Instead, utilize a scroll or time-triggered pop-up that doesn’t cover the whole page.  

Next, the position of the menu bar is a top priority on a mobile device. In Shopify, you can add a fully customizable design intuitive menu bar.

Furthermore, create a seamless experience across devices.

More than half of eCommerce shoppers shop on multiple devices. However, shoppers lose their carts each time they switch devices on your site.

Look towards persistent cart options to automatically tie shopping carts with accounts to prevent potential customers from losing their shopping carts.  

Check out: 20 Shopify Product Recommendation Strategies (With Real-Life Examples)

9 Common Elements of the Best Shopify Product Page Templates

The best Shopify product pages have two things in common - one, they all have great conversions, and two, they have certain elements optimized to offer the user a great experience. 

1. A product name that triggers a response

Functionality isn’t the only prerequisite here. It needs to offer a “feeler” into the product - the reason why many product names come with what can be called a brief descriptor within the name itself.

Check out what Nike does in the example below. The feeler is established through “dunk high” so that when you want to know further, you can head to the product description. A product descriptor also helps users find the same product across various Google results if they’re looking to compare prices or color section and buy. 

Also check out: Shopify Product Bundling Guide: Best Practices And Examples

2. Enticing product images

In the absence of brick-and-mortar trials, visitors try to get a thorough understanding of the product they desire to purchase. How something looks and feels, in an eCommerce scenario, can be conveyed most effectively through images.

And this is why the best Shopify product pages invariably carry well-shot images.

Here’s a quick list of must-haves in product page images that can significantly enhance customer experience:

• They need to appear against a white or any other neutral background

• They must be easily zoomable so that potential customers can look at details more closely

• They need to be shot across multiple angles for a 360º view

In the following example, iPhone 13's custom product page is as dynamic as it is engaging. The superhero is the product photography, which builds on the narrative as you scroll.

3. A detailed product description

Ideally, a description is a detailed combination of both features and benefits, to engage the rational as well as the emotional side of visitors.

A glimpse of a Jack Wolfskin custom product page will tell you what a good product description looks like. It touches upon the facts and also makes space for the anticipated experience. 

Product pages letting you down? Read the kickass product page guide containing examples, best practices, templates plus more.

4. Quality product videos

The average eCommerce visitor loves product videos, and it’s for two very good reasons:

• Videos can potentially break down complex information into simpler parts

• The video uses sound, images as well as subtitles making them accessible for people with disabilities

• Even the simplest videos can bring multiple elements together to build a great narrative for the product and brand

Take a leaf out of the book of TruWood Watches, a brand that engages its audiences with simple yet experience-driven unboxing videos.

Catch your attention? Get more here: eCommerce product videos: 30 brand examples to learn from

5. Clear add-to-cart call-to-action (CTA) 

A clear call-to-action (CTA) gives your shoppers a sense of direction.

The most successful eCommerce brands keep it simple when it comes to their product page CTA.

Here’s a quick look at how Bellroy manages to keep their add-to-cart CTA both simple yet striking, and yes, above the fold!

6. Shipping information

Whether they offer free shipping or not, one common trait that all successful custom product pages share is transparency.

They declare whether shipping is free, how long it will take to dispatch, customer support information for queries, and a link to the shipping policy.

Here’s a glimpse at how UK based brand Missguided declares its shipping and delivery information:

When a shopper clicks on “delivery & returns”, they’re provided with a full-page document with terms, conditions, and applicable fees. 

7. Returns information

In 2020, the overall retail return rate in the US was 10.6%. This clearly indicates that delivery isn’t the final stop in the sales cycle.

This is why the best eCommerce businesses have a state-of-the-art returns policy and ensure it’s linked to their product pages.

Missguided also features a full FAQ page on returns. 

8. Ample customer reviews

The average customer likes to know what other customers thought of the product they want to buy.

This tendency borrows from the psycho-social phenomenon “social proof”, which has people following the perceptions and decisions of other people in pursuit of what is “correct”.

This is why brands that offer customer reviews on their custom product pages, naturally improve the possibility of the following:

• Increased trust

• Improved engagement

• Increased average basket values

• Even fewer returns

Target features a review mix across their product pages. Additionally, they also showcase a gallery of review images as well as a panel that depicts averages across star ratings. 

Recommended reading: 21 Proven Ways to "Prevent" eCommerce Returns (+ Smart Handling ideas)

9. Frequently asked questions (FAQ) section

Considering no two eCommerce businesses run on the same policies, shoppers usually come with a lot of questions.

Imagine answering the same questions again and again, for every shopper that comes along. This is the kind of time and resource wastage that a FAQ section featured on your product pages, can help you avoid.

Take the example of Kettle & Fire. They offer a FAQ link towards the end of every product page. 

FAQs - Shopify Product Page Templates

1. How do Shopify product page templates work?

To enable millions of eCommerce businesses to build product pages up within short notice, Shopify has developed a number of product page templates.

Here’s a quick glimpse of how they work:

• A whole-store template that applies to your entire eCommerce website. This includes product pages although a whole-store template usually allows for lesser customization

• A single-page template typically applies only to product pages. Single page templates are highly customizable and are developed mostly by third-party app builders. Single page templates usually come with more nuanced features than whole store templates.

2. How do you create a custom product page template on Shopify ?

To create a custom Shopify product page template, go to 

Online Store > Themes > Actions > Edit Code

• Then, access the folder called “Templates” and under that, “Add a New Template”

• They will ask you to choose an option to state what you creating a new template for under the “Create a New Template for” dropdown menu

• Select “Product” and give a name to your new product page template

If you’re using Shopify 2.0, let the template type continue to be “JSON” and for other versions see to it that it continues to be “LIQUID”. 

• Now, click on “Create Template”

• Remove all the code from this template so that it can be blank

• Copy the code from under product JSON or LIQUID and paste it into the blank space under the new template

• Under the new template, change “main product” to “custom product”

• Once you click “Create”, the new template will open in the code editor

• Remove all the existing default code

• Copy the code from under the main product .liquid or .json file into the existing blank code space

• Click save

If you want to customize this new template, follow 

Online Store > Themes > Customize. 

3. How do you create a Shopify product page template code?

When a template or theme’s default settings aren’t enough to help you make specific tweaks to your product page, you need to be able to change the code. 

To do this on Shopify, it’s ideal you know Liquid, a coding language used exclusively by Shopify. Alongside, Shopify themes also tend to feature other coding languages like HTML, CSS and Javascript. 

The path to edit your Shopify product page template code would be - 

Online Store > Themes > Theme actions > Edit code

While looking up the  theme files, remember to check /templates/product.liquid.

This is the file for the product page and this is where you’ll be able to generate new code. 

That apart, it’s helpful to go through the Shopify guide on themes that provides ample content and context for you to work on themes and related elements. 

4. How do you edit a product page on Shopify?

There are two ways to customize Shopify product pages:

• One, where you head to “Online Store” through your personal dashboard, select “Themes” and then select “Customize”. As a next step, go to “Product Pages” and then edit the features currently stated

• Two, from “Online Store”, go to “Themes”, then to “Actions” and finally, “Edit Code”

Read Next: Shopify conversion rate optimization - Answers to 30 most searched questions‍

Fire Up Your eCommerce Conversions

98% of visitors who visit an eCommerce site—drop off without buying anything.

Why: user experience issues that cause friction for visitors.

And this is the problem we solve.

We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversions with smart personalization tools.

Our conversion experts can audit your site—identify UX issues, and suggest changes to improve conversions.

REQUEST A SITE AUDIT