The product page is the most important page on your store, where the actual purchases happen, so you need to carefully set this up in order to make sure that it converts in the best possible. Our theme has all the tools you need to achieve this, so let's get started.
Product page blocks
When you first edit the product page you will see some settings related to gallery style on desktop (scroll vs slider) and pagination design (scrolling gallery doesn't have pagination so this only applies to slider).
After setting up the gallery, you can change the content of the product page using blocks, so you can really achieve a lot of things with different products, page templates, metafields and more.
Let's break down the blocks:
- Price - it shows a small price and can be used for long product content where the buy buttons (which can have the price shown as well) and the details are disconnected
- Product rating - will show the product's rating if there is an app for reviews
- Text - you can either add static text and change it's style or use metafields to add dynamic text which changes with each product
- Pickup availability - we have two different styles here:
- compact - which is to be used in conjunction with the "store selector", because it will only show the local availability for the selected store
- extended - this is a more standard component which shows local availability at more than one location with much more details for each
- Icons list - similar to the product grid's icons list, this is a place where you can also add static icons or connect with the same metafields that you are using for the individual product icons .. If not all products have icons, you can even connect the title to a dynamic source in order for it to only appear when you want it to appear. This is versatile area because you can have different titles and different icons for each product page you're having.
- Variant picker - it has two types of selectors and gives you the ability to show inventory information
- Buy buttons - with a couple of nice options
- Share - for sharing on popular social platforms
- Related products - this is a very nice section which can be used together with metafields in order to make cross selling / up selling promotions on product pages. You can either have the same products selected, or have different products for each product.
- Tax information - displays a "tax included" notice for stores where this is a legal requirement
- SKU / barcode
- Collapsible tab
The nutritional information block is a more special one, which converts the inserted content into a well formatted table that can be used for multiple purposes.
The general rules are:
- Separate label and value with a comma (only the first comma in a row will be counted)
- Use line breaks to add a new row (line breaks can be added with SHIFT + ENTER)
- Use a hyphen ( _ ) to indent rows.
- You can have more than one table if you use different paragraphs (ENTER without SHIFT)
- You can use some text styling, such as bold, italic, or underline, or even links.
- Don't use HEADINGS !! As these are not properly styled
Here are some examples that you can copy & paste to start editing with your own information:
SIMPLE NUTRION FACTS
Energy, 205 kJ / 49 kcal
- of which: Saturates, 0g
- of which: Sugars, 7g
COMPLEX NUTRITION FACTS
Energy 8g, 10%
Total Fat 8g, 10%
- Saturated Fat 1g, 5%
- Trans Fat 0g
Cholesterol 0mg, 0%
Total Carbohydrate 37g, 13%
- Dietary Fiber 4g, 14%
- Sugars 10g
Potasium 160mg, 7%
Vitamin D 2mcg, 10%
Calcium 260mg, 20%
Iron 8mg, 45%
Potassium 240mg, 6%
* The % Daily Value tells you how much a nutrient a serving of food contributes to a daily diet.
PRODUCT DETAILS / INGREDIENTS
Producer, Gentle Folk
Region, Adelaide Hills
Style, Untamed and fun
Varieties, Pinot Gris, Semillon, Muscat, Merlot, and Chardonnay
Classifications, Organic Principals and VeganWinemaking Style, Progressive