Blog

[Ultimate guide] How to create a custom Shopify product page template

[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

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

Customize Shopify product pages with theme default settings

 

Edit the theme’s code

customize-Shopify-product-page-edit-theme-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.

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.

how-to-customize-Shopify-theme

 

Select Product pages from the drop-down list and start customizing your product page template.

theme-default-settings-edit-product-page

 

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

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.

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.

edit-theme-code

Here you can view and edit the theme’s code.

edit-theme-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.

template-file-in-your-theme-code

 

 

edit-product-liquid-file

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.

edit-theme-liquid-code-files

 

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.

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.

50+ Shopify page templates for your inspiration

The following are some impressive product page designs, which may help you with inspiration.

Glossier

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.

stunning-product-page-glossier

 

THINX

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.

unique-product-page-thinx

 

Serota

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.

serota-product-page

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.

TRY PAGEFLY FREE

Older Post