Widgets customization

Light customization

To perform light customizations via JavaScript, you can setup event listeners and modify swatches logic when widgets are fully loaded.

Product page

On product page the app dispatches pl-swatches-loaded event product swatches are loaded. It's triggered once.

document.addEventListener('pl-swatches-loaded', () => {
  console.log('Product swatches are loaded');
})

Collection page

On collection page the app dispatches pl-collection-swatches-loaded event when collection swatches are loaded. It can trigger multiple times, as when new product card are loaded the app will load swatches for them (eg after applying collection filters or after pagination).

document.addEventListener('pl-collection-swatches-loaded', () => {
  console.log('Collection swatches are loaded');
})

Advanced customization

For more advanced customization you might access app metafields and implement your custom swatches widget.