Configuring Dynamic Sources (Metafields) in OS 3.0 Theme Editor

Dynamic sources (metafields) allow you to display real-time store data in your storefront, replacing manually entered static content. By connecting components to dynamic sources, you ensure that unique details, such as product features or collection tags, remain consistent and up-to-date across your entire store. Currently, this feature primarily supports Product and Collection resource metafields.

This guide explains how to define metafields, understand the three dynamic data fetching dimensions, and resolve common configuration issues through our FAQ.

Before You Begin

Before you can display dynamic content, you must define the custom data fields (metafields) and assign values to your products or collections.

1. From your SHOPLINE admin, go to Settings > Customize data.
   
2. Select the resource type you want to create (e.g., Products or Collections).
3. Click Add fields to create a new field.
   
4. Navigate to the specific item (e.g., a product page) and enter the required fields for that item in the Metafields section. Then, click Add to save the setting.
   

Three Dynamic Source Dimensions Explained

Three Dynamic Source Dimensions Explained

The OS 3.0 Editor provides three data fetching dimensions. Understanding their logic helps you display content accurately across different pages:

Template Resource (Current Page)

• How it works: This is a fixed data logic determined entirely by the "URL" the customer is currently visiting.
• Best for: Fixed positions on the Product detail page or Collection page.
• Effect: When a customer visits Product A, the system identifies the URL and locks onto Product A's metafields. Any block connected to "Current Product" will automatically pull data specific to that page.

Component-level Resource (Current Component)

• How it works: This is based on the settings of the "component itself" and does not depend on the page it's placed on. Whatever data is assigned at the component level is what the sub-modules will read.
• Best for: Independent sections that can be placed on any page (e.g., Homepage), such as "Featured Products."
• Effect: You must first manually bind a resource (e.g., selecting the "Summer Sale" collection) at the top level of the section. Once bound, sub-modules set to "Current Component" will accurately pull data from that specific collection.

Closest Resource

• How it works: This uses a "search upwards" logic. A block starts from its current position and looks up through the page structure to find and apply the nearest available data source.
• Best for: Product lists or search result pages.
• Effect: It solves the issue where individual cards in a list cannot identify "single product" data. Any element inside a card (e.g., title, image) set to "Closest Resource" will automatically match the specific product data assigned to that card in the loop.

Understanding and Using "Closest Resource"

The Closest resource mechanism is a breakthrough for automated layouts. It allows individual blocks within a repeating list (like a product card) to "look up" and find the specific data associated with that item.

Why Use the Closest Resource

• Automation: You no longer need to manually assign data to every individual card in a product card.
• Granular Detail: Display specific item traits (e.g., alcohol content or fabric type) directly on product cards in list or search results.

How to Configure Closest Resource

1. In the OS 3.0 Theme Editor, navigate to a page with a product list (e.g., a Collection page).
2. Select a Block within the product template (e.g., a Product description block).
   
3. Click the Add dynamic source icon next to the Content input field. 
   
4. Select Closest product under the Closest resource category. 
5. Select the specific metafield you want to display and click Save.

Use Case: Product Lists vs. Independent Components

Choosing the right source dimension depends on where your component is placed:

Scenario 1: Product List Pages

When working with product cards on a Collection page or Search results page, use the Closest resource dimension.

• Key Action: Connect the sub-modules within your product card to the Closest product.
• Expected Result: This ensures that each card in the product card automatically matches and displays its own unique attributes (such as specific metafields for that product) as the system loops through the list.

Scenario 2: Independent/Featured Sections

When you manually add sections like "Featured Product" or "Product List" to your Homepage or Custom Pages, use the Component-level Resource dimension.

• Key Action: You must first bind a data source (e.g., select a specific product or collection) at the main Section level in the sidebar.
• Expected Result: This allows you to flexibly display specific product information on any non-template page.

Frequently Asked Questions

Q 1 How do I display individual product metafields on a Product Collection page list?

You must use the "Closest Resource" dimension.

• Common Pitfall: On a Collection page, the system's default "Template Resource" pulls data for the entire "Collection." If you apply this directly to a product card, it won't be able to fetch individual product attributes (like alcohol content or fabric material).
• Correct Solution: In the editor, click a specific block inside the product card (e.g., a text box) and set the dynamic source to Closest product under the Closest resource category.
• The Logic: When the system generates a list, it assigns individual product data to each card. By selecting "Closest Resource," the block "searches upwards" to grab the specific product data mapped to that exact card, ensuring a differentiated display.