Benefits and suitability

Benefits and suitability answers two questions on a product page: what the product does, and who it is for. The numbered path on one side lists the benefits. The profile card beside it lists who the product suits: skin types, features, finish, routine.

The section appears on every product that uses the template, so anything you type into it appears on every one of those products. The setup below keeps it true for each product.

Where the content comes from

The two lists each have their own source setting, and they are independent. Benefit source controls only the numbered benefits; Suitability source controls only the profile rows.

Content	Product data	Blocks
Benefits	The Benefit attribute from the product, or the Benefit blocks when the product has none	The Benefit blocks
A profile row	The attribute chosen in the row’s Value source, or its Fallback value. A row set to Manual shows its Value	The row’s Value, or its Fallback value
Image	The image you upload, or the product’s featured image until you upload one

Under Product data, a profile row never shows its typed Value in place of a missing attribute. That keeps “Dry · Normal · Combination” off products it was never written for. Switch Suitability source to Suitability blocks when you want the typed values on every product.

Category attributes come from Shopify. Assign a product category in your Shopify admin and Shopify adds fields such as Suitable for skin type and Skin care effect to the product. Fill those in and the section reads them without any setup. See Per-product content.

Keep the claims true

Typed text appears on every product. A profile row with “Dry · Normal · Combination” in Value tells a shopper that a gift card, a supplement, and a cleanser all suit dry skin.

• Leave Suitability source on Product data when your products have category attributes. A row then shows only on products that have its data, and hides everywhere else.
• Use Suitability blocks only when the typed values are true of every product on the template. Assign a separate product template to products that need different values.
• A Fallback value shows on every product without the data, so treat it like typed text.
• A newly added section arrives with four example rows — Skin types, Features, Finish, and Routine — whose fallback values keep the card filled while you set it up. Products with category data show their own values instead. Replace the fallbacks with wording true of your range, or clear them so rows hide on products without data.
• The same applies to Benefit blocks. They are used on every product that has no benefit data, so write benefits your whole range can claim, or fill in Skin care effect on each product.

The section hides itself from shoppers when it has nothing to show, so an empty profile card or benefit list never renders.

Arrange the image

All image settings sit under Media, and appear only while Show media is on.

Setting	Options	What it does
Image source	Uploaded image, Product image	Uploaded image uses the same picture on every product, and shows the product’s image until you upload one
Mobile image	Optional upload	With Uploaded image, replaces it on phones, with its own focal point. Phones download only this file
Image position	Right (default), Left	Places the image on either side from 750px wide
Image position on mobile	Above the benefits (default), Below the content, Hidden	Where the image goes on phones. See below
Image shape	Arch, Capsule, Oval, Rectangle	Rectangle uses the corner style from theme settings
Image height	Match content, Portrait (4:5), Square (1:1)	See below
Image height on mobile	Same as desktop, Portrait (4:5), Square (1:1) (default), Landscape (4:3)	The image’s shape on phones. Anything but a portrait frame shows as a rectangle
Image fit	Cover, Contain	Contain shows the whole image with space around it

Match content starts as a 4:5 portrait and grows taller to match the benefits and profile beside it on screens 990px and wider. Choose Portrait or Square to keep a fixed shape whatever the text length. Phones use Image height on mobile instead, which defaults to a square so the benefits start sooner. Same as desktop gives the 4:5 portrait for Match content and Portrait, or a square for Square (1:1). Arch, capsule, and oval are drawn for a tall frame, so a square or landscape image on a phone uses the rectangle shape instead.

Portrait and Square sit vertically centered on the text beside them, measured from the first line of the body text down to the note. The eyebrow and heading stay above as the title. When the image is the taller of the two, the text keeps its spacing and centers on the image instead.

Cover crops the image to fill the shape. Set a focal point on the image in Shopify admin and the crop keeps the subject in view. The theme requests a large enough file for the crop, so a square or landscape photo in a tall frame stays sharp.

An uploaded image is treated as decoration. Give it alt text in Shopify admin only if it shows something a shopper needs to know about. A product image falls back to the product title.

On a phone

The section stacks in a single column: heading, image, benefits, profile, then the note. Image position on mobile moves the image: Below the content brings the benefits straight under the heading and closes the section with the image, after the note, and Hidden leaves it out on phones. A hidden image is not downloaded. Larger screens are unchanged. Mobile header alignment under Content sets the eyebrow, heading, and body text to Left or Center on screens below 750px. The benefits and profile card keep their own layout.

When something looks wrong

1. A message in the theme editor says rows are hidden. It names the rows a shopper cannot see on the product you are previewing. Under Product data, the product lacks that row’s attribute; under Suitability blocks, the row has no Value. The message only appears in the editor.
2. Benefit source is set to Benefit blocks, but profile rows still read product data. The two lists are set separately. Set Suitability source to Suitability blocks as well.
3. Hiding a Benefit block changes nothing. Benefit source is Product data and this product has benefit data, so the blocks are not used. The theme editor says so under the list.
4. A profile row is missing. See the editor message above the list for which rows and why.
5. A row shows fewer values than the product has. Values shown caps a row so it stays on one line beside its icon. Raise it on the block.
6. Image source is Uploaded image, but the product’s photo shows. No image has been selected yet, so the section shows the product’s image rather than an empty frame. The theme editor says so over the image. Select an Image under Media to replace it.
7. The image looks stretched tall. Image height is Match content and the text beside it is long. Choose Portrait (4:5) instead.
8. The whole section is missing. It has no benefits and no profile rows for this product.

Custom product metafields

The source controls also offer Custom product metafield. Enter the full identifier in Metafield namespace and key, such as custom.routine_step, as plain text. See Custom product metafield setup for the creation steps, the control to use in this section, supported types, and fallback behavior. An incomplete identifier displays a message in the theme editor.