The theme block gives an Embedded publication a visible place on the Shopify product page. Configure what it shows in Composerie, and control its order within the product template in Shopify.
Choose the Embedded layout
For a first publication, select Embedded in the product’s Publish screen. That screen uses the mode’s defaults; the earlier Configure step and preset selector are not part of it. Review detailed display controls in the product’s store settings.
Advanced controls can replace the theme’s variant UI, show live preview, replace title and price, add conversion elements, and let Composerie own the add-to-cart action. Enable only the controls you have tested with the theme.
Place the Shopify block
Use the Composerie setup dialog to open Shopify’s product template. Keep the block inside the main product form, close to the purchase controls, and save.
Style the customizer in Composerie
Open Customizer in the dashboard to set the theme, brand colors, font, buttons, layout, and advanced options. The right side provides a desktop and mobile live preview.
Use custom CSS
In Customizer, open Advanced and use Custom CSS for small cosmetic changes. The CSS stays inside the customizer root and has a limit of 4000 characters.
Use these stable classes instead of generated utility classes:
| Selector | Element |
|---|---|
.composerie-input |
Text and other input controls |
.composerie-label |
Field labels |
.composerie-textarea |
Multiline text controls |
.composerie-select |
Dropdown controls |
.composerie-dropzone |
Photo upload areas |
.composerie-variant |
Variant and material controls |
.composerie-addon |
Individual add-on controls |
For example, change the border color of text inputs:
.composerie-input {
border-color: #2563eb;
}Add-to-cart and price selectors, broad button selectors, and unsafe CSS are filtered. Use the appearance settings for purchase buttons and prices. Keep existing selectors when updating your CSS, and test the intended controls in the live preview and on the storefront at desktop and mobile sizes before publishing.
Where do I change the embedded layout?
Choose Embedded in Publish for a first publication. Review detailed display controls in the product's store settings, then check the intended publication on the storefront.
Where do I change colors and fonts?
Open Customizer in the Composerie sidebar and use Theme and Branding.
Should I enable every advanced control?
No. Enable only the controls needed for your theme and verify each one in a storefront test.
Next
Run the preview checklist before publishing.