Appearance
Set up a product page in Guild
Documentation scope: Guild 0.1.x pre-release builds. The exact public release version will be confirmed in the changelog before Theme Store publication.
Use this guide to turn the default Product template into a working product page. Start with real product data, then arrange Guild's Product blocks. For detailed appearance settings, see Templates and the Sections catalog.
1. Prepare one real product in Shopify
- In Shopify Admin, open Products and choose a representative product.
- Add a title, description, images, prices, available variants, and appropriate inventory data. Publish the product to the Online Store.
- If the product needs material, care, or delivery information that varies by product, prepare metafields and dynamic sources before editing the display.
- Keep another test product with different variants or missing optional data available for comparison.
A Theme Editor placeholder is only a design preview; it does not supply missing product data on the storefront.
2. Open the Product template
- Go to Online Store > Themes and open the Guild theme editor. Work in an unpublished copy when making substantial changes.
- Choose Products > Default product from the page selector (or select the product template that you intend to edit).
- Change the preview resource to your prepared product. The selected product changes what you see while editing; it does not assign a template to all products.
- Open the main Product section. The default template contains a nested Product composition; you can also use Product spotlight as a separate section with a selected product on other page types.
For creating and assigning additional product templates, use Shopify's template instructions.
3. Find the blocks that own each part
| What you want to change | Where to start |
|---|---|
| Main images and thumbnails | Product gallery |
| Product title, price, description | The matching Product title, Product price, and Product description blocks |
| Color/size selection | Product variants |
| Quantity and Add to cart | Purchase controls / product-form composition |
| Stock message | Product inventory (not the quantity input) |
| Materials, specifications, care details | Product metafields, Product-specific accordion/tabs, or a compatible dynamic source |
| Delivery copy by variant | Product shipping with Show advanced options > Update by variant |
| Matching products | Product list with Related products or Complementary products source |
Product Row, Column, Box, Accordion, Tabs, and Product visibility group blocks are layout and conditional wrappers. Expand their nested children in the editor to reach the block that actually renders the content. Product-specific wrappers preserve the current product context. Do not assume that a generic block supports the same Product-specific children.
For detailed nested-block behavior, use the Product spotlight reference. A screenshot of the nested block tree can be added after final live editor verification; the steps above do not depend on a screenshot.
4. Add product-specific content without duplicating templates
For data that differs between products, prefer Shopify product metafields over writing a separate copy into each product template. Set values in Shopify Admin, then connect a compatible setting via Connect dynamic source, or use Guild's dedicated Product metafield blocks where appropriate.
To display care instructions only for products with the relevant data, use a Product-specific Accordion item - product, Tab - product, or Product visibility group and choose Show content when > Product metafield has a value with the correct namespace/key. For the complete setup, see Use metafields and dynamic sources.
5. Test purchase states before publishing
- Check a single-variant product and one with multiple option values, including unavailable variants.
- Change variants and confirm media, price, available options, Product shipping, and inventory behave as expected.
- Test Add to cart, quantity rules, sold-out behavior, and relevant accelerated payment buttons in a real storefront preview.
- Check narrow mobile layouts, long titles, rich descriptions, focus order, and keyboard controls.
- If using Quick view, test both the dialog and the intentional full-product-page fallback.
- If using Shopify XR, provide a 3D model and test on a supported device; an editor preview is not proof of device support.
If the page is empty or behaves differently
Start with Why content is missing for Shopify data, template context, and visibility checks. For variant-specific delivery or purchase errors, use Troubleshooting or Contact support. You can contact support without completing every diagnostic step.
Next: Set up metafields and dynamic sources, then Collection and search filters.