[Ultimate guide] How to create a custom Shopify product page template
If you are seeking ways to customize your Shopify product pages, you are on the right track. In an era where e-commerce is coming close to the edge of saturation, customizing and personalizing are essential for your conversion rate. A well-customized product page can represent a unique image of your brand, deliver better user experience and improve sales-readiness.
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.
Today in this article, let’s take a look at the ways every Shopify merchant can create and edit a custom product page. By the end of the article, you will be able to build a template for selected or all products on your Shopify store, with or without the support of third-party apps. So stay tuned, make sure you don’t miss anything in this ultimate guide.
In this article
- Customize your product page within Shopify admin
- Using theme default settings
- Editing theme codes
- Create and edit product pages with page builder apps
- Stunning Shopify product page templates
1. Customize Shopify product pages within Shopify admin
Within Shopify Admin, you have two options to customize any Shopify page, including product page templates, which are:
Use the theme’s default settings
Edit the theme’s code
The theme’s default settings, which require little-to-no technical works, are usually basic and only allow users to edit the most simple parts of your store. However, depending on your actual requirements, each method might prove to have advantages and disadvantages.
1.1. Use default theme settings
To introduce a new method, it’s most usual to mention its upsides before the downsides. This is to ensure the objectivity and neutrality of whoever is working on it. However, due to the basic nature of the theme’s default settings, let’s just save time by walking through its disadvantages first. Then you can quickly decide whether this technique can solve your problems.
Default theme settings: Some limitation
Default theme settings usually vary depending on the theme you are using for your store, but there are common adjustments you CANNOT make to your Shopify product page template, just with the theme’s default setups:
Adding new sections is not available
If you want an informative product page with many sections featuring product description, customer feedback or demonstration video, then you should expect more than the theme’s default setups. Shopify product pages are generally limited to the design functionality you see in your store admin, and most of the themes in the market don’t let you change that.
The product page layout is fixed
You must be familiar with the default Shopify product page layout with a photo on the left and product description on the right. Similar to adding new sections, you cannot change the layout and positioning of elements within Shopify product pages. So given you want the product description to be more horizontal rather than vertical, maybe you need another choice.
Those are the two biggest disadvantages of the theme’s default settings. If you’re fine with that, then there are many things you can do to tweak your Shopify product page template.
Sell Online With Shopify
Trusted by over 1,000,000 businesses worldwide
Instruction: Customize product pages with your theme’s default settings
To start customizing your product page template, from your Shopify admin, go to Online store > Themes.
Click the Customize button to be redirected to the Theme editing page.
Select Product pages from the drop-down list and start customizing your product page template.
Button size, text color, cart page appearance, typography, etc. If all you need to is small tweaks like these adjustments, then doing it on your own using theme’s default settings is the best option, which requires no coding, no expert hiring and allows you to make changes whenever needed.
1.2. Edit your 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 and customize your unique product page template.
Liquid, HTML, CSS, JS: Get yourself prepared
Get access to the theme’s code
To edit the code of your theme, from Shopify admin, go to Online store > Themes. Again, hit the Customize button to be redirected to the Theme editing page.
On the Theme editing page, select Theme actions > Edit code to get access to the code of your theme.
Here you can view and edit the theme’s code.
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 dependant 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
- 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.
- 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.
Learn more: How to build an Amazing Shopify FAQ Page
Sell Online With Shopify
Trusted by over 1,000,000 businesses worldwide
Do it yourself vs. hiring experts
Most of the time, people choose to hire an expert because they’re not sure if doing it themselves can deliver the best results. An experienced expert team saves you the time spent on technical researching while at the same time guarantee the best outcome. You can also expect after-sales support and even a refund for failure to meet the needs.
That sounds great, except for one thing: There would always need to be an expert.
Imagine it’s 2 a.m and you need to tweak your page layout to meet a trend that would sky-rocket your sales. What would you prefer?
- Get out of your bed, open your laptop and do it within 10 minutes.
- OR: WAIT for your expert to get back (automatically maybe) and guarantee to do it in the morning.
Well, in this case, it doesn’t sound so time-saving. What you once thought saves you the time spent on technical researching turns out to take your time in the long run. Hiring an expert shouldn’t be your long term solution.
A combination of all approaches
Now if the chaos of marketing, advertising, financing -related tasks is spinning your head, and at the same time arise the hours of technical training, don’t panic. There’s a seemingly perfect answer: A combination of the aforementioned approaches that saves your time, requires little coding but still guarantees you control of your page customization.
Exactly, it’s page builder apps!
2. Create and edit Shopify product pages with Shopify page builder apps
As mentioned above, page builder apps are a way to customize Shopify product pages (and other pages) on your own with super little coding. There are more than a dozen page builder apps on the Shopify app store, for which you can search with the keyword “page builder”.
In general, most Shopify page builders are in the form of a drag-and-drop editor. You can flexibly drag and drop a section where you want it to be and edit its parameter, behavior, and styling within a hand reach.
Take a look at how easy it is to build a stunning Shopify product page template, all the way from scratch.
Easy as it is, PageFly and many other Shopify page builders also allow users to further tweak their editing with custom code. That is, no coding is required to build a custom product page for your store. But if you need more customizing, you’ve got it.
3. Inspire yourself with stunning Shopify product page templates
Customizing a unique Shopify product page template would have no longer been an issue had you found out about the existence of page builder apps. Go ahead if you’ve already had an image of how your product page would look like. If you haven’t, taking a look around might give constructive ideas and intrigue your brain before starting work.
The following are some impressive product page designs, which may help you with inspiration.
You are looking at a basic product page layout that has been smartly customized. A product description is neatly arranged next to the product photo, making the whole section look organized, creating a sense of comfort.
Product photos do not necessarily need to have a background and product description can totally be on the left. As long as your store visitors can graph information at a glance and add products to their carts easily, product page alignment is up to your liking.
Even no product description is okay if your customers can see immediately what it is and does. Notice the FULL DETAILS line under the BUY IT NOW button, whoa! A product description DOES exist and is modestly available to those who bother to click to see more. A clever tweak.
This product page can’t look more simplified.
Already got some ideas for yourself, haven't you? Creating and editing a Shopify product page template is not a big deal. What matters is whether your designs generate better customer experience that leads to more sales, or not. It’s time you rolled up your sleeves and start building the best product page template.