Product price
How to use the Product price block in the Meditative Folks Theme.
Product price
At a glance
Shows price, compare-at price, and optional saved badge.
Used in
- Configure where this block is available in the parent section.
Settings
Content settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show tax note | Shows whether taxes and duties are included in the displayed price. | Yes | Always |
| Use global price styles | Use subheading styles from your global theme styles. | Yes | Always |
| Price font size (mobile) | Sets price font size (mobile) in pixels for the matching screen size. | 20 | use global paragraph styles for product price is off |
| Price font size (tablet) | Sets price font size (tablet) in pixels for the matching screen size. | 20 | use global paragraph styles for product price is off |
| Price font size (desktop) | Sets price font size (desktop) in pixels for the matching screen size. | 28 | use global paragraph styles for product price is off |
| Price font weight | Sets how bold price text appears. | 500 | use global paragraph styles for product price is off |
| Price color | Set the color of the product price. | #000000 | use global paragraph styles for product price is off |
| Show 'Saved' badge | Display a small badge showing the percent saved when a compare-at price exists. | Yes | Always |
| Saved badge placement | Controls “Saved badge placement” on the storefront. Open the theme editor to preview live. | above | Always |
| Saved badge color source | Controls “Saved badge color source” on the storefront. Open the theme editor to preview live. | color_scheme | Always |
| Saved badge background | Used when 'Custom colors' is selected. | #D8EDD8 | saved badge color source == 'custom' |
| Saved badge text color | Controls “Saved badge text color” on the storefront. Open the theme editor to preview live. | #34AA08 | saved badge color source == 'custom' |
| Saved badge font size (mobile) | Sets saved badge font size (mobile) in pixels for the matching screen size. | 10 | Always |
| Saved badge font size (tablet) | Sets saved badge font size (tablet) in pixels for the matching screen size. | 11 | Always |
| Saved badge font size (desktop) | Sets saved badge font size (desktop) in pixels for the matching screen size. | 12 | Always |
Setting details
Each control from the tables above, explained simply:
Show tax note
Shows whether taxes and duties are included in the displayed price. Default: Yes.
Use global price styles
Use subheading styles from your global theme styles. Default: Yes.
Price font size (mobile)
Sets price font size (mobile) in pixels for the matching screen size. Default: 20. This control appears when: use global paragraph styles for product price is off.
Price font size (tablet)
Sets price font size (tablet) in pixels for the matching screen size. Default: 20. This control appears when: use global paragraph styles for product price is off.
Price font size (desktop)
Sets price font size (desktop) in pixels for the matching screen size. Default: 28. This control appears when: use global paragraph styles for product price is off.
Price font weight
Sets how bold price text appears. Default: 500. This control appears when: use global paragraph styles for product price is off.
Price color
Set the color of the product price. Default: #000000. This control appears when: use global paragraph styles for product price is off.
Show 'Saved' badge
Display a small badge showing the percent saved when a compare-at price exists. Default: Yes.
Saved badge placement
Controls “Saved badge placement” on the storefront. Open the theme editor to preview live. Default: above.
Saved badge color source
Controls “Saved badge color source” on the storefront. Open the theme editor to preview live. Default: color_scheme.
Saved badge background
Used when 'Custom colors' is selected. Default: #D8EDD8. This control appears when: saved badge color source == 'custom'.
Saved badge text color
Controls “Saved badge text color” on the storefront. Open the theme editor to preview live. Default: #34AA08. This control appears when: saved badge color source == 'custom'.
Saved badge font size (mobile)
Sets saved badge font size (mobile) in pixels for the matching screen size. Default: 10.
Saved badge font size (tablet)
Sets saved badge font size (tablet) in pixels for the matching screen size. Default: 11.
Saved badge font size (desktop)
Sets saved badge font size (desktop) in pixels for the matching screen size. Default: 12.
Tips
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview in the theme editor on mobile and desktop.