This guide covers the product page template: layout settings, the blocks you can add inside the main product section, variants and swatches, gift card products, and the supporting sections that ship below the main product (trust badges, complementary products, recommendations, recently viewed).
What ships on the product page
The default product page contains five sections in this order:
| # | Section | Purpose |
|---|---|---|
| 1 | Main product (Product) | The main product container: gallery, title, price, variants, quantity, buy buttons, description, and accordions. All driven by blocks |
| 2 | Trust badges | A row of configurable trust signals below the main product |
| 3 | Complementary products | Products that pair well with this one. Driven by Shopify's recommendations API with intent set to complementary |
| 4 | Product recommendations | Related products. Driven by Shopify's recommendations API with intent set to related |
| 5 | Recently viewed | Up to the 20 most recent products the customer viewed in this browser. Stored locally on the customer's device |
You can reorder, remove, or add sections from the theme editor. Detailed coverage of trust badges, complementary, recommendations, and recently viewed is in sections-product-display.md and sections-promotional.md.
Main product settings
Open the product template in the theme editor and click the Product section to see these settings.
Layout
| Setting | Default | What it controls |
|---|---|---|
| Color scheme | Scheme 1 | Color scheme for the section |
| Use full width | On | When on, the gallery extends to the page edge. When off, the gallery is constrained to the page width |
| Use sticky info | On | When on, the product information column stays in view while the gallery scrolls on desktop |
| Mobile media position | Top | Whether the gallery shows above or below the product info on mobile |
| Padding top | 0 to 100 px | Space above the section |
| Padding bottom | 0 to 100 px | Space below the section |
Gallery
| Setting | Default | Options |
|---|---|---|
| Gallery layout | Grid 2 column | Stacked, Thumbnails below, Thumbnails on side, Grid 2 column |
| Image ratio | Natural | Natural, Square, Portrait, Landscape |
| Enable zoom | On | Customers click an image to zoom in place |
| Enable lightbox | On | Customers click an image to open a full-screen viewer |
The four gallery layouts are described in detail in sections-product-display.md. Pick the layout that matches your product photography style.
Captions for product video
| Setting | Notes |
|---|---|
| Caption file URL | URL to a WebVTT (.vtt) file. Captions are shown on product videos for accessibility |
| Caption language | A two-letter language code (en, de, es, fr, nl) that matches the captions file |
To use captions:
- Create a WebVTT (.vtt) file with your captions. Many video editors and online tools can produce these.
- Upload the file to the Files area in your Shopify admin (Content, Files).
- Copy the file URL.
- Paste it into the caption file URL setting and set the caption language.
The captions apply to videos in the product gallery.
Inventory display
| Setting | Default | What it controls |
|---|---|---|
| Inventory threshold | 10 | When inventory drops below this number, a low-stock indicator appears. Set to 0 to disable |
| Show inventory count | On | When on, the indicator shows the actual count ("Only 3 left"). When off, only "Low stock" is shown |
This is real Shopify inventory data, not a fake urgency device. The indicator only renders when the inventory is genuinely low and the product has inventory tracking enabled.
Tax and shipping notice
| Setting | Default | What it controls |
|---|---|---|
| Show tax and shipping note | On | Displays a small note near the price: "Tax included. Shipping calculated at checkout" or similar, depending on your store's tax setup |
This setting respects Shopify's cart.taxes_included flag, so the note only shows the tax-included language when your store actually uses tax-inclusive pricing.
Payment icons
| Setting | Default | What it controls |
|---|---|---|
| Show payment icons | On | Displays the icons of accepted payment methods (Visa, Mastercard, and similar) near the buy buttons |
Payment icons come from Shopify's enabled_payment_types and use Shopify's icon assets in full color.
Mobile sticky add to cart
| Setting | Default | What it controls |
|---|---|---|
| Use sticky add to cart on mobile | On | Adds a small bar at the bottom of the screen on mobile that stays visible as the customer scrolls. Shows the product title, price, and an Add to cart button |
This setting only affects mobile.
Blocks inside the main product section
The main product section is built from blocks. You add, remove, and reorder blocks the same way you do with sections.
| Block type | Limit | Purpose |
|---|---|---|
| Title | 1 | Product title |
| Price | 1 | Current price, compare-at price (when on sale), and unit price (where applicable) |
| Vendor | 1 | Product vendor name. Off by default |
| SKU | 1 | Product SKU |
| Inventory | 1 | Low-stock indicator. Uses the inventory threshold setting |
| Variant selector | 1 | Variant options (color, size, and so on). Renders swatches for color options when configured |
| Quantity | 1 | Quantity selector |
| Buy buttons | 1 | Add to cart, plus accelerated checkout buttons (Shop Pay, PayPal, Google Pay, Apple Pay) when enabled |
| Follow on Shop | 1 | The Shopify-branded Follow on Shop button. Customers who click follow your store in the Shop app |
| Selling plans | 1 | Subscription plan picker. Only renders when the product has subscription selling plans configured |
| Gift card recipient | 1 | Form that appears when the product is a gift card. Lets the buyer send the gift card to someone else by email |
| Pickup availability | 1 | Local pickup status for the selected variant. Set up local pickup in Shopify admin under Settings, Shipping and delivery |
| Share | 1 | Social share buttons |
| Rating | 1 | Placeholder for a product reviews app (most rating apps render their own widget here) |
| Description | 1 | Product description, in an optional collapsible block |
| Accordion | Multiple | A collapsible content block. Use for size guides, care instructions, FAQs, or any structured content. Add as many as needed |
| Shipping accordion | 1 | A dedicated shipping accordion. Use this for store-wide shipping policy text |
| Materials accordion | 1 | A dedicated materials accordion. Use this for store-wide materials and care text |
| Custom Liquid | Multiple | A code field for custom HTML or app-provided code snippets where appropriate |
| App block | Unlimited | An app insertion point. Apps you have installed can render their content here |
Blocks marked with limit 1 can only appear once. Accordion (general), Custom Liquid, and App block can be added as many times as needed.
Recommended block order
The default preset orders blocks like this. You can change this from the theme editor.
- Title
- Price
- Vendor (off by default in display)
- SKU
- Inventory
- Variant selector
- Quantity
- Buy buttons
- Follow on Shop
- Selling plans
- Gift card recipient
- Pickup availability
- Description
- Shipping accordion
- Materials accordion
- Share
- Rating
Variants and swatches
Setting up variants
Variants are configured in the Shopify admin, not in the theme. To add variants:
- In the Shopify admin, open the product.
- In the Variants section, click Add options like size or color.
- Add the option name (for example, "Color") and values (for example, "Red, Blue, Green").
- Save.
Fitcore renders the variant selector automatically. Color options use swatches; other options use buttons.
Color swatches
When a variant option is named Color (or a localized equivalent recognized by Shopify), Fitcore renders the values as visual swatches.
Swatches can show:
- Variant images (recommended for visual products). When configured, each swatch shows the product image associated with that color variant.
- Shopify-managed swatch images. Set up in Shopify admin, Products, Editor settings, Color.
- Shopify-managed swatch colors. Hex color values configured in the same place.
- Neutral placeholder. Used when none of the above are configured.
Showing variant images as swatches
To make swatches show the actual product image for each color, set up a custom metafield on each variant.
- In the Shopify admin, go to Settings, Custom data.
- Click Variants.
- Click Add definition.
- Configure:
- Name: Variant images
- Namespace and key: custom.variant_images
- Type: File (List of files), restricted to images
- Save the metafield definition.
- Open a product, then open a variant.
- In the metafields section at the bottom of the variant page, upload the images for that variant.
- Repeat for every variant where you want a custom swatch image.
Once at least one variant has the custom.variant_images metafield populated, Fitcore uses those images as swatches across the entire product. If a variant has no metafield set, the swatch falls back to the Shopify-managed swatch image or color.
Variant images on the gallery
When a customer selects a color variant, the product gallery updates to show the images associated with that variant. This uses Shopify's built-in variant image association: in the Shopify admin, you assign images to specific variants on the product page.
The gallery uses the first image associated with the selected variant as the primary image, then shows the other product images.
Gift card products
Gift cards are a special product type in Shopify. When the product is configured as a gift card (in the Shopify admin), Fitcore enables the gift card recipient form on the product page.
To configure a gift card product:
- In the Shopify admin, go to Products, Add product.
- In the right sidebar, change the product type to Gift card.
- Set the price options (multiple denominations are supported).
- Save.
When the product is configured as a gift card (in the Shopify admin), the Gift card recipient block renders the recipient form on the product page. The block must be present in the product template. By default, the block ships in product.json and renders only when the product is a gift card; on regular products the block stays hidden.
The gift card recipient form lets the buyer:
- Toggle "Send as a gift" on or off
- Enter a recipient email address (required when sending as a gift)
- Enter a recipient name (optional)
- Enter a personal message (up to 200 characters)
- Pick a future send date (optional)
When the buyer completes the form and checks out, Shopify handles recipient delivery after checkout based on your gift card configuration in the Shopify admin.
The gift card itself is rendered through the gift card template, covered in template-gift-card.md.
Pickup availability
If you offer local pickup at one or more locations, the product page can show pickup status for each location.
To enable pickup:
- In the Shopify admin, go to Settings, Shipping and delivery.
- Set up local pickup for each location that offers it.
- The pickup availability block renders automatically on the product page when pickup is configured.
You can control how the block displays through the global theme setting Pickup visibility in Theme settings, Product page:
| Option | Behavior |
|---|---|
| Auto | The block renders when at least one location offers pickup for the selected variant. Hides when no pickup is available |
| Always | The block always renders, including a "Not available for pickup" message when applicable |
| Hidden | The block never renders, regardless of admin configuration |
Use Auto for most stores. Use Always if you want customers to know which locations carry your products. Use Hidden if you do not offer pickup at all.
Subscriptions and selling plans
If you offer subscription products through a Shopify subscription app, the Selling plans block renders the subscription picker on the product page. Customers can choose between one-time purchase and the subscription frequency you have configured.
Subscriptions require a separate Shopify subscription app (not included in Fitcore). Once the app is installed and selling plans are configured, Fitcore renders the picker automatically.
The selected selling plan is included in cart and order data, and the cart page displays the plan name on each line item.
Shop Pay Installments
If your store has Shop Pay Installments enabled, the buy buttons block automatically renders an installments banner showing customers their financing options for the current price. This uses Shopify's built-in payment_terms Liquid filter and respects all eligibility rules set by Shop Pay.
Installments display only on eligible products and prices. There are no theme settings for this; Shopify controls visibility.
Mobile considerations
Mobile sticky add to cart bar
The mobile sticky add to cart bar appears at the bottom of the screen as customers scroll past the main buy button. It shows the product title, current price, and an Add to cart button that adds the currently selected variant.
Disable this from the section settings if you find it conflicts with your design.
Mobile media position
By default, the gallery appears above the product info on mobile (Top). For text-heavy products where the merchandising story matters more than the visuals, switch this to Bottom so the title and copy lead.
Multi-language and multi-currency
- Product titles, descriptions, and option names are translated through Shopify's translation system. Set up translations in Settings, Languages or with a translation app.
- Variant option values (such as color names) are also translated through Shopify.
- Prices update automatically based on the customer's selected market and currency.
See markets-localization.md for the full localization workflow.
What to do next
| If you want to | Read |
|---|---|
| Set up your collection pages | template-collection.md |
| Configure the cart drawer | template-cart.md |
| Configure trust badges, complementary, and recommendations | sections-product-display.md and sections-promotional.md |
| Set up the gift card delivery template | template-gift-card.md |
End of template-product.md.