Price Sorter
What it does
Sorts CMS products by price and stores the selected order in sessionStorage for use by CMS Wrapper. Provides three sorting options: Recommended (default order), Price: Low → High (ascending), and Price: High → Low (descending).
Controls
| Control | Description |
|---|---|
| Initial | Default sorting on page load (Recommended, Low → High, High → Low) |
| Label | Group of label styling controls |
| Label → Text | Text shown for the sorting control label |
| Label → Show | Toggle label visibility |
| Label → Font | Font family, size, weight, and line height for label |
| Label → Color | Label text color |
| Label → Gap | Space between label and dropdown |
| Container | Group of container styling controls |
| Container → Padding | Inner spacing of dropdown |
| Container → Radius | Corner radius of dropdown |
| Container → Background | Background color of dropdown |
| Border | Group of border styling controls |
| Border → Width | Border thickness (0 for no border) |
| Border → Style | Border style (Solid, Dashed, Dotted, None) |
| Border → Color | Border color |
| Text | Group of dropdown text styling controls |
| Text → Font | Font family, size, and weight for dropdown text |
| Text → Color | Dropdown text color |
| Icon | Group of dropdown icon styling controls |
| Icon → Color | Color of the dropdown arrow icon |
| Icon → Size | Size of the dropdown arrow icon (12-32px) |
Product Price
What it does
Displays dynamic product pricing based on selected variants, with currency formatting controls.
Controls
| Control | Description |
|---|---|
| Product ID | Pass product ID from CMS |
| Variants | Pass CMS variant data |
| Price | Connect CMS price value |
| Show Symbol | Display currency symbol |
| Show Code | Display currency code |
| Show Decimal | Display decimal values |
| Font | Typography for price |
| Color | Price text color |