Skip to content

Template-clone containers

These tags capture a child as a template, remove it from the DOM, and clone it per item.

These tags capture a child as a template, remove it from the DOM, and clone it per item. The template must exist before runtime or the container renders nothing (rule SSK-107).

ContainerWhat it captures as templateCloned perNotes
storesynk-listits first element child (must be, or contain, a storesynk-product)collection productclone fed via provideProduct(); sets [ss-loading]/[ss-empty]
search-result-listits first element child (must be, or contain, a storesynk-product)search resultsame engine as storesynk-list; [ss-loading]/[ss-empty]
predictive-searchfirst search-result-item, else first storesynk-product (also needs an <input>)suggestionthe template’s parent element becomes the results dropdown; [ss-open]/[ss-loading]
cart-line-listits first cart-line childcart lineclone fed via provideLine()
cart-discount-list / cart-order-discount-listits first cart-discount childdiscount chip / order discountclone fed via provideDiscount()
cart-lineper-line context owner (cloned by cart-line-list, not itself a clone-container)-holds the show-line-* displayers + line controls
show-thumbnailself-cloning: the index-less instance is the template; clones itself, one per media, assigning indexmedia itemhidden entirely when ≤1 media
change-option (swatch/radio modes)first option-value (or first <option> / radio wrapper)option valueclones the per-value template; select mode clones first <option>
change-selling-planits first selling-plan-option childone per real selling plan (frequency)marks the active one [ss-active] + aria-pressed; sets [ss-empty] when there are no plans or in one-time mode
change-line-selling-planits first selling-plan-option childone per plan on the cart line’s merchandise (frequency)the cart counterpart; same template, leaves and [ss-active]/aria-pressed treatment; [ss-empty] when the line has no plans or the line is one-time
product-listits first element child (must be, or contain, a storesynk-product)listed productclone fed via provideProduct(); appends only the new tail on load-more; [ss-loading]/[ss-empty]
filter-listits first filter-group (whose inner filter-value is the per-value template)facet group → facet valuezero-config: renders every LIST facet Shopify returns; [ss-empty]
change-filterits first filter-value childone facet valuecustom single-facet UX; paints show-filter-swatch; [ss-empty] when the facet is absent
active-filter-listits first element child (the chip template, e.g. active-filter-item)applied filterremovable chips; [ss-empty] when none applied
storesynk-bundleits first element child (must be, or contain, a bundle-offer)live bundlebundles module; clone’s offer fed via provideBundle(); [ss-loading]/[ss-empty]
bundle-member-listits first element child (must be, or contain, a storesynk-product member card)bundle membercard fed via provideProduct() (variants filtered to the member’s allowed set - its change-options offer only those combos; one allowed ⇒ no selector) + a per-clone bundleMemberContext; selection updates refresh cards in place (no re-clone)
storesynk-volume-discountits first element child (must contain a volume-tier-list)live volume discountvolume-discount module; cloned once for the winning discount; provides volumeDiscountContext; [ss-loading]/[ss-empty]
volume-tier-listits first element child (must be, or contain, a volume-tier)tier rowARIA radiogroup; clone fed a per-row volumeTierContext; selection/price updates refresh rows in place (no re-clone)
storesynk-customer-pricingits first element child (free-form template - show-pricing-* displayers, a <log-in>, or hardcoded copy; never the regular show-price/show-compare-price/show-unit-price - those stay siblings of the widget, SSK-111)the one live rulecustomer-pricing widget; cloned once for the winning rule when in a renderable state (prompt/member); provides customerPricingContext; [ss-member] in member mode; [ss-loading]/[ss-empty]
storesynk-mix-matchits first element child (must be, or contain, a mix-match-offer)live mix-match bundlemix-match module; the clone’s offer fed via provideLive(); [ss-loading]/[ss-empty]
mix-match-section-listits first element child (must be, or contain, a mix-match-section)sectionper-clone section context; owns the accordion state; selection updates refresh clones in place (no re-clone)
mix-match-item-listits first element child (must be, or contain, a storesynk-product pool card)pool productcard fed via provideProduct() (bundle member-card machinery, truncation included) + a per-card item context; ss-selected while picked; selection updates refresh cards in place
mix-match-selection-listits first element child (the pick template; show-selection-overflow may follow it)picked item (capped by max)per-clone pick context; [ss-empty] while nothing is picked
storesynk-addonsits first element child (the per-offer template, free-form - typically show-addons-title + an addon-list; only its presence is required)the ONE live add-ons offer (cloned once for the overlap-rule winner)product-addons module; provides addonsContext; [ss-loading]/[ss-empty]
addon-listits first element child (must be, or contain, a storesynk-product row card)add-on rowcard fed via provideProduct() (bundle member-card machinery - variant restriction + truncation included) + a per-clone row context; ss-selected while ticked; selection updates refresh cards in place (no re-clone)

Not a clone container: change-purchase-option - and its cart counterpart change-line-purchase-option - toggles [ss-active] on its author-provided purchase-option children (expects two: value="single" and value="recurring") - it captures no template, so SSK-107 does not apply to either. show-metafield clones a metafield-item template only for list.* metafield types, so it too has no SSK-107 obligation (a scalar metafield renders with no template).

Conditional clone container: change-country / change-language clone a first-child locale-value only in template (pill) mode - but their default is native-<select> mode (an author <select> is adopted, or one is auto-created), which needs no template. So the pickers carry no SSK-107 obligation: a picker with neither a <select> nor a locale-value just auto-creates the <select>. (A picker that has a locale-value but whose leaves are outside it still trips SSK-108 for the stray leaf.)



Imported from the Storesynk skill v0.1.0 (references/component-reference.md). To change this page, change it there.