Shapes

https://help.switchthemes.co/shapes
Admin
Shapes is a customizable Shopify theme featuring unique design elements like shapes, patterns, and...
Tokens:76,503
Snippets:909
Trust Score:8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Example Shape Definition Structure (JSON)

Source: https://help.switchthemes.co/shapes/advanced/custom-shapes

This is an example of the key/value data structure used within the `settings_schema.json` file to define shape options. Each object represents a selectable shape with its internal value, display label, and optional grouping.

```json
{
  "value": "shape_name",
  "label": "Shape name",
  "group": "Group name"
}
```

--------------------------------

### Open and Close Cart Drawer

Source: https://help.switchthemes.co/shapes/developer/theme-events/control-events

Provides examples for dispatching 'theme:open:cart-drawer' and 'theme:close:cart-drawer' events to control the visibility of the cart drawer. These events are dispatched to the document.

```JavaScript
document.dispatchEvent(
  new CustomEvent('theme:open:cart-drawer')
);

document.dispatchEvent(
  new CustomEvent('theme:close:cart-drawer')
);
```

--------------------------------

### Handle Cart Drawer State Changes

Source: https://help.switchthemes.co/shapes/developer/theme-events/theme-events

This set of examples shows how to listen for events related to the cart drawer's lifecycle: 'theme:cart-drawer:opening', 'theme:cart-drawer:open', 'theme:cart-drawer:closing', and 'theme:cart-drawer:closed'. Each event provides the cart drawer's root element in its detail.

```javascript
document.addEventListener(
  'theme:cart-drawer:opening',
  (e) => {
    const { cartDrawerEl } = e.detail;
  }
);
```

```javascript
document.addEventListener(
  'theme:cart-drawer:open',
  (e) => {
    const { cartDrawerEl } = e.detail;
  }
);
```

```javascript
document.addEventListener(
  'theme:cart-drawer:closing',
  (e) => {
    const { cartDrawerEl } = e.detail;
  }
);
```

```javascript
document.addEventListener(
  'theme:cart-drawer:closed',
  (e) => {
    const { cartDrawerEl } = e.detail;
  }
);
```

--------------------------------

### Listen for theme:product:add event

Source: https://help.switchthemes.co/shapes/developer/theme-events/theme-events

This snippet shows how to handle the 'theme:product:add' event, which fires after a product is successfully added to the cart. It includes examples of how to access the cart promise to retrieve the updated cart state.

```JavaScript
document.addEventListener('theme:product:add', (e) => {
  const {
    cartItemCount,
    itemsRootEl,
    lineItemEl,
    variantId,
    key,
    formEl,
    cartPromise,
  } = e.detail;
});

document.addEventListener(
  'theme:product:add',
  async (e) => {
    const cart = await e.detail.cartPromise;

    console.log('Updated cart object', cart);
  }
);

document.addEventListener('theme:product:add', async () => {
  const res = await fetch(
    window.theme.routes.cart_url,
    fetchConfigDefaults()
  );
  const cart = await res.json();

  console.log('Updated cart object', cart);
});
```

--------------------------------

### Load and Apply Custom Font (CSS)

Source: https://help.switchthemes.co/shapes/advanced/custom-font

This example shows how to load a custom font using @font-face and then apply it to the heading font stack in theme.liquid. It includes the CSS for defining the font and updating the relevant CSS custom property.

```css
/* snippets/css-bridge.liquid */
@font-face {
    font-family: 'Switch Bold';
    src: url('https://cdn.shopify.com/s/files/1/0549/8490/0692/files/switch-bold.woff?v=1663802531') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* layout/theme.liquid */
:root {
    --heading-font-stack: 'Switch Bold'; 
    --heading-font-weight: normal;
}
```

--------------------------------

### Listen to Theme Variant Change Event in JavaScript

Source: https://help.switchthemes.co/shapes/developer/theme-events/overview

An example of how to add an event listener to the document to capture the 'theme:variant:change' event. It shows how to access the event details, including product root, form element, and variant information.

```javascript
document.addEventListener('theme:variant:change', (e) => {
  const { 
    productRootEl, 
    formEl, 
    variant, 
    previousVariant, 
    product 
  } = e.detail;
});
```

--------------------------------

### Control Cart Drawer with Alpine.js

Source: https://help.switchthemes.co/shapes/developer/theme-events/control-events

Demonstrates how to use Alpine.js's $dispatch function to trigger 'theme:open:cart-drawer' and 'theme:close:cart-drawer' events from HTML buttons.

```Liquid
<div x-data>
  <button @click="$dispatch('theme:open:cart-drawer')">
    Open cart drawer
  </button>
  <button @click="$dispatch('theme:close:cart-drawer')">
    Close cart drawer
  </button>
</div>
```

--------------------------------

### Unwrap JavaScript Proxy in Theme Event Listener

Source: https://help.switchthemes.co/shapes/developer/theme-events/overview

Shows how to use `Alpine.raw()` to unwrap JavaScript Proxies that might be present in the event detail object, ensuring direct access to the underlying value, for example, when logging variant details.

```javascript
document.addEventListener('theme:variant:change', (e) => {
  console.log('Variant Proxy', e.detail.variant);
  console.log(
    'Unwrapped variant object',
    Alpine.raw(e.detail.variant)
  );
});
```

--------------------------------

### theme:product:add

Source: https://help.switchthemes.co/shapes/developer/theme-events/theme-events

Dispatched when a product is successfully added to the cart.

```APIDOC
## EVENT theme:product:add

### Description
Triggered after a product is successfully added to the cart. Provides a promise to retrieve the updated cart state.

### Event Detail
- **cartItemCount** (Number) - Total items in cart
- **itemsRootEl** (Element) - Cart container
- **lineItemEl** (Element) - The added item element
- **variantId** (String) - ID of the added variant
- **cartPromise** (Promise) - Resolves to the updated cart object

### Usage Example
```javascript
document.addEventListener('theme:product:add', async (e) => {
  const cart = await e.detail.cartPromise;
  console.log('Updated cart object', cart);
});
```
```
Tokens:
Raw