Local > Product page

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
• Title
• 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
• Description
• 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

Nutritional information

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.

To maintain the "nutritional info" format you have to use Rich Text content type for the metafields you create.

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
Fat, 0g
- of which: Saturates, 0g
Carbohydrate, 10g
- 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%
Protein 3g

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
Alcohol, 11.5%
Style, Untamed and fun
Vintage, 2022
Size, 750ml
Closure, Cork
Varieties, Pinot Gris, Semillon, Muscat, Merlot, and Chardonnay
Classifications, Organic Principals and VeganWinemaking Style, Progressive

Progress chart

Progress charts can be used to showcase various details of a product based on a certain scale. Of course each product will have different information, so you can use dynamic data to allow unique values for each product. For this purpose you have to create a custom integer metafield to match the settings of your progress data. Make sure that you write the namespace any key in the proper block field, don't connect the actual metafield, since if it's connected it will not work.

Use the screenshot below as a reference: