CSS
Paste CSS into the **Custom CSS** field at the bottom of the CHAOBROStudio Design block in the theme editor. Changes apply to that block instance (or use .pod-design-studio to target all instances).
Quick start
- Online Store → Themes → Customize → open a **product** template.
- Select the **CHAOBROStudio Design** block → scroll to **Advanced styling → Custom CSS**.
- Use selectors from the tables below. Prefer CSS variables (e.g. --pds-confirm-bg) for colors and buttons.
- Save the theme and refresh the product page to preview.
Scoping your CSS
Each block root has id chaobro-pds-{blockId} (inspect the element in your browser). Prefix selectors with that id to style one block only. Use .pod-design-studio to style every Design Studio block on the store. All classes use the pod-design-studio__* BEM prefix to avoid clashes with your theme.
/* One block only */
#chaobro-pds-abc123 .pod-design-studio__btn--confirm {
border-radius: 999px;
}
/* Every Design Studio on the store */
.pod-design-studio {
--pds-accent: #0f766e;
}CSS variables (recommended)
Set these on .pod-design-studio for theme-wide tweaks inside the component. They respect theme-aware mode and block size settings.
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| --pds-accent | Primary accent color | Confirm button, success status, active accents | color, background, border-color |
| --pds-accent-text | Text on accent surfaces | Usually white or theme button text | color |
| --pds-foreground | Main text color | Inherited from theme when theme-aware | color |
| --pds-muted | Secondary / hint text | Labels, hints, status default | color |
| --pds-background | Panel background | Root card and inputs | background, background-color |
| --pds-border | Borders | Cards, tabs, inputs, patterns | border-color |
| --pds-radius / --pds-radius-lg | Corner radius | Buttons, inputs, outer card | border-radius |
| --pds-font-body / --pds-font-heading | Fonts | Synced from theme or custom font list | font-family |
| --pds-confirm-bg / --pds-confirm-color | Confirm button | Override without changing global accent | background, color, border-color |
| --pds-confirm-radius | Confirm button shape | Falls back to theme button radius | border-radius |
| --pds-ui-text-scale | Panel text scale | Set by ui_text_size block setting | Read-only; use modifier classes instead |
| --pds-ui-button-scale | Button scale | Set by ui_button_size block setting | Read-only; use modifier classes instead |
| --pds-print-overlay-opacity | Print area guide | Set by print_area_opacity block setting (0–100) | opacity (on overlay pseudo-element) |
Class & selector reference
Stable hooks for layout, preview, tabs, fields, patterns, and actions. State classes (.is-active, .is-error) are toggled by JavaScript.
Root container
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio | Entire Design Studio card | Outer padding, border, shadow, base font | padding, border, border-radius, background, box-shadow, font-size |
| #chaobro-pds-{blockId} | Single block instance (recommended scope) | Each block has id chaobro-pds- plus Shopify block id. Scope CSS to one product template block. | #chaobro-pds-xxx .pod-design-studio__btn--confirm { ... } |
| .pod-design-studio.pod-design-studio--theme-aware | Theme-aware mode | Always present on the root element | Use with CSS variables for theme sync |
| .pod-design-studio.is-confirmed | After design confirmed | Added by JavaScript after successful save | box-shadow, outline |
Header & intro
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio__title-row | Heading row | Flex row with title and badge | gap, align-items |
| .pod-design-studio__heading | Block heading (h3) | From block setting「Heading」 | font-size, font-weight, color |
| .pod-design-studio__studio-badge | 「Design Studio」badge | Small pill next to heading | background, color, border-radius, font-size |
| .pod-design-studio__required | Required asterisk | Shown when required setting is on | color |
| .pod-design-studio__intro | Introduction text | From block setting「Introduction」 | font-size, color, margin |
Layout
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio__layout | Preview + panel grid | Two columns on desktop; stacks on mobile | grid-template-columns, gap |
| .pod-design-studio__preview-wrap | Live preview column | Contains canvas shell | padding, background |
| .pod-design-studio__panel | Controls column | Tabs and form fields | padding, background, border-radius |
Live preview & canvas
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio__preview-head | Preview header row | Label + print area badge | display, justify-content |
| .pod-design-studio__preview-label | 「Live preview」 label | Translated via locale | font-size, font-weight |
| .pod-design-studio__preview-badge | 「Print area」 badge | Indicates customizable region | background, color, font-size |
| .pod-design-studio__canvas-shell | Canvas wrapper | Square aspect area for mockup | aspect-ratio, background, border-radius |
| .pod-design-studio__canvas | <canvas> element | Renders mockup, text, image, pattern | width, height, cursor |
| .pod-design-studio__canvas.is-draggable | Drag mode enabled | When layer can be moved | cursor: grab |
| .pod-design-studio__canvas.is-dragging | While dragging | Active drag state | cursor: grabbing |
| .pod-design-studio__canvas-hint | Drag hint below canvas | Hidden when not applicable | font-size, color |
Tabs
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio__tabs | Tab list container | Text / Image / Pattern | display, gap, flex-wrap |
| .pod-design-studio__tab | Each tab button | role=tab | padding, border, background, font-size |
| .pod-design-studio__tab.is-active | Selected tab | Applied to active panel tab | background, border-color, color |
| .pod-design-studio__tab-icon | Tab icon (icon tab style) | SVG icon wrapper | width, height |
| .pod-design-studio__tab-label | Tab text label | Hidden in icon-only tab style | font-size |
| .pod-design-studio__tab-panel | Tab content panel | One per tab; hidden attribute when inactive | padding, display |
| .pod-design-studio--tabs-button | Solid button tab style | Block setting「Tab style」 | Modifier on root |
| .pod-design-studio--tabs-square | Square outline tabs | Block setting「Tab style」 | Modifier on root |
| .pod-design-studio--tabs-rounded | Rounded outline tabs (default) | Block setting「Tab style」 | Modifier on root |
| .pod-design-studio--tabs-icon | Icon-only tabs | Block setting「Tab style」 | Modifier on root |
Form fields
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio__field | Field wrapper | Label + control spacing | margin, gap |
| .pod-design-studio__field-grid | Multi-column field row | e.g. color + size | grid-template-columns, gap |
| .pod-design-studio__label | Field labels | All <label> and span labels | font-size, font-weight, color |
| .pod-design-studio__hint | Helper hint text | Pattern tab hint | font-size, color |
| .pod-design-studio__input | Text input | Custom text field | padding, border, border-radius, font-size |
| .pod-design-studio__textarea | Long text input | Prompt input for suggestions | min-height, padding, border |
| .pod-design-studio__select | Dropdown selects | Font, rotation, etc. | padding, border, appearance |
| .pod-design-studio__color | Color picker input | Native color input | width, height, border |
| .pod-design-studio__range | Range slider | Text size, image scale | accent-color, height |
| .pod-design-studio__range-value | Slider value display | e.g. 36 or 70% | font-size, min-width |
Image upload
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio__upload | Upload area | Image tab file picker | display, gap |
| .pod-design-studio__upload-btn | Upload button label | Styled <label> for file input | padding, border, background |
| .pod-design-studio__upload-name | Selected file name | Gets .is-selected when file chosen | font-size, color |
| .pod-design-studio__file-input | Hidden file input | Visually hidden; avoid display overrides | position, opacity |
Background patterns
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio__pattern-grid | Pattern button grid | From pattern_options setting | grid-template-columns, gap |
| .pod-design-studio__pattern | Pattern swatch button | data-pattern-id attribute on each | width, height, border, border-radius |
| .pod-design-studio__pattern.is-active | Selected pattern | Outline highlight | border-color, box-shadow |
| .pod-design-studio__pattern[data-pattern-id="dots"] | Built-in dots swatch | Uses ::before preview | /* use data-pattern-id */ |
| .pod-design-studio__pattern--image | Photo pattern swatch | When pattern has image URL | background-image on ::before |
Footer & buttons
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio__footer | Footer area | Confirm, reset, status | margin-top, padding-top, border-top |
| .pod-design-studio__actions | Button row | Confirm + Reset | display, gap, flex-wrap |
| .pod-design-studio__btn | Base button | All buttons inherit from this | padding, border, font-size, min-height |
| .pod-design-studio__btn--confirm | 「Confirm design」 | Primary storefront action | background, color, border-radius, min-height |
| .pod-design-studio__btn--ghost | 「Reset」 button | Secondary outline style | background, border-color |
| .pod-design-studio__status | Status message | role=status live region | font-size, color, min-height |
| .pod-design-studio__status.is-error | Error status | Save / API errors | color |
| .pod-design-studio__status.is-success | Success status | Design confirmed | color |
Size modifiers (block settings)
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| .pod-design-studio--ui-text-small | Small panel text | ui_text_size = small | --pds-ui-text-scale |
| .pod-design-studio--ui-text-medium | Medium panel text (default) | ui_text_size = medium | --pds-ui-text-scale |
| .pod-design-studio--ui-text-large | Large panel text | ui_text_size = large | --pds-ui-text-scale |
| .pod-design-studio--ui-btn-small … --ui-btn-xlarge | Button size presets | ui_button_size block setting | --pds-ui-button-scale |
Data attributes (reference)
| Selector | Targets | Notes | Common properties |
|---|---|---|---|
| [data-pod-design-studio] | Root marker | JavaScript bootstraps on this attribute | Do not remove |
| [data-studio-canvas] | Canvas element | Preview rendering target | — |
| [data-confirm-design] | Confirm button | Triggers save to CHAOBROStudio API | — |
| [data-reset-design] | Reset button | Clears layers and line item properties | — |
| [data-studio-status] | Status text node | Same as .pod-design-studio__status | — |
| [data-pattern-id] | Pattern swatch id | Matches pattern_options id | — |
| [data-tab] / [data-tab-panel] | Tab ids | text | image | pattern | — |
Example snippets
Copy into the Custom CSS field and adjust values.
Round confirm button only
.pod-design-studio {
--pds-confirm-radius: 999px;
--pds-confirm-bg: #111827;
--pds-confirm-color: #ffffff;
}Compact panel on mobile
@media (max-width: 749px) {
.pod-design-studio {
padding: 0.75rem;
}
.pod-design-studio__layout {
gap: 0.75rem;
}
}Scope to one block instance
/* Replace BLOCK_ID with your Shopify block id (inspect element) */
#chaobro-pds-BLOCK_ID .pod-design-studio__heading {
font-size: 1.5rem;
letter-spacing: -0.02em;
}Accent color for entire studio
.pod-design-studio {
--pds-accent: #2563eb;
--pds-accent-text: #ffffff;
--pds-confirm-bg: #2563eb;
--pds-confirm-color: #ffffff;
}Tips
- Use CSS variables before overriding individual classes — upgrades are less likely to break your theme.
- Avoid !important unless necessary; the component uses considered specificity.
- Do not hide [data-confirm-design] or remove required ARIA roles.
- Custom CSS is storefront-only; it does not change the Shopify admin app.
- For password-protected dev stores, confirm design uses the CHAOBROStudio API — styling is unaffected.
Need help with setup?
See the tutorial for block placement and print area options.