A personalized product (a name on a necklace, a photo on a dish) sells best when the page makes the choices easy to find and shows the shopper what they are getting. The Product page section has everything you need to build that kind of page in Themes 2, with no code: Nothing on this page is invented. A block with no data is hidden: no compare-at price means no badge and no struck-through price, no image means no Preview button, and a row with nothing to show (an empty description, a policy you have turned off) is not drawn.

​
Put your app’s options in a panel

1

Add a Group

In the Product page section, click Add block and choose Group. Drag it where the options should go, usually after the variant picker.
2

Give it a title

Under Title, type a heading such as Personalized and choose a Title style: Text, Filled bar or Fading bar. The bars use the section’s button colour.
3

Frame it

Under Appearance, set Inner padding (16 px works well), a Corner radius and a Background.
4

Move the options in

Drag your personalization app’s block (for example Personalizer options) into the group.
Required options are marked by the app itself. The asterisk appears when the option is set as required in the app.

​
Show the savings

In the Price block:
  • Savings badge: Save 29%, or 29% OFF as a filled badge in the button colour.
  • Sale price color: red, the button colour, or the text colour.
  • Compare-at price: before or after the price.
The percentage is worked out from the product’s compare-at price and rounded. With no compare-at price, or a compare-at price that is not higher than the price, nothing extra is shown.

​
Add a Preview button

Add the Preview button block. It opens a large view of:
  1. the preview image your personalization app made for the shopper’s current choices, if the app provides one (line item properties previewImage), otherwise
  2. the gallery image the shopper is looking at.
The button follows the shopper’s choices as they change. Choose Outline or Solid and whether it is fully rounded.

​
Style the Add to cart button

In Buy buttons → Add to cart button, choose Fully rounded, a Large height, the Cart icon, and turn off Show the total on the button for a plain “Add to Cart”. Set Buttons to Add to cart only and turn off Show dynamic checkout buttons for a single button. The button colour is the section’s button colour. To use a different colour on one template only, pick a Color scheme on the Product page section and set that scheme’s Solid button background in Theme settings.

​
Match the rest of the buy box

  • Variant picker: Pill shape → Fully rounded, Selected pill → Text colour outline and Option name → As written give round “Square / Circle” pills under a plain “Style” label.
  • Volume discount: Style → List with gift icons and a Background give a filled box of “Buy 2 · Get 10% Off” lines with the saving in the button colour.
  • Add-on: a Background fills the card instead of outlining it.
  • Trust badge: Icon colour → Button colour for coloured check marks.

​
Theme settings reach every page

A Color scheme you set in Theme settings (saved in config/settings_data.json) applies to the sections that pick it on every page, however the settings were saved: in the editor, through the Theme API, or by an agent.

​
Add collapsible rows

Add a Collapsible row for each row, and pick its Content:
  • Product description: the product’s description from your catalog.
  • Shipping policy, Refund policy, Subscription policy, Terms of service, Privacy policy: the text in Settings → Policies, kept in sync automatically.
  • Text below: your own text, for example how personalization works.
Give each row a Heading and an Icon. A row is hidden while it has nothing to show.

​
Use it for some products only

Build the page as an alternate product template (for example product.personalized), then assign that template to the products that are personalized. Every other product keeps your main product page.