3 Easy ways you can create Shopify product templates

Imagine you've just opened a Shopify store, but your product pages lack personality. It's a common hurdle in Shopify store design where many new store owners need help to make their products stand out. This is where Shopify product templates come in handy. By reading this article, you'll learn the ins and outs of creating these templates to elevate your store's online presence.

Instant's product page builder is here to help. It streamlines building and customizing Shopify product templates so you can easily focus on growing your business and designing your store.

How do Shopify product templates work?

In Shopify, a product template acts like a blueprint, laying out the essential elements your customers need to make informed purchase decisions. Each template includes sections for:

• Product images

• Descriptions

• Prices

• Reviews

With this layout, you can ensure consistency and professionalism across your store.

Themes and templates: The backbone of your store design

When you choose a Shopify theme, you get a set of pre-built templates for different pages in your store. This includes templates for:

• Product pages

• Collection pages

• Blogs

The product template, in particular, is designed to display all the necessary information for each product. It keeps your store cohesive and organized, whether you're selling shirts, gadgets, or furniture.

Reusability and consistency: The mold for your product pages

Think of product templates as molds that shape each product page with the same structure. For instance, if you’re running a clothing store, you might have a template that includes size, color, or fabric options. Using the same template for all clothing items maintains a consistent look and feel, making it easier for customers to navigate your site and find the information they need.

Customization for different product types: Tailoring the experience

While templates are reusable, Shopify gives you the flexibility to create multiple templates for different product categories. For example, a clothing store might have one template for tops, another for accessories, and yet another for shoes. Each template can be customized to highlight the unique features of those items, making it easier for customers to find the details they’re looking for.

Templates for other pages: Creating a dynamic store

Shopify also provides templates for other pages, such as blog and collection pages. These templates are specialized, with a blog template focusing on text and images for articles and a collection template grouping products into themed pages like:

• New Arrivals

• Summer Favorites

By using these templates, you can create a dynamic, organized store that helps shoppers find what they’re looking for more easily.

Backend code and drag-and-drop editor: The best of both worlds

Behind the scenes, Shopify templates are powered by Liquid, Shopify’s coding language, which controls how information is displayed on each page. You don’t need to know how to code to make customizations. Shopify’s drag-and-drop editor lets you adjust:

• Layouts

• Colors

• Sections visually

This gives you the flexibility to create a store that reflects your brand while providing a seamless shopping experience for your customers.

Creating custom Shopify product templates

Creating a custom product template in Shopify allows you to tailor product pages to your unique branding and functionality needs. Here’s a detailed breakdown of how to do it, along with some additional tips for managing themes and bulk changes:

1. Creating custom product templates in Shopify

Understand your theme

Before you create custom templates, take time to explore your theme’s features and documentation. Each theme has its limitations and strengths, and knowing these will help guide your customizations. Some themes offer more flexibility with drag-and-drop features, while others require more hands-on coding.

Access the theme editor

• Go to Online Store > Themes in your Shopify admin.

• Choose the theme you want to customize and click Customize.

• To access the theme code, click Actions > Edit Code.

Create a new template

In the theme editor:

• Click Add new template.

• Select 'product' as the type.

• Name your template something that’s easy to remember (e.g., custom product).

Customize your template

Use Shopify's drag-and-drop sections to customize the product page layout. To enhance your product descriptions, you can add:

• Images

• Videos

• Reviews

• Size charts

• Other blocks

Be creative, but keep usability in mind. Adding too many elements may slow down the page's load time.

Apply the template to products

• Go to Products in your Shopify admin.

• Select the product you want to assign the new template to.

• Select your custom template from the Theme template dropdown menu on the product details page.

2. Creating a new template in older themes

Creating custom templates is only possible for older themes after upgrading to Shopify’s Online Store 2.0. You have a few options to make the switch:

• Download a new Online Store 2.0 theme: Shopify's Theme Store offers various themes for different types of stores.
  
  

• Update your existing theme: Some themes have been updated to Online Store 2.0. You’ll see a green checkmark in your Shopify admin if an updated version is available. Be sure to back up any code customizations before updating.
  
  

• Migrate your current theme: If you wish to keep your old theme but upgrade it, migration is possible. However, it involves coding knowledge (HTML, CSS, Liquid), and Shopify recommends working with a developer or Shopify Partner to help with this.

3. Editing product template files with Liquid

Shopify structures its themes using Liquid, a template language. This provides another level of customization if you’re familiar with coding.

• Accessing the code editor: From your Shopify dashboard, go to Online Store > Themes, click the three-dot icon, and select Edit Code.
  
  

• Editing Liquid files: Your product pages use the product.liquid template by default. This file determines the layout of the product pages, and you can insert custom Liquid code to modify the display of product information, add new sections, or create dynamic content based on product tags, collections, or other conditions.

4. Applying bulk changes to products in Shopify

For stores with a large catalog, Shopify allows bulk editing of product templates:

Bulk edit products:

• Go to Products from your Shopify admin.

• Use the search filter to find products you want to update.

• Select the products, then click Bulk edit.

• From the Columns dropdown, enable the Template option.

• Select the first product’s template field, hold Shift, and select the last one to bulk apply the new template.

• Click Save to apply changes.

Bulk edit collections: You can also bulk edit collections by going to Products > Collections, selecting the items, and following the same process as for individual products.

How to create custom Shopify product templates using apps

Page builder apps are a way to customize Shopify product pages (and other pages) 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 use 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.

Creating a custom Shopify product template using apps can significantly enhance your store's functionality and design. 

1. Choose the right page builder app

Several page builder apps offer robust features for customizing product templates. For example, Instant is a Shopify page builder that focuses on creating high-converting landing pages and sections without coding. It includes a visual editor and integrates well with various eCommerce tools.

2. Install the app

Once you’ve selected a page builder app:

• Go to the Shopify App Store.

• Search for your chosen app (e.g., "Instant").

• Click on "Add app" and follow the prompts to install it in your Shopify store.

3. Access the page builder interface

After installation:

• Navigate to the app from your Shopify admin dashboard.

• Familiarize yourself with the drag-and-drop interface, allowing you to add and arrange elements easily.

4. Select a template or start from scratch

Most page builder apps, including Instant come with pre-designed templates:

• Choose a product template that fits your brand or start with a blank canvas.

• Customize elements like images, text, buttons, and product descriptions according to your needs.

5. Customize product details

Utilize the app’s features to tailor your product display:

• Add Product Variants: Showcase different sizes, colors, or styles.

• Incorporate Upsell Options: Include recommendations for related products or bundles.

• Enhance Visuals: Use high-quality images and videos to attract customers.

6. Optimize for mobile devices

Ensure that your product template is responsive:

• Most page builders allow you to preview how your page will look on mobile devices.

• Adjust layouts and elements specifically for mobile viewing to enhance user experience.

7. Test your yemplate

Before publishing:

• Preview your changes to ensure everything looks perfect.

• Test functionality such as buttons, links, and checkout processes.

8. Publish your custom template

Once satisfied with your design:

• Click on the publish button within the app.

• Your new custom product template will be live on your Shopify store.

7 Examples of best product pages to inspire your template design

1. Social proof and intuitive comparisons: Lull's product page approach

Lull’s product pages shine a spotlight on social proof and intuitive comparisons. The hero section starts with powerful messaging and a highlighted review to instantly build trust. A comparison chart further down the page makes it easy for undecided shoppers to see why Lull stands out against competitors. 

• A well-placed product section showcases top products with essential details and a tempting discount offer. 

• Reviews are strategically placed to add credibility. They provide written reviews, an average star rating, and a review guarantee. 

• A UGC (user-generated content) section shows real customers enjoying Lull’s products, reinforcing authenticity. 

• Using a template in Instant simplifies creating similar designs without coding.

2. Visual elegance and practical offers: Nodiee's sleep machine strategy

Nodiee’s product pages are a masterclass in visual elegance and practicality. The soothing blue and white color palette perfectly complements the sleep machine, while the “Why choose us” sections and FAQs answer potential questions. 

Customer testimonials build trust, and product bundle offers are a clever way to appeal to parents of multiple children. These discounted bundles can be the deciding factor when choosing between brands, giving Nodiee a competitive edge.

3. Subscription model success: Bokksu's approach to japanese snacks

Bokksu’s product pages effectively use the subscription box model to attract repeat customers. Each box is curated with made-in-Japan snacks and treats, and product pages feature remarkable photos and short descriptions of each treat. With nearly 12,000 reviews and a 4.8-star rating, this approach works.

4. Enticing descriptions: Wilfreds Pies' tasty strategy

Wilfreds Pies’ product pages offer beautifully written descriptions to convey the distinct taste of each product. Customer reviews below the description complete the appetizing sense, enhancing the overall experience without intricate product images or visuals.

5. Realistic representation: Abbott Lyon's strategy for custom jewelry

Abbott Lyon’s product pages use a “Styled on Instagram” section to feature customers’ feedback. This gives buyers a realistic look at the products without studio lighting or retouching and allows them to see the jewelry in different skin tones and styles.

6. Striking visuals: Kokada's vibrant approach to organic snacks

Kokada’s product pages combine lively packaging with page design to create a fun and fresh vibe. The brand carries a line of organic coconut spreads, and the striking visuals make the product pages as flavorful as the snacks themselves.

7. Friendly vibes: Lucy & Yak's bold clothing pages

Lucy & Yak’s product pages are packed with personality, featuring bold texts, full-sized unedited product images, and thorough product and shipping details. Customers are greeted with a sense of friendliness and are more inclined to take action through clear CTA buttons.

3 Best practices for adapting your Shopify template

1. Optimize for visual impact with Shopify templates

Product images are the backbone of your Shopify store. MDG says 67% of buyers rely on them for their purchasing decisions. 

• Prioritize high-quality visuals to enhance appeal and boost conversion rates. Larger, clearer images not only attract attention but also encourage social sharing. 

• Use high-resolution pictures optimized for quick loading. This not only improves user experience but also enhances SEO rankings. 

• Incorporate zoom-in features or multiple angles to offer a comprehensive, in-store-like experience. This builds trust and helps buyers feel confident in their choices.

2. Go mobile-first in Shopify store design

Mobile is king in eCommerce, and your Shopify store needs to keep up. Ensure your theme is fully responsive and mobile-friendly. Customizations should be tested to maintain functionality and aesthetics on smaller screens. 

• Regularly preview your store on mobile devices. 

• Check that buttons are the right size, images are optimized, and interactive elements like sliders or dropdowns work well on touchscreens. 

• Keep mobile layouts simple to avoid overwhelming users. 

• Focus on essentials:

1. Clear product images

2. Visible call-to-action buttons

3. Concise product descriptions

3. Streamline navigation and CTAs for Shopify users

A smooth navigation experience with clear CTAs helps customers move through your store effortlessly. 

• Organize categories and collections for easy access to products. 

• Strategic CTA placement, like "Add to Cart" and "Buy Now," should be prominent without cluttering the page. 

• Ensure these buttons are easy to locate on both desktop and mobile views, driving buyers toward completing their purchases. 

• Encourage further exploration by featuring “Recommended Products” or “Related Items” at the bottom of product pages. 

Optimize your Shopify store for conversions without breaking the bank with instant's Shopify product page builder

Instant is changing the game for Shopify store design by offering a user-friendly product page builder that lets you create fully customizable and advanced pages without needing any coding knowledge. With its intuitive drag-and-drop interface, you can quickly design and publish high-converting:

• Landing pages

• Blog posts

• Poduct pages

• Sections

This means you'll have complete control over your store's design, which is essential for any eCommerce team or agency. You can experience seamless integration with Figma and other eCommerce tools, making it a versatile choice for enhancing online store performance and increasing conversions.