Core concepts

Four ideas explain everything Storesynk does. Knowing them turns most blank-page bugs into a one-line fix.

Logic is a tag

Behaviour lives in the element, not in attributes or JavaScript you write. Attributes only carry context (a handle, a collection, a label).

• storesynk-*: roots and providers such as storesynk-store, storesynk-product, storesynk-list, storesynk-cart.
• show-*: displayers that render one value, such as show-title, show-price, show-cart-count.
• change-*: controls the shopper uses, such as change-option, change-quantity, change-country.
• Verb-first actions: add-to-cart, buy-now, open-cart, remove-cart-line.

A price is always a displayer. Never write a price as a string; the engine formats it in the shop’s money format and market currency.

Context flows down

Components read data from the nearest provider above them: <storesynk-store> provides the store and cart, <storesynk-product> one product and its selection, <cart-line> one cart line. Any number of wrapper elements may sit in between.

A component outside its provider renders nothing, silently. No error, just blank. When something is empty, check the ancestor chain first. In framework projects the provider often lives in a layout file; the rendered DOM is what counts.

Lists clone a template

storesynk-list, product-list, cart-line-list, and the other list containers take their first element child as a template, remove it, and clone it once per item.

<storesynk-list collection="new-arrivals">
  <storesynk-product>
    <show-image><img alt=""></show-image>
    <show-title></show-title>
    <show-price></show-price>
    <product-link><a>View product</a></product-link>
  </storesynk-product>
</storesynk-list>

The template product has no handle; the list feeds each clone. A container with no template renders nothing. The full list is in template-clone containers.

State is an ss-* attribute

The engine reflects runtime state as attributes it sets and removes. They are CSS hooks you style but never author.

Attribute	Set on	Meaning
ss-loading	lists, action buttons, cart lines	a fetch or cart write is in flight
ss-empty	displayers, lists, cart, widgets	nothing to show
ss-out-of-stock	add-to-cart, buy-now, product cards	selected variant is sold out
ss-unavailable	add-to-cart, buy-now, option values	no variant matches the selection
ss-open	storesynk-cart, predictive-search	drawer or dropdown is open
ss-active	option values, thumbnails, filter values	the selected one
ss-selected	mix & match and add-on cards	in the shopper’s selection
ss-logged-in	storesynk-store	a customer session is active

add-to-cart[ss-out-of-stock] button { background: #999; cursor: not-allowed; }
add-to-cart[ss-loading] button { opacity: .4; cursor: wait; }
storesynk-cart[ss-empty] .cart-empty-message { display: block; }
option-value[ss-active] { background: #1a1a1a; color: #fff; }

The complete catalog is in engine-managed attributes.

Styling

Everything renders into the light DOM, so plain CSS, your design system, and Tailwind classes apply directly. Two rules:

• Custom elements always need a closing tag: <show-title></show-title>, never <show-title/>.
• Custom elements default to display: inline. Give layout containers a display of their own, or a grid collapses to nothing.

Next: Go live