Customize

Product pages

Product pages use the Product information section. Open it in the theme editor by choosing Products > Default product in the page selector.

In the Duskline preset, the default product template contains these blocks, in order: Vendor (hidden), Title, Product rating, Price, Variant picker, Size guide, Inventory status, Buy buttons, Delivery estimate, Description, two Collapsible rows and Complementary products. A Product recommendations section and a Collapsible content section follow below. The Gilt and Rally presets start with a different selection. See Presets.

Section settings

The selected variant's image is shown first. Choosing a variant moves to its image.

Badge on first image

The badge is a short line of text shown over the first product image, such as "Model is 5'9" and wears size S". It shows on images only, not on videos or 3D models.

To show a different note on each product:

1. In your admin, go to Settings > Custom data > Products and add a metafield definition, for example "Model note", of type Single line text.
2. Fill the metafield on each product. Products without a value show no badge.
3. In the theme editor, select the Product information section. Next to Badge on first image, select the Connect dynamic source icon and choose your metafield.

Blocks

Variant picker and swatches

The Variant picker block shows one group of choices per product option.

Which options show as swatches

Options named in Theme settings > Product cards > Swatch option names, or options with swatches set in Shopify admin, show as color swatches. Swatches show regardless of the Style setting.

Each swatch takes its color from, in this order:

1. The swatch image or color set for that option value in Shopify. How to set up swatches in Shopify.
2. A color guessed from common color words in the value's name, such as "black", "sage" or "terracotta".
3. A neutral swatch, an outlined shape with a diagonal line, when no color can be found.

The selected value's name is shown next to the option name. Sold out values stay selectable and are marked as sold out.

Options with one value

An option with only one value is not a choice, so it is shown as text, for example "Color: Sand", instead of a button or dropdown. When the option is a swatch option, a single swatch of that color is shown under the text so shoppers still see the color.

Changing variants without reloading

When a shopper chooses an option, the price, images, buttons, SKU, inventory status, delivery estimate and pickup availability update in place, and the page address changes to the selected variant so it can be shared.

Combined listings

If you sell each color as a separate product and group them with Shopify's Combined Listings app (available on Shopify Plus), Duskline shows the grouped products as one set of options. Choosing an option that belongs to another product swaps the product page in place and updates the address, without a full page reload. Product cards also link each swatch to its own product.

Size guide

The Size guide block adds a link with a ruler icon. It opens a dialog with your size chart and, optionally, a "how to measure" image beside it. On phones, the dialog slides up from the bottom of the screen, with the chart first and the image below.

The link is hidden on your storefront when the block has no chart and no image. When the product has the option named in Show link beside option and the template has a Variant picker block, the link appears next to that option's label; otherwise it appears where the block is placed.

Three ways to add the chart

1. From a page (one chart for every product)

1. In your admin, go to Online Store > Pages and create a page, for example "Size chart". Add a table with the editor's table tool.
2. In the theme editor, select the Size guide block and choose the page in Size chart page.

2. In the block (one chart for every product)

Leave Size chart page empty and write the chart in Size chart.

3. From a product metafield (a chart per product)

1. In your admin, go to Settings > Custom data > Products and add a metafield definition, for example "Size chart", of type Rich text.
2. Fill the metafield on each product that needs its own chart.
3. In the theme editor, select the Size guide block. Make sure Size chart page is empty.
4. Next to Size chart, select the Connect dynamic source icon and choose your metafield.

Highlighting the selected size

When the chart is a table and its first column holds the size names (for example XS, S, M), the row that matches the shopper's selected size is highlighted when the dialog opens.

Inches and centimeters switch

When your chart has measurements in both units, the size guide shows an in / cm switch and displays one unit at a time. To turn it on, end the column headings with the unit in parentheses: (in) for inches and (cm) for centimeters. The chart needs at least one column of each.

• With the switch, the headings are shown without the unit ("Bust", "Hips") and only the columns of the selected unit are visible.
• Shoppers in the United States, Liberia and Myanmar see inches first. Everyone else sees centimeters first. Shoppers can change the unit at any time.
• Headings that end in (inch) or (inches) also count as inches.
• A chart with only one unit, or with no units in its headings, is shown as you wrote it, without a switch.

Size finder

With Show size finder on, the size guide shows a "Not sure of your size?" link above the chart. It opens a small form with one field per measurement. As the shopper types, the size guide suggests a size, highlights that row of the chart and offers a button to select the size on the product page.

• What the chart needs. A table with the size names in the first column and numbers or ranges, such as 89 or 85 - 89, in the measurement columns. The finder reads the first table of the chart. Columns without numbers, such as notes, are skipped.
• Which measurements are asked for. By default, the first two measurement columns. To choose, enter the column headings in Measurements to ask for, separated by commas and without the unit, for example Bust, Hips.
• How the size is chosen. The finder suggests the smallest size whose values cover every measurement the shopper entered. For a range, the highest number is the limit. When the measurements point to different sizes, the larger size is suggested with a note that it gives more room. When a measurement is above your largest size, the finder says so instead of suggesting a size.
• Units. With the inches and centimeters switch, the fields use the selected unit, and values the shopper already entered are converted when the unit changes.

The finder is not shown when the chart has no table. Turn Show size finder off to hide it for every product.

Measuring points

Measuring points are up to 4 numbered labels placed on the How to measure image, for example 1 Bust, 2 Waist, 3 Hips.

1. Add a How to measure image.
2. Under Measuring points, type a label in First label and move it into place with Horizontal position and Vertical position. Positions are measured from the image's top left corner.
3. Repeat for up to four labels. A label left empty is not shown.

When a label has the same text as a chart column heading, such as "Bust", that heading shows the same number, so shoppers can connect the photo to the chart.

Material details

The Material details block adds a link that opens a dialog with a photo and short facts such as fabric and care. The dialog shows the product title, your heading, up to four rows with a label and a value, and optional body text. On phones it slides up from the bottom of the screen, with the text first and the photo below.

The link is hidden on your storefront when the block has no row text, no body text and no image. If the size guide and the material details are set to sit beside the same option, the size guide link is shown there and the material link appears where its block is placed.

Show different details per product

Each Text setting and the Body text setting can be connected to a product metafield as a dynamic source.

1. In your admin, go to Settings > Custom data > Products and add a metafield definition for each fact, for example "Material" and "Care", of type Rich text.
2. Fill the metafields on your products.
3. In the theme editor, select the Material details block. Next to the Text setting of a row, select the Connect dynamic source icon and choose the matching metafield.
4. Repeat for the other rows.

A row whose metafield is empty on a product is hidden for that product, so you can connect rows that only some products use.

Delivery estimate

The Delivery estimate block shows an estimated delivery date range, for example "Arrives Tue, Nov 18 – Thu, Nov 20". Set the days, order cutoff time and holidays in Theme settings > Delivery estimate.

How the dates are calculated

1. The ship day is today, in your store's time zone. If it is past the Order cutoff hour, or today is not a business day, the ship day moves to the next business day.
2. The earliest date is Minimum business days business days after the ship day. The latest date is Maximum business days business days after it.
3. Business days skip Saturdays and Sundays when Skip weekends is on, and skip every date listed in Holidays.

When both numbers give the same day, a single date is shown. Dates are written in the shopper's language. The estimate is hidden for sold out or unavailable variants, and it is calculated in the shopper's browser so cached pages never show old dates.

The same settings are used by the delivery estimate in the cart. See Cart.

Pickup availability

When local pickup is set up, the Buy buttons block shows whether the selected variant can be picked up and where. Nothing shows for products without pickup locations. There is no setting to turn on: set up local pickup in your admin under Settings > Shipping and delivery > Local pickup.

Shop Pay Installments

When Shop Pay Installments is available for your store and the product's price is eligible, a message about paying in installments appears under the buy buttons. It is shown automatically by Shopify; there is no theme setting. Manage it in your admin under Settings > Payments.

Complementary products

The Complementary products block shows products that go well with the current one, in a horizontal row with arrows. Each has a quick add button.

To select complementary products, add the Search and Discovery app, open a product in the app's Product recommendations page and add complementary products. The block stays hidden for products that have none.

Gift cards

Gift card products use the same product page. With Show recipient information form for gift cards on in the Buy buttons block, shoppers can tick a box to send the gift card to someone else by email, with a recipient name, a message and a send date.

The page customers see after receiving a gift card shows the amount, the code with a copy button, a QR code, the remaining balance and expiry date when set, an Add to Apple Wallet button and a print option. It uses your theme fonts, with color scheme 1 for the page and color scheme 3 for the gift card illustration.