product

Create engaging and informative product pages with the customizable product template, allowing customers to view product details, images, and pricing, as well as easily add items to their cart or wish

The product template is responsible for displaying individual product pages within your online store. It allows your customers to view product details, images, descriptions, and pricing.

Implementing the Product Template

To access and modify the product template, locate the product.liquid file within the templates folder of your theme. You can customize the layout and styling to better match your store's branding and aesthetic.

When displaying a product, you can use the product object to access its properties, such as title, description, images, price, or variants.

For example, to display a product image, title, and price, you could use the following code:

<div class="product-page">
  <img src="{{ product.featured_image }}" alt="{{ product.name }}">
  <h1>{{ product.name }}</h1>
  <p class="price">{{ product.price | money }}</p>
</div>

This code will create a product page layout containing the product's featured image, title, and price. You can further customize the appearance by modifying the CSS styles associated with the product-page and price classes.

Last updated