This component is for providing data and will appear blank when first placed on a layout. You will need to detach it using the right click context menu in the structure panel and then add components into the success slot.
Description:
PDP scaffolding is a data zone component used on the Product Details page (PDP), that gives structure to any other components you place inside of it. It allows you to control the states of all the child components from one place at the same time—instead of having to edit states per child component. The PDP Scaffolding data zone has simulation states available for a product handle and the loading state for the entire component (note: the loading state will take precedence over the child component’s loading states when they are used inside the scaffolding component).
Shopify Prerequisites
- TBD
Shipcode Configuration
ADDING THE COMPONENT TO A LAYOUT
- To add the PDP Scaffolding component to a layout, navigate to the components panel, select the Libraries tab in the header, then find the component in the Shopify Template Library accordion.
- Drag and drop it onto your desired layout
- Navigate to the structure panel and right click on the layer to open the context menu, then select Detach Instance
- Detaching the component from the Shopify Template Library allows you to add new components inside of it
- When you add new product components inside the PDP Scaffolding component, you will want to add them inside of the Success Slot in the structure panel
CONFIGURATION OPTIONS
When you have other product components like Image Gallery, Title, Price, Product Variants Selector, and/or Add to Cart Button inside the success slot, you can use the scaffolding component toggles (available when selecting the parent layer and navigation to the interactions panel) to simulate different states on the canvas so you can visually see that state on the canvas while you make style changes without having to toggle on the state per child component.