Cheat Sheet On How To Create A Custom Shopify Product Page [The Easy Way]

Using a custom Shopify product page on your online store is not just about adding design elements to your website. In fact, one of the main principles of design is “Function”.

“The ultimate goal of any graphic design is to communicate and make an impression, but what’s equally important is that the right impression is made and the intended outcome is achieved.” (25-4 Online)

Therefore, the designs that go into your ecommerce website must have a function that achieves a common goal. Needless to say, in the world of ecommerce, the common goal is to sell or “convert” your potential customers.

And… You guessed it, a customized product page layout will help you do exactly that. In this article, we’ll be taking a deep dive into the different ways of customizing your product pages in Shopify. Of course, we’ll be sharing with you a cheat sheet on how to do it in the easiest way possible.

So stick around, ‘coz you’ll learn a lot about designs in this one.

Outline

• What Makes A Good Shopify Product Page?
• How To Customize Product Page In Shopify
• Customize Shopify Product Pages within Shopify Admin
• Shopify Product Page Customization Using Theme Settings
• Customize The Product Page By Modifying The Theme Code
• Create and Edit Shopify Product Pages Using Page Builders
• Shopify Product Page Template Examples
• Product Page Examples From Real Shopify Stores
• Conclusion

What Makes A Good Shopify Product Page?

A Shopify product page is a web-page dedicated to showcasing or highlighting a specific product that an online store sells. Typically, these pages include essential information like product images, descriptions, pricing, and user reviews.

In a broader sense, Shopify product pages are critical pages that help sales conversions. They serve as an “online brochure” in which products are described in the simplest ways possible, aiming to entice the potential customers into buying them.

As such, an effective product landing page should not only inform but also persuade – thereby influencing customer decisions, driving sales, and building brand credibility.

Looking at all those responsibilities, you can infer that a product landing page plays a pivotal role in your business.

But exactly what elements should be in a product page that would make it a “good one”? Check out the list below.

01. Product Name

The first element that should be in your product page is, of course, the name of your product. However, you should not just write product names the way you want to.

When writing product names for your Shopify store, be concise, descriptive, and find a way to include SEO keywords to make your product searchable.

While doing so, remember to keep the names short and avoid using technical jargons. In some Shopify stores, long and descriptive product names work for them. While others stick to short descriptions.

If you are creating product pages for the first time, chances are you might have to experiment on various names to see which ones resonate well with your audience. AB testing can help you in this aspect.

In the image above, you’ll see that Thursday boots opted for a simpler product name, “Wingtip”. The product name is descriptive of the type of shoes that is shown, at the same time, it is used as the model name. Additionally, it also helps optimize the product for SEO as it becomes searchable when their customers search for wingtip shoes on Google.

02. High Definition Product Images

Your Shopify product page must have high definition images. Preferably ones that can be zoomed in so customers can see the texture and tiny details of your products.

As online customers don’t have the opportunity to physically feel your products when they are shopping, the product images are the ones that they will primarily look at when they are browsing your store.

In a research conducted by 247 Commerce, 67% of customers opine high definition visuals are more convincing than plain product descriptions.

Therefore, this is an indispensable element of your Shopify product page. So we highly advise that you take your product photography to the next level – hire a product photographer if needed.

Thursday Boots has one of the most beautiful product pages we’ve seen in Shopify stores. Nothing extraordinary here – just the right colors, elements, and execution.

As you can see above, they did their assignment in providing high quality images of their boots. And all of these images can be magnified so that customers can see the texture of their leather shoes.

Read more: 5 Ways to Optimize the Shopify Product Image Size for your Online Store

03. Detailed Description and Product Features

After putting a descriptive product title and uploading studio quality images, you should further make an effort to paint a vivid mental picture of your product on your customers’ minds.

This will help you describe what your product feels like, the materials used in producing it, and the type of craftsmanship that was employed in making your products.

All these can be done through product descriptions and features.

Thursday Boots also did a great job in this aspect.

Their Product Features section sits right beneath their product so customers can easily see what’s special about their shoes. This section described the materials used on all parts of the products as well as the craftsmanship.

Below product features, you’ll find the product description. In this part, Thursday Boots used their creative juices to describe what it feels like wearing them.

Part of the description says:

“Wingtip Warning: if you wear these boots in public, expect to catch wandering eyes and people asking where you got them!”

It's entertaining to read and at the same time, it paints a picture as to how it feels like wearing them. Great job!

04. Shipping And Return Information

The shipping and return information serves as an assurance to your customer that if they are not happy with their purchase, they can easily return them to you.

This gives them a sense of security that if anything goes wrong, they can get their hard-earned money back.

According to Klarna:

“Retailers who don’t offer an easy returns process are losing sales and customer loyalty, with 84% of shoppers saying they won’t come back to a brand if they have a poor returns experience.”

Therefore, you should have a clear return policy and when time comes, you should honor it.

Beside their product features, Thursday Boots indicated their shipping and return policies. In the product landing page, it is not necessary to indicate the full text of your return policy. What’s important is that you have your return policy linked to your page so your customers can read them.

05. Call-To-Action or CTA

The call-to-action or CTA is the button that your customers can click to take an action. Essentially, the CTA must contain a text that reflects the type of action that will be taken when the button is pressed.

Usual ecommerce CTAs are:

• “Buy now” - jumps to the checkout page and bypasses the cart page
• “Shop All” - redirects the customers to the collection page showing all the products
• “Add to cart” - add the current product to the cart
• “Checkout” - finish the product browsing and proceed to the cart
• And more.

There is no hard and fast rule in writing CTAs. However, there are best practices that make them effective. One important practice is keeping the CTA short and descriptive of the action.

Thursday Boots used the tried and tested “Add To Cart” CTA in their product page because this is the action that they want their customer to take – add the product to the cart and hopefully check it out.

The CTA is also noticeably big so the customers don’t miss it, it also pops out from the page.

Read more: 10 Product Landing Page Templates To Boost Your Revenue

06. User Reviews

User reviews exponentially increase your chances of converting your web visitors into customers.

In fact, 93% of online shoppers read reviews before buying a new product, because they want to see what other people say about it. (Trustmary)

Therefore, we can say that customers don’t easily believe product descriptions and your web copy. Instead, they want to hear from real people who have used your products. And the best way to do that is by putting a customer review section in your product landing page.

When you scroll down to the bottom of their product page, Thursday Boots has an entire section for customer reviews. In this section, online shoppers can easily read reviews from thousands of previous Thursday Boots customers.

One piece of advice that we have if you plan to put customer reviews in your product page is to consider allowing your customers to add photos and videos in their reviews. According to Trustmary, 62% of shoppers are more likely to buy if they see photos and videos from other customers.

07. Frequently Asked Questions or FAQs

Buyers would normally have questions while they are browsing your product landing page. These could range from product-specific questions, shipping rates, return and refund policies, and more.

Therefore, you should anticipate these possible questions and lay out all the answers on your product page so customers can easily satisfy their question. This mitigates the hassle of making them send you an email or a chat.

At the bottom-most part of their product page, Thursday Boots has an FAQ section with a button that redirects them to their FAQ page.

Their FAQ page contains a list of questions related to the company, sizing and fit, product quality, shipping details, and more. And all of these questions were clearly answered.

This is a great example on how your FAQ should be. Collect all possible questions and give clear answers to each one of them.

08. Mobile Friendly

According to a research done by OuterBox, 56% of all online sales in 2022 came from a mobile device – and this number is increasing year-over-year as mobile device ownership becomes more accessible.

With that in mind, more than half of your potential customers will be using mobile devices when they go to your ecommerce website. Therefore, your custom product page (and your entire website, for that matter) should be mobile friendly.

Luckily, all Shopify themes are natively mobile responsive – meaning that they will look good regardless of the screen size and resolution.

However, as you customize your product page layout, it is safer to check the appearance of your store on mobile devices.

Thursday Boots’ Shopify product pages have a good mobile design. Sections and images are well proportioned making an overall delightful browsing experience.

09. Product Recommendations

Having a section in your product page for recommendations will help you increase your customers’ average cart value.

If you don’t know yet, upsells and cross sells form a significant portion of the total revenues of ecommerce merchants. On average, upsell takes up 10% to 30% of ecommerce revenues (Funnel Strategist).

Thursday Boots has these product recommendations that show other shoes as well as cross selling shoe-related products such as socks and shoe care.

10. Good To Have: High Quality Product Videos

Unlike product images, product videos are not necessary in the product pages. However, these are elements that are good to have if you want to delight your customers through visual aid.

A product video could be about your product itself, or it can also be an experience achieved by using your product.

Thursday Boots didn’t have a video in their product page so we provided a different Shopify store example.

Image Credits: Volant

Volant added a product video in their page to show simple, non-verbal, instructions on how to use their diffusers. To customers who are curious about their diffusers, this video definitely helps.

At the same time, it shows exactly how the product diffuses mist into the air.

11. Good To Have: Special Offers or Discounts

Special offers or discounts are a type of promotion that makes your product more appealing to buy. That is because customers gain a measurable incentive when they buy your products.

Some examples are:

• 20% discount
• Buy 1 get the second one at 50% off
• Freebies
• Discount coupons, and more

Although giving your customers some special deals is not mandatory, having something to offer will be nice to have to make them decide in favor of you.

Image Credits: Decathlon

These special offers will be extremely useful during the holiday season because customers are expecting to avail discounts. Additionally, you competitors will probably be launching their holiday promotions. Therefore, you should consider having one as well.

In the image above, Decathlon has a sitewide sale for Black Friday. One of their products that received a massive markdown is the Ski.

How To Customize Product Page In Shopify

Building and customizing a web page sometimes sounds painstaking to non-tech merchants. However, beyond allowing you to tweak things to your exact liking, working on a web page gives you an understanding of its structure, how things are aligned and what to improve for a better conversion rate.

There are three ways to edit and customize product pages in Shopify.

Using the Shopify Admin:

1. Editing the default theme settings
2. Editing the theme code

Using third-party apps:

3. Using a page builder

Let us discuss all these over the next sections.

Customize Shopify Product Pages within Shopify Admin

You have two options for Shopify product page customization via your Shopify admin – by tweaking the theme settings and modifying the theme code.

The first one is the easier, more straightforward choice if you don’t have coding experience. And the latter is the one that can be very challenging for beginners.

Shopify Product Page Customization Using Theme Settings

Shopify features an easy-to-use interface that does not require expert knowledge to create a visually stunning store. In fact, even beginners can find their way around Shopify in just a few hours or days of practice.

A custom product page is no different. You can easily make some changes by simply dragging and dropping sections wherever you want them to be.

To go to your theme editor:

1. Log in to your Shopify admin account
2. Click Online Store

3. Click Customize to open your theme editor

Your theme editor looks like this:

Note that there may be some differences depending on the theme that you are using in your store. Nonetheless, the functionality will be the same.

In the image above, the text you see on the left panel is the content of your page divided into sections and other elements. The image on the right is the actual appearance of your page as when changes are made.

To go to the Shopify product page that you want to edit, simply navigate to it using your website preview. You’ll notice that as you open a page, the items on the left panel also change to show the content of that page.

Now that you are in the Shopify product page that you want to customize, you can explore all the different customization options.

For a more detailed guide on how to make a custom product page using the theme editor, watch this in-depth guide:

Customize The Product Page By Modifying The Theme Code

Are you the do-it-yourself type of person? Great. Do you need more than just button size, text color, and font size settings? There’s absolutely a way. If the theme’s default settings are not enough, it’s time you intervened deeper into the theme’s code.

It’s coding required, of course. But it’s also powerful enough for you to make any changes you want to your product page layout..

Liquid, HTML, CSS, JS: Get yourself prepared

Primarily, Shopify themes are written in Liquid, a coding language specially developed for Shopify. Along with Liquid, Shopify themes also contain HTML, CSS, and JavaScript. So, being able to use these coding languages is necessary when you want to edit the theme code.

To edit the code of your theme, from Shopify admin, go to the Online store. Click the three dots beside the Customize button and select Edit code.

This will then redirect you to the theme code editor and it looks like this:

Start editing your code

Now that you have access to your theme’s code, you can make changes to any page in your Shopify store. Needless to say, what to do varies and is dependent on the specific change you want to make.

In your theme files, /templates/product.liquid is the file for the product page. Editing for the theme’s code is expected to happen here.

Also, Shopify provides detailed documentation on what you can do and how to do it within these theme files, categorized by elements on a product page:

• Add to cart button
• Variants
• Product page features

If you are comfortable with HTML, CSS and have a basic understanding of Liquid, you can consider following the instructions and customize your Shopify product page template on your own.

Note:

• Before editing, remember to make a backup copy of the theme so that you can undo all the changes whenever things go off track.
• Make sure your adjustments are under the support of the theme developers. Only then can you get proper support for the problems occurring during the editing process.
• If you are just starting out, hiring a Shopify expert for the customization of the product pages is a good idea. Considering the pros and cons carefully might help you decide which solution is the best.

Needless to say, tweaking your website using the code editor entails A LOT of risk and we highly advise you against doing it – especially if it’s your first time doing it. It’s a disaster waiting to happen and damages could be very difficult to revert.

Be that as it may, you can ease your way into using the code editor if you are really determined to learn about it. This video by Coding With Roby is a good place to start.

Consider hiring a Shopify expert

An experienced Shopify expert team saves you the time spent on technical research while at the same time guaranteeing the best outcome. You can also expect after-sales support and even a refund for failure to meet the needs.

Consider a page builder instead

There are limitations when using the theme editor to customize Shopify product pages. That’s why experienced users and those who have coding skills decide to customize the product page layout using codes.

However, codes are not the only solution if you want to have more flexibility in designing your store. And if you want more customizability without the risks and hassle of tweaking your theme code, there’s one solution – using a page builder.

Create and Edit Shopify Product Pages Using Page Builders

This is the cheat sheet in creating product pages that we mentioned at the beginning. Page builder apps are a way to customize Shopify product pages (and other pages) on your own without coding.

There are more than a dozen page builder apps on the Shopify app store, however, we highly suggest you give PageFly a try.

In the video below, we have a step-by-step guide on how you can create and edit a Shopify product page. And after watching it, you’ll see how easy it is to create beautiful product pages with relative ease.

Shopify Product Page Template Examples

By using PageFly, you don’t have to create a product page from scratch. We have a collection of more than 100 templates that you can use for any type of product and for various occasions.

Check out some of our best shopify product page templates below:

01. Digisnap

If you own a Shopify store that sells electronic products such as smartphones, cameras, and other devices, Digisnap is a template that you will appreciate for its contrasting black and white colors.

It has an elegant silhouette that elevates the look and feel of the website. Additionally, sections are well-proportioned right off the bat so little tweaking is needed.

Furthermore, all the elements needed in a good product page are here.

02. R2VF

R2vf is a Shopify template that is specially designed for clothing stores. It maximizes the entire screen real estate of any device that you use and it has its focus on high quality images.  

So if you own an apparel business, you should consider using this in your store to avoid the hassle of building a stunning store from scratch.

03. Vivid

If other templates focus on providing minimalist designs by using flat and light colors, Vivid is the exact opposite.

As its name implies, Vivid is a Shopify template that puts great attention to providing vivid colors that add excitement to a website.

This store is best suited for ecommerce stores that are selling candies and desserts like cakes and cupcakes. However, with some minor color changes, it would also look great on stores whose target audiences are kids and kids-at-heart.

04. Chester

Chester is a template that has this light and airy feel to it. The use of pastel colors and minimalist icons and fonts all contribute to its overall look and feel.

This is best suited to ecommerce stores that are selling home furniture. However, it would also work well with arts and crafts stores.

As you can see, Chester uses a combination of symmetry and asymmetry in the sizes of its images to achieve that refreshing look.

05. Plushie Children’s Day

The Shopify product page template in our list is Plushie Children’s Day. it has a youthful and chic feel to it that will surely captivate your target audience.

It is designed for ecommerce stores that are selling plush toys but it would also look great with children’s apparel and baby products.

When you use this product page template, you’ll be treating your customers to a delightful trip back to their childhood.

Product Page Examples From Real Shopify Stores

Before we conclude this article, we want to inspire you more by giving some real examples of magnificent product pages from live Shopify stores.

Check out the examples below.

01. LYFEfuel

www.lyfefuel.com

Lyfefuel’s product page is one that’s packed with information and all the right elements that make it a page worthy of attention.

It has all the necessary information needed to describe its product. And to do that, they used a section with a chart that compares their products to others in the market.

“Show, don’t tell” is the prevailing mantra of their page as all their claims are not merely described. Instead, they used charts, graphs, and images to show what they are talking about.

They surely know that their target audience are those people who are very conscious about their food intake. And that’s why the nutrition facts of their product is clearly visible not just in the packaging but also within the page.

We definitely approve of their use of accordion underneath its product image in order to provide more info without cluttering the page.

Below the add-to-cart button are videos of their satisfied customers saying all good things about the product – this is a good decision because these testimonials help erase any hesitations or doubts of potential buyers.

The high quality videos are also worth mentioning as they represent the dream physique of anyone who’s into fitness.

All in all, they have done a fantastic job here!

02. WTF Notebooks

www.wtfnotebooks.com

WTF Notebooks is one of those quirky websites that you’ll enjoy exploring while having a good laugh.

They have these notebooks that have witty statements written on them such as:

• “Things I’d like to tell my boss but that would get me fired”
• “Algebra and other things the devil invented”
• “Times I was right and nobody listened”
• And a lot more!

They’re funny – you should check them.

But aside from writing witty statements, we can say that WTF Notebooks has also mastered the art of creating good design.

They used a simple Helvetica typeface as their main font and they oversized it a little on some sections to make them pop out. They do know how to mix colors as well – the combination of black and yellow clearly works in a good way.

Aside from awesome designs and impeccable copywriting, they added all the right conversion elements to make the product page serve its purpose.

They capitalized on text-based reviews as well as videos of customer testimonials.

WTF Notebooks also has a section where their customers can buy more products for more discounts plus perks – and that’s a great upsell strategy.

The product description was well-managed and is aided with visual elements to make it more comprehensible.

And finally, customizing your order is a truly blissful experience as choices are laid out properly for a frictionless experience.

We still have a lot of good things to say about this page. However, we need to move on.

Splendid!

03. Tushy

www.hellotushy.com

Just like WTF Notebooks, the people at Tushy are wordsmiths as they write excellent copy – and they elevated it with wordplay and puns that will make you chuckle.

Tushy does not shy away from using words that other people might find a bit vulgar. And they put a funny spin to an otherwise difficult topic to discuss.

Their product page uses a combination of white background and pastel colors to give that vibrant feel instead of a luxurious one. And this choice of color works well with their quirky brand voice.

Product testimonies – video and text – are used generously throughout the page.

What caught our attention is the product description and their unique way of executing it. Since their products require a bit of elbow grease to use, they have visual instructions on how they can be installed.

Furthermore, they have a dedicated section that explains why using bidets is better and more cost-effective compared to the customary tissue papers.

Moreover, they have product upsells and cross-sells at the beginning of the page and at the end.

All in all, Tushy has mastered both copywriting and designs – and this is a good combination if you want to get good sales conversions from your product pages.

Tushy aced their product page! **claps**

04. Juiced Bikes

www.juicedbikes.com

Juiced Bikes sells high-performance electric bikes.

What pops out of their product page is their generous usage of large images and section-wide videos to demonstrate their products in real life situations.

Since the main selling point of these ebikes is their specifications (such as battery life, power, and mileage), they put great detail into describing their products, accompanied by a video that shows crucial specs that their audience might want to know.

Furthermore, they got a little deeper into their product description by highlighting the best features of their bikes. They also have product recommendations that complement their ebikes such as air pump, seat padding, and mobile phone charger.

Another thing we like about this product page is that it gives their potential customers an option to ask for help in finding the best-fit product for them.

By clicking the “Help me choose” button, they will be redirected to a page where a series of questions will be asked (like type of road, color, and height) to narrow down the choices. After that a personalized recommendation will be given.

As most of their products cost more than $1000, this personalized recommendation is a huge factor in helping their customers choose the best bike for them. It’s also a win-win situation because they can minimize product returns and mitigate the chances of having unsatisfied customers.

And if we were in the market for an ebike, this is a type of product page that we will find really helpful and satisfying to use.        

05. Chilly’s

www.chillys.com

The last one in our list is Chilly’s. A Shopify brand that sells double-walled flasks that prolong the temperature of either hot or cold beverages.

Among all the items in this list, Chilly’s product page is the cleanest one. Be that as it may, it made it to our list for one basic reason – simplicity. Chilly’s has hit a home run in this part.

As their products don’t require technical jargons to describe, they chose to create a simplistic homepage that puts their product at the center of its design. Plain and simple.

What we loved most is the simple animation that they utilized in order to reflect, in real time, the personalization choices made by their customers.

This eliminates the guesswork from the customers when they see changes as they happen – thereby setting reasonable expectations even before they receive their orders.

And if you own a Shopify store that allows product customization, you’ll definitely learn a thing or two from Chilly’s.

Tip: You can use Shopify product customizer apps like Infinite Options if you want to enable personalization on your product pages.

Moreover, product recommendations are present in the page. However, there is a lack of customer reviews section, but there is a Trustpilot rating at the bottom of the page. In our opinion, customer reviews are better than simple starts displayed at the product page.

Nonetheless, Chilly’s did a great job, no doubt about that!

Conclusion

Shopify is a great ecommerce platform that is ready to use as it is. Within its ecosystem, there are more than 160 themes to choose from. Therefore, whatever niche you are in, you’ll definitely find a theme for you.

Be that as it may, Shopify does not limit the amount of creativity that you can put into your store. And although its theme editor has some limits if you want to create custom Shopify product pages, there are some alternative actions that you can take.

As we mentioned, one of the best courses of action if you want a custom product page is by using page builder apps like PageFly. With PageFly, you’ll be able to achieve the look that you want by using its Shopify product page templates or by building one yourself.

Remember that your Shopify product page must not only look beautiful just for the sake of it. Instead, your customers must be at the center of every design that you make.

At the end of the day, they are at the receiving end of your online store. So it’s important that when you are creating a custom Shopify product page, you should look at it from a customer’s perspective.

Explore more, check out: Best 40+ Shopify Website Examples To Inspire You