The Stylux Button Offer block places the personalization button on a product page. Use it on Shopify Online Store themes. Headless storefronts should render the offer and use a cart adapter instead.

The block does not load the SDK. Install the Shopify app and load the SDK with the Shopify plugin on the theme first. If the SDK is not on the page, the block does nothing.

Add the block

In Shopify admin, go to Online Store, then Themes, then Customize.
Open a product template.
Add the app block named Stylux Button Offer.
Place it where the personalization button should appear, usually next to the theme's add to cart button.
Save.

The block shows the offer for the variant selected on that page. If the variant has no Stylux offer, customers see no button. Choosing the button opens personalization for that product. See Rendering Offers.

When the customer changes variants, the Shopify plugin refreshes the button. Variant detection is on by default.

Block settings

Setting	Default	What it changes
Container ID	`stylux-offer-container`	Where the button renders. This matches the SDK default. If you change it, set `selectors.offers.BUTTON` or `offerElementId` to that same id. See Selectors.
Container classes	`stylux-offer-container`	Classes on the container around the button.
Button element classes	`stylux-offer-btn`	Classes on the button itself.
Offer channel	Auto	D2C, B2B, or Auto. Auto reads a `channel` query param of `D2C` or `B2B` from the page URL. Any other value, including a missing param, uses D2C.