Guides
Product page
Set up Propel's product page, from the image gallery and product highlights to the variant picker, size guide, buy buttons and the sections below.
Propel's product page is built from the Main product section and the sections you add below it. To edit it, go to Online Store > Themes > Customize, choose Products > Default product from the page menu at the top, and select Main product.
For a full list of settings, see the Main product section reference.
Main product blocks
The product details column is made of blocks. Add, remove and reorder them in the theme editor.
| Block | What it shows |
|---|---|
| Product context | The product code (when set) and product type, with the stock status, such as In stock, Sold out or a low-stock count. Turn off Show stock to hide the status. |
| Title | The product title. Role label adds a short line under it, for example Base layer, after the section's Role label heading. |
| Badges | Sale, Low stock and other product badges. See Product badges. |
| Price | The price, the compare-at price when the product is on sale, and the tax note set by Tax label in Theme settings > Product display. |
| Text | Rich text of your own. |
| Variant picker | The product options, such as color and size. Its settings add the size guide (see below). |
| Fit note | A short fit note and the model's details. See Fit note and model details below. |
| Buy buttons | Quantity, the add to cart button and, when turned on, accelerated checkout buttons. It also shows subscription options, quantity rules and the gift card recipient form when they apply. |
| Pickup availability | Local pickup availability. See Pickup availability. |
| Share | Share icons. The networks are chosen in Theme settings > Product page sharing. |
| Trust block | A short row such as Delivery or Returns, with a Label, Text and optional Link. Up to four per product page. Hide on gift cards is on by default. |
| Editorial rich text (PDP) | Longer text from the theme editor or from a page. See Editorial rich text on product pages. |
| Collapsible content | A tab that opens and closes. See Collapsible content below. |
| Custom Liquid | Your own Liquid code. |
You can also add app blocks from apps you have installed.
Section settings
Content
| Setting | Default | What it does |
|---|---|---|
| Show accelerated checkout buttons | On | Shows buttons such as Shop Pay and Apple Pay below the add to cart button. They appear once the shopper has chosen every option and the variant is in stock. |
| Show social share icons | On | Only applies when the Share block is added. Turn off to hide sharing without removing the block. |
| Show store availability block | On | Shows local pickup availability where the Pickup availability block is placed. |
| Show breadcrumbs | On | Shows a Home, collection and product trail above the product. The collection only appears when the shopper arrived from a collection. |
| Thumbnail labels | Empty | Labels in image order, separated by commas, for example Product, On body, Detail. Empty shows numbers only. |
| Product code | Empty | A short code, for example ST-01, shown on the main image and in the Product context block when Show product codes is on in Theme settings > Product display. |
| Highlight statement | Empty | One line shown with the highlight facts on the main image. |
| Highlight facts | Empty | Up to three short facts, one per line or a list. Empty uses Shopify's product attributes. |
| Highlights button label | Highlights | The button on the main image that opens the highlight statement and facts. |
| Role label heading | Role | Shown before the Title block's Role label. |
Style
| Setting | Default | What it does |
|---|---|---|
| Sticky media on desktop | On | When the images are shorter than the product details, they stay in view while the details scroll. |
| Variant selector style | Theme default | Theme default follows Default variant selector style in Theme settings > Appearance. You can also choose Buttons or Dropdowns for the product page only. Options shown as swatches stay swatches. |
| Swatches: choose option | Auto (detect by option name) | Which product option shows as swatches. Auto detects an option named Color or Colour, and common names in other languages. Choose None (disable swatches) to turn swatches off. |
Swatches use the color or image set on each option value in Shopify. Without one, Propel uses the variant's image, or a matching color for common color names.
Connect settings to metafields
Most Content settings can be connected to a product metafield, so each product shows its own values. In the theme editor, select the Connect dynamic source icon beside a setting and choose the metafield.
Propel's default product template already connects these settings:
| Setting | Metafield | Type |
|---|---|---|
| Thumbnail labels | custom.propel_media_labels | Single line text |
| Product code | custom.propel_field_code | Single line text |
| Highlight statement | custom.propel_proof_statement | Single line text |
| Highlight facts | custom.propel_proof_facts | List of single line text |
| Role label (Title block) | custom.propel_system_label | Single line text |
| Size guide page (Variant picker block) | custom.size_guide_page | Page reference |
| Fit note and Model (Fit note block) | custom.propel_fit_note and custom.propel_model_fit | Single line text |
| Spec rows (Materials and construction tab) | custom.propel_spec_rows | Multi-line text |
To fill these in on each product, add product metafield definitions with the same namespace and key in Settings > Custom data > Products. When a product has no value, the setting behaves as if it were empty.
Which variant is selected
When the product page opens, every option is already chosen: the first variant that is in stock is selected, with its price, stock, pickup availability and Buy it now. A link that includes a variant, such as one ending in ?variant= and the variant's ID, opens with that variant selected instead.
Image gallery
The gallery shows every media type you add to the product in Shopify:
- images;
- videos;
- 3D models, with a View in your space button that shows the product in the shopper's room on supported devices.
Shoppers move through the media with the thumbnails, by swiping, or with the control bar on the main image. The control bar holds:
- the Highlights button, which opens the highlight statement and facts (only when the product has them);
- the pager, with previous and next arrows and a counter such as 01 / 05 (only when there is more than one item);
- the Zoom button, which opens the media full screen.
The thumbnails show the Thumbnail labels you set, or numbers when the setting is empty.
Product highlights
Highlights are a short statement and up to three facts about the product, shown in a panel on the main image.
- Highlight statement is one line of text.
- Highlight facts are up to three short facts. With the metafield connected, use a list of single line text and add one fact per entry.
If a product has no highlight facts, Propel uses up to three of its Shopify category attributes instead: fabric, material, neckline and sleeve length. If there is no statement and no facts, the Highlights button doesn't show.
Product cards can show the same highlights. Turn this on or off with Show product highlights in Theme settings > Appearance, and rename the card button with Product highlights label.
Size guide
The size guide opens in a side panel from a Size guide link next to the size option.
- Create a page in Online Store > Pages with your size chart. Use a table with sizes in the first column.
- In the Variant picker block, choose the page in Size guide page. To use a different guide per product, connect the setting to a page reference metafield.
| Setting | Default | What it does |
|---|---|---|
| Size guide page | Empty | The page that opens in the panel. |
| Size guide option | Detect the size option | Which product option shows the Size guide link. Choose Option 1, Option 2 or Option 3 to set it yourself. |
| Size guide options | Size, Waist, Taille, Talla, Größe, Taglia, مقاس | Used when Size guide option is Detect. Option names that carry the link, separated by commas. Matching ignores case and finds the name inside longer ones, so Size matches Shoe size. With no match, the link goes on the first option that isn't a swatch. |
How the panel uses your page:
- Tabs. If the page has two or more second-level headings (Heading 2), each heading becomes a tab.
- Chosen size. In tables with sizes in the first column, the shopper's chosen size is marked. Shoppers can pick a size in the panel and select Use size to choose it on the product.
- cm and inches. A table that names cm or inches gets a cm/in switch. It starts in inches for shoppers in the United States, Liberia and Myanmar and in cm elsewhere, and remembers the shopper's choice.
- Fit note. The Fit note block's note and model details also show at the top of the panel.
Fit note and model details
The Fit note block shows a short note about fit and, optionally, the model's height and size.
| Setting | Default | What it does |
|---|---|---|
| Label | Fit | Short label before the fit note, on the page and in the size guide panel. |
| Fit note | Empty | For example: Close fit. Take your usual size. |
| Model label | Model | Short label before the model details. |
| Model | Empty | The model's height and the size they wear, for example 186 cm, wears M. |
The Model line shows only when Show model details is on in Theme settings > Product display. It also appears in the size guide.
Collapsible content
Each Collapsible content block adds one tab. Choose where its content comes from in Content:
| Content | What it shows |
|---|---|
| Product description | The product's description from Shopify. |
| Page content | The page chosen in Page. |
| Rich text | The text in Rich text. |
| Spec rows | One row per line, written as Label: value, for example Fabric: Open-zone mesh. Empty uses Shopify's product attributes (fabric, material, neckline, sleeve length). |
A tab with empty content is hidden. Leave Heading blank to show Product details in the shopper's language. Turn on Open by default to show a tab open when the page loads.
Quick add and quick view on product cards
Product cards can let shoppers buy without opening the product page. The Main collection, Featured collection and Product recommendations sections each have a Product card action setting:
- Quick add adds a product with no options straight to the cart. For a product with options, it opens a small dialog to choose them.
- Quick view opens the product details in a dialog, with every media type, including video and 3D.
- None shows no button.
Featured collection offers Quick view and None only.
Quick add starts on the first variant in stock, just like the product page. Products that can only be bought with a subscription or pre-order plan link to the product page instead.
These settings in Theme settings > Appearance apply to every card:
| Setting | Default | What it does |
|---|---|---|
| Default variant selector style | Buttons | How options show in quick add and on product cards (Buttons or Dropdowns), and on the product page unless its own Variant selector style overrides it. |
| Product card quick actions | Buttons | Icons shows compact icon buttons on product cards instead of text buttons. The action name is still read out to screen readers. |
More sections for the product page
Add these below Main product with Add section. Propel's default product template includes all of them.
| Section | What it does |
|---|---|
| Image comparison | Two images side by side, such as the product and its material up close. On a product page it can use the product's own images. |
| Spec sheet | Measured figures with their source, and short feature points. |
| Product story | One editorial moment under the product, connected to product metafields. |
| Buy together | Products that go with this one, which shoppers can add to the cart in one step. |
| Product recommendations | A row of related or complementary product cards. |