Product page

The product page is built from the Product section and the sections under it. The Product section holds the gallery and the buy column. Everything in the buy column is a block you can reorder, hide or remove.

To open it:

1. In your Shopify admin, go to Online Store > Themes and click Customize on Loco.
2. In the page selector at the top, choose Products > Default product.
3. Click Product in the sidebar to see its settings and blocks.

Changes to this template apply to every product that uses it. To give some products a different layout, create a new product template from the page selector and assign it to those products in the admin.

Section settings

Product images are never cropped. Each image sits whole inside a frame of a fixed ratio, so photos of different shapes line up.

Blocks and their order

Every preset starts with these blocks, top to bottom:

To change the order, drag a block up or down in the sidebar. To hide a block without losing its settings, click the eye icon next to it. To add a block, click Add block under the last block of the section.

Two blocks join their neighbors when you place them right next to each other:

• Quantity selector placed right above Buy buttons shares their row.
• Size chart placed right after Variant picker joins the size option. See Size chart.

What each block does

• Title: the product name. To show a badge above it, add a product tag such as badge:Organic. 14 characters max.
• Text: a short line. Show chooses Custom text, Vendor, SKU or SKU and vendor. Text style is Small label, Body or Caption. See Tagline from a metafield.
• Rating: the rating from a product reviews app. See Ratings.
• Price: the price, the sale price and the unit price. Show tax line adds the line about taxes and shipping. Show installments adds installment terms when Shop Pay Installments is available in your store.
• Variant picker: the product options and purchase options. See Variants and swatches.
• Inventory: the stock line. See When “Only N left” appears.
• Quantity selector: the quantity stepper. It follows quantity rules and volume pricing you set in Shopify for B2B catalogs: it starts at the minimum, moves by the increment, and lists volume prices under it.
• Buy buttons: Add to cart and, with Show dynamic checkout buttons, the customer's preferred payment option, such as PayPal or Apple Pay. Show gift card recipient form applies to gift card products only. See Gift cards.
• Pickup availability: local pickup. See Pickup availability.
• Description: the product description. Collapse long descriptions shortens a long description to four lines with a Read more link.
• Complementary products: products that go with this one. See Complementary products.
• Size chart: a link that opens a size chart. See Size chart.
• Collapsible tab: extra information such as care, materials or delivery. See Tabs.
• Back in stock request: under a sold-out variant, customers can send your store a request. It arrives as a contact form email, and you reply yourself. The theme does not send automatic restock emails.
• Share: a share link with your own Label.
• Custom Liquid: your own Liquid or HTML code. See Code customizations.

Image zoom

Image zoom has two options:

• Open lightbox: clicking an image opens it full screen at high resolution, with zoom buttons, a close button and the other images of the product. This is the default.
• Off: images do not open. Choose this if your photos are small or you do not want customers to leave the page view.

Add an app block

Apps that support theme app blocks can add their own blocks to the buy column, for example reviews, size advice or delivery estimates.

1. Install the app from the Shopify App Store and follow its setup.
2. In the theme editor, open Products > Default product and click Product.
3. Click Add block at the bottom of the section and open the Apps tab.
4. Choose the app block, then drag it to where you want it.
5. Click Save.

If the app's block is not listed, the app adds its content another way, for example as an app embed under App embeds in the sidebar. Check the app's own instructions.

Variants and swatches

The Variant picker shows one control for each product option, such as Color or Size.

Picker type has two options:

• Swatches and buttons: color and image swatches for options that have them, buttons for the rest. This is the default.
• Dropdown: a dropdown menu for every option.

An option with more than 12 values always shows as a dropdown. Sold-out values are crossed out, and combinations that do not exist are dimmed.

Color and image swatches

Swatches come from Shopify, not from the theme. You set them on the option value in your Shopify admin:

1. Open the product in Products.
2. Edit the option, for example Color, and give each value a color or an image swatch.
3. Save the product.

An image swatch is used when a value has one. Otherwise the theme uses the color. An option whose values have neither shows as buttons. The same swatches appear on product cards when Show color swatches is on in Theme settings > Product cards.

Variant images

To show the right photo when a customer picks a variant, assign an image to each variant in your Shopify admin: open the product, click the variant and choose its image.

The gallery then opens on the selected variant's image and moves to the matching image when the customer changes the variant. All product images stay in the gallery. When the option has color swatches, each variant's thumbnail is outlined in its swatch color.

Purchase options

When a product has selling plans from a subscriptions app, the Variant picker shows them under Purchase options, next to One-time purchase when the product can also be bought without a plan. Each option shows its name, description and price.

Gift cards

On a gift card product, Buy buttons can show a recipient form when Show gift card recipient form is on. The customer checks Send as a gift and fills in:

• Recipient email
• Recipient name
• Message
• Send on: a date up to 90 days from today. Left empty, the card is sent right away.

The recipient's details show on the cart line. Dynamic checkout buttons are hidden on gift card products while the recipient form is on, because those buttons skip the cart where the recipient details are kept.

Pickup availability

The Pickup availability block shows whether the selected variant can be picked up, and where. It uses Shopify's own data, so there is nothing to set in the theme.

1. In your Shopify admin, go to Settings > Shipping and delivery.
2. Under local pickup, turn it on for each location that offers it.
3. Make sure the product is stocked at that location.

The block shows the nearest store. With more than one store, a Check other stores link opens a list of all of them. When no location offers pickup, the block shows nothing.

Complementary products

The Complementary products block shows products that go with the one on the page, under the heading Pairs well with. You choose the products in the free Search and Discovery app from Shopify:

1. Install the Search and Discovery app.
2. In the app, open Product recommendations and choose a product.
3. Add complementary products to it and save.

Products to show sets how many appear, from 1 to 4. Clear Heading to show the products without a heading. A product with no complementary products shows no block.

Ratings

The Rating block shows the average rating out of five and the number of reviews. The theme does not collect reviews: the rating comes from a product reviews app that fills Shopify's standard rating metafields, reviews.rating and reviews.rating_count. Most reviews apps do this. Check the app's settings if the rating does not appear.

Without a reviews app, or for a product with no reviews yet, the block shows nothing.

Size chart

The size chart is a regular store page that opens in a side panel.

1. In your Shopify admin, go to Online Store > Pages and click Add page.
2. Name it, for example "Size chart", and add the chart as a table in the content editor.
3. Save the page.
4. In the theme editor, add a Size chart block to the Product section.
5. In Page, choose the page you created. Change Label if you want a different link text.
6. Drag the block right below Variant picker.

Placed right after Variant picker, the link joins the size option, so it sits next to the sizes. This works for an option named Size, or the word for size in your store's language. Wide tables scroll sideways on phones, with the first column fixed.

The theme shows the page as you wrote it. It does not convert between centimeters and inches.

Tabs

Collapsible tab blocks hold information customers open when they need it.

Tabs below the product are shown together, as vertical tabs on desktop and as rows on smaller screens. A tab with no content and no page is not shown.

All presets place their tabs Below the product: Details, Shipping and delivery, and Usage. Almanac has Brewing and Ingredients instead of Usage.

Tagline from a metafield

A dynamic source fills a setting from each product's own data, so one template can show different text on every product. Use it for a tagline in the Text block or for the values of a Specification sheet.

First create a metafield:

1. In your Shopify admin, go to Settings > Metafields and metaobjects > Products and click Add definition.
2. Name it, for example "Tagline", choose Single line text and save.
3. Open a product, fill in the tagline under Metafields and save. Repeat for other products.

Then connect it:

1. In the theme editor, select the Text block with Show set to Custom text.
2. Next to Text, click the Connect dynamic source icon.
3. Choose the Tagline metafield, then click Save in the theme editor.

A product with an empty metafield shows no tagline.

Specification sheet

The Specification sheet section sits under the Product section on the product template. It shows a table of facts customers compare.

Each row is a Row block with Term, such as Weight, and Value. Connect Value to a product metafield to fill it from each product, using the steps in Tagline from a metafield. Rows with no value are hidden, so products with fewer facts do not show empty rows. A section holds up to 50 rows.

When Design style is Crisp sheets, the Roster default, each row also has Use accent font for value, for model numbers and standards.

When “Only N left” appears

The Inventory block shows real stock only. The theme never invents a number.

The block shows Only N left with a small bar when all of these are true:

• Shopify tracks inventory for the variant.
• The variant does not continue selling when out of stock.
• Its stock is at or below Low stock threshold in Theme settings > Product page. The default is 10, and you can set 1 to 20.

Above the threshold, or when the variant continues selling when out of stock, the block shows In stock, ready to ship, or In stock for products that do not need shipping. When inventory is not tracked, the block shows nothing. A sold-out variant shows no stock line: the variant picker and the button say Sold out.

Pre-orders

The theme shows a variant as a pre-order when all of these are true:

• The variant has a selling plan with a single delivery, which is how pre-order apps set it up.
• The variant continues selling when out of stock.
• Its stock is at zero or below.

The button then reads Pre-order, and the stock line shows the plan's name. Under the button, the theme shows the plan's description. If the plan has no description and charges the full price at checkout, it shows: "You’ll be charged now. We’ll ship when it’s in stock."

The theme cannot show a ship date: Shopify does not pass the plan's ship date to themes. Put the expected date in the plan's name or description. Product cards show a Pre-order badge under the same rules.

Related pages

• Theme settings for Low stock threshold and product card options
• Cart for what happens after Add to cart
• Sections for the other sections on the product template
• Honest promotions for how the theme handles stock and urgency