Product pages

The product page is the Product information section, built from blocks, followed by any sections you add under it, such as Product recommendations.

Blocks of Product information

Open a product page in the theme editor (choose Products in the menu at the top of the editor) and click Product information. Its blocks fill the column beside the gallery, in the order you set. If the section has no blocks, the column stays empty, and the editor tells you how to fill it.

The section also accepts app blocks, such as product reviews from an app you install. Its own settings are Show vendor, Show SKU and Play product videos automatically: with the last one on, videos in the gallery play muted while they are on screen, and shoppers can turn the sound on.

The gallery takes the shape of each picture or video, so nothing is cropped. Every setting is listed under Product information in the sections reference.

Variant picker

The picker changes with the number of options the product has:

• One option (for example, Weight): one card per variant, with its price.
• Two options (for example, Flavor and Quantity): the first option becomes small cards, and the second becomes a list of offers for the value chosen in the first. When the values of the second option start with a number of units, such as “2 Pack” or “3 Bottles”, each offer also shows the price per unit and how much the pack saves.
• Three options (for example, Color, Size and Fit): one row of choices per option. Values that can’t be bought with the others chosen are crossed out.

Values that are sold out stay visible and are marked as unavailable, and the Add to cart button reads Sold out for a variant that can’t be bought. The picker also works when a shopper’s browser doesn’t run JavaScript.

Color swatches

Wholeness uses Shopify’s own swatches. When a product’s color option is connected to a category metafield that has swatches, each value shows its color or pattern. Shopify explains the setup in Adding color swatches using category metafields.

• For products with three options, swatches always show in the row of the color option.
• For products with one or two options, turn on Show color swatches in the Variant picker block.

Product cards show colors in their own way; see Product cards.

An image for each variant

In your Shopify admin, open the product, click a variant and choose its image. On the product page:

• when a shopper chooses the variant, the gallery moves to its image;
• when a shopper picks an image in the gallery that belongs to a variant, the picker moves to that variant, keeping the other options chosen when possible.

Product cards use the same images for their color dots.

Unit price

Wholeness shows Shopify’s native unit price, the price for a base measure such as “$1.20 per 100g”, wherever a variant has one: under the price on the product page, on product cards and in the cart. To add a unit price:

1. In your Shopify admin, go to Products and open the product. To set it for one variant, click the variant.
2. In the Pricing section, click Unit price.
3. Enter the product’s total measurement in Total amount and choose its unit. To show the price for another base, enter a Base measure (for example, 100 g).
4. Click Done, and then click Save.

In a list of pack offers, the price per unit is the pack’s price divided by the number of units at the start of the option value (“3 Pack” is three units). If a variant’s unit price is measured by count, per one item, the theme shows Shopify’s unit price instead.

Gift cards

To let shoppers send a gift card to someone else, turn on Show the recipient form on gift cards in the Buy buttons block. On gift card products, the shopper can then tick “I want to send this as a gift” and enter:

• the recipient’s email;
• the recipient’s name and a message of up to 200 characters, both optional;
• a date to send it, up to 90 days ahead. Left empty, the gift card is sent right away.

Shopify emails the gift card to the recipient. Gift card products with the form leave out the dynamic checkout buttons, because those buttons skip the recipient.

The gift card page your customers receive shows your logo, the balance, the code, and a QR code to scan at your shop.

Buying on phones

On screens narrower than 990 pixels, the quantity and the Add to cart button stay fixed at the bottom of the screen, so shoppers can add the product from anywhere on the page. The page leaves room for them, so they never cover the footer.

Complementary and related products

Complementary products are products that go well with this one, such as a shaker for a protein powder. You pick them for each product in your Shopify admin, in the Search & Discovery app (product recommendations). Wholeness shows them in two places:

• the Complementary products block of Product information. With Place on a computer set to Under the photo, the block fills the room under the gallery on a computer; on a phone it always sits at its place among the blocks;
• the Product recommendations section, with Recommendation type set to Complementary.

With Recommendation type set to Related, the Product recommendations section shows products that Shopify calculates for every product, with nothing to set up. When there is nothing to recommend for a product, the block or the section doesn’t show.

Product cards

Product cards are the products in collections, search results and sections such as Featured collection. Their options are in Theme settings › Product images; every setting is listed on Theme settings.

Picture

Picture in the product card decides how a picture fills the card’s square frame. Automatic fills the frame when the picture is close to a square and shows the whole picture when it is much taller or wider. You can also choose Always fill the frame or Always show the whole picture. You never need to crop your pictures to a set size.

Sizes over the picture

With Show options over the picture on, cards show the values of one option, such as sizes, weights or quantities, over the foot of the picture. Each value adds that variant to the cart. With a mouse, they show while the pointer is on the card; on phones they are always there. Values that are sold out are crossed out.

The option shown is the first one whose name appears in Options shown, in that order. Write the names as they are in your products, separated by commas, for example: Size, Weight, Quantity.

Colors under the picture

With Show colors under the picture on, cards show one dot per color, up to five and then “+” with the number of other colors. Pressing a dot shows that color’s photo, and the sizes over the picture then add that color. The option used is the first one named in Color option.

Each dot takes its color from the first of these that exists:

1. Shopify’s swatch, when the option is connected to one (see Color swatches);
2. the color written for that name in Color of each dot, one per line, as in Black: #111111;
3. the photo of the variant, shown inside the dot.

Add to cart button

Sections that show product cards have a Show the add to cart button setting. A product with options gets a list of its variants next to the button. With the cart drawer on (Theme settings › Cart › Cart type), the product is added without leaving the page.