Styling with CSS parts
The app blocks render inside a Shadow DOM, which isolates them from your theme. CSS parts are the official way to reach specific elements and style them beyond the table editor.
For developers
Use CSS parts for adjustments the table editor doesn’t offer. For completely custom designs, consider custom tables in Liquid.
How CSS parts work
Elements inside a Shadow DOM can’t be targeted by regular selectors. Instead, the component marks some elements with a part attribute, and you style them from outside with the ::part() pseudo-element:
sc-comparison-table::part(cell) {
padding-block: 12px;
}
The host elements are:
| Block | Host element |
|---|---|
| Specification table | sc-specification-table |
| Comparison table and variant comparison table | sc-comparison-table |
Available parts
| Part | Available on | Element |
|---|---|---|
cell | Specification and comparison tables | Value cells. |
column-header | Comparison tables | Header cell of each product column (image, title, price…). |
reference-column | Comparison tables (not variant comparison) | Added to the header and cells of the main product column — the product of the page. |
Elements can have several parts: in comparison tables, the cells of the main product have both cell and reference-column, which you can target with ::part(cell reference-column).
Where to add your CSS
- Theme settings › Custom CSS in the theme editor, to apply styles to the whole store, or
- the Custom CSS setting of the section containing the block, to scope styles to that section, or
- your theme’s stylesheet, if you edit code.
Examples
Highlight the current product in comparison tables
sc-comparison-table::part(reference-column) {
background: #fff5f0;
}
sc-comparison-table::part(column-header reference-column) {
border-top: 3px solid #ff6f45;
border-radius: 12px 12px 0 0;
}
Comparison table with the reference column highlighted
A comparison table where the column of the current product has a light orange background and an orange top border, produced by the CSS example.
Tighter cells in specification tables
sc-specification-table::part(cell) {
padding-block: 4px;
font-variant-numeric: tabular-nums;
}
Keep it robust
Only the parts listed above are officially supported. Other part attributes may exist in the markup, but they can change without notice. ::part() can’t target children of a part (::part(cell) span doesn’t work).