Watch data and merchant configuration

A complete architectural guide to structuring watch specifications, product story blocks, native storefront filters, and merchant settings in Valmont.

Unified specification architecture

The Product Detail Page (PDP), product cards, quick view, comparison drawer, and Wrist Atelier all share a unified specification resolver: they inspect the direct watch.<field> product metafield first. If that field is blank or unconfigured, they gracefully fall back to the corresponding field in the linked watch.profile metaobject. Using profiles is optional.

Uploading the theme ZIP does not create custom data definitions on a new Shopify store. If you manage specifications directly on products via Settings → Custom data → Products, configure the following definitions:

Dimensions automatically format with the localized watch.mm translation string. Keep text fields accurate and translate non-default languages via Shopify's content translation workflow. Unpopulated attributes remain hidden rather than showing empty cells or zeros.

Product page and editorial story blocks

• Policy summary block: Add via product template blocks to render verified shipping, warranty, and return policies. Supports dynamic sources; empty blocks remain hidden.
• watch.short_description: Standalone multi-line summary. When absent, the first 35 words of the standard product description are used as an excerpt, while preserving the full text under About this watch.
• Product stories section: Reorder fit, detail, and movement blocks independently in the theme editor. Sections without content render no empty containers.
• watch.wrist_image: Dedicated wrist photography file reference. When case_diameter or lug_to_lug exists, the contextual size guide is displayed.
• watch.detail_image & watch.detail_story: High-resolution macro imagery paired with rich-text craftsmanship copy. Both must be populated to render.
• watch.movement_story & watch.movement_image: Calibre technical narrative with optional movement photography.
• watch.detail_hotspots: Optional JSON array of interactive focal points on the detail visual. Accepts up to four objects containing title, body, x, and y (coordinates expressed as percentages from 0 to 100).

Native storefront filtering

Valmont strictly consumes Shopify's native collection.filters schema (list, boolean, and price range filters). No third-party filter app scripts are injected into your storefront.

To enable watch filtering, open the Filters section in the Shopify Search & Discovery app (or Shopify's native filter settings) and activate the product metafields: movement_type, case_diameter, dial_colour, case_material, strap, water_resistance, complications, and style.

Sorting and filtering state are managed within the same native GET request. Active tags generate native url_to_remove links, and clearing individual filters preserves active sort criteria.

Pickup availability, pricing and payments

Adding the Pickup availability block into the product template queries native Shopify store pickup locations and live inventory for the selected variant. Configure pickup under Shopify Settings → Shipping and delivery first. The theme displays real-time availability and provides a retry mechanism upon connection errors.

Regular, compare-at, and unit prices dynamically follow variant selections. The sticky bottom purchase bar reflects the active variant's payable price, and unavailable combinations gracefully disable accelerated checkout.

Homepage and interactive sections

• Wrist Atelier: Side-by-side and overlaid watch comparison against a known reference diameter. Configure reference diameters, calibrated cutout imagery, and optional measured wrist photos in the Wrist Atelier guide.
• Campaign invitation: Fully configurable announcement modal with custom campaign identifier, delay trigger, and page scroll progress threshold. Supports a manual mode for editor inspection.
• Hero showcase: High-performance layered presentation. Ensure your primary timepiece photography uses clean transparent alpha channels and color-calibrated studio lighting.

Developer CSS and build maintenance

The layout loads two generated style bundles per page while source CSS files remain organized and modular. After making changes to source CSS files in development:

# Regenerate optimized production style bundles
npm run build:styles

# Validate theme integrity and bundle freshness
npm run check

Theme ZIP installations in Shopify require no build tools. Merchant font and color settings declared in the Shopify Theme Editor take precedence.

Illustrative concept data

If you are testing store layout with sample or fictional timepieces, set the profile reference to start with DEMO-. Valmont will automatically append an explicit localized concept notice to product cards, specification matrices, quick view, and Wrist Atelier. Replace these with manufacturer-verified facts before opening commercial sales.

Tools included with the theme

Valmont builds its discovery, purchase, cart and clienteling tools into the theme with Shopify's native forms, customer tags, metafields and inventory, so there are fewer apps to install and maintain. See What's included for every tool and where it appears.

Technical developer references

• Shopify Product Merchandising & Variants ↗
• Shopify Storefront Filtering Architecture ↗
• Shopify Theme Editor Section & Block Integration ↗