Beae page builder

Beae is a drag-and-drop page builder for Shopify - merchants use it to design landing pages, product pages, and collection layouts without touching theme code. Stores that build their pages in Beae can keep their Color Swatches setup: the swatches follow your products onto Beae-built pages.

Color Swatches works on pages built with Beae as soon as the app embed is on. Beae renders your pages with its own builder, and the Color Swatches embed injects swatches into the rendered page, so there’s no Beae-specific configuration for most layouts.

Setup

1. In your Shopify admin, go to Online Store > Themes > Customize.
2. Open App embeds and turn on the Color Swatches embeds.
3. Open a Beae page that lists products or shows a product. Swatches appear where the app detects the product image or price.

That’s it for standard Beae sections.

Custom layouts

If you build a section where the app can’t find a place to insert swatches, add a container by hand. In the Beae editor, add a custom Liquid or HTML block where you want swatches and paste the matching snippet.

On a product page:

<div data-pl-swatches-product></div>

On a product grid or collection section:

<div data-pl-swatches-collection data-product-id="{{ product.id }}" data-product-url="{{ product.url }}"></div>

Note

The collection container needs the product’s ID and URL. If your Beae section loops over products with a different variable, use that variable’s id and url instead of {{ product.id }} and {{ product.url }}.

Swatches now render inside the container on your Beae pages.