Price

The Price block is a versatile tool designed to display a product's price with customizable settings. Users can adjust the display to include shipping and tax policy information, ensuring transparency for customers. The block offers options to modify text size and color, allowing for alignment with the store's branding and design preferences.

Visibility settings enable users to control how the Price block appears on different devices, supporting responsive design needs. This flexibility ensures that the price display can be tailored to fit various screen sizes and layouts.

Practical usage examples include highlighting discounts by changing the sale price color, enhancing brand consistency through text color adjustments, and optimizing the display for mobile devices by utilizing visibility settings. These features collectively enhance both the aesthetic and functional aspects of the store's design.

Overview #

The Price block is designed to display a product's price with various customizable settings, allowing users to tailor the appearance and functionality of the price display to fit their specific needs. It is available in sections such as Featured product and Product information.

Key components and functionality #

Display settings

This group of settings allows users to control how the price is displayed, including whether to show additional information about shipping and tax policies.

Display shipping and tax policy

This setting allows users to choose whether to display information about shipping and tax policies alongside the product price. This can be useful for providing transparency to customers regarding additional costs.

• Default: Enabled

Text appearance

These settings enable users to customize the appearance of the text displaying the product price, including size and color options.

Text size

This setting controls the size of the text used to display the product price. Users can select from several predefined sizes to best fit their design preferences.

1. Small
2. Medium (default)
3. Large
4. Extra large

Text color

This setting allows users to customize the color of the text displaying the product price. This can be adjusted to match the overall theme or branding of the store.

Sale price color

This setting provides the option to change the color of the text specifically for sale prices, helping to highlight discounts and promotions effectively.

Visibility settings

Visibility settings determine how and where the Price block is displayed across different devices, allowing for responsive design adjustments.

Visibility

This setting determines the visibility of the Price block on different devices. Users can choose to hide the price on specific devices if needed.

1. Do not hide (default)
2. Hide on desktop
3. Hide on mobile

Available in sections #

• Featured product
• Product information

Usage examples #

1. Highlighting discounts: By using the "Sale price color" setting, users can make sale prices stand out, drawing attention to discounts and promotions.

2. Responsive design: Utilize the "Visibility" setting to hide the price on mobile devices if the design requires a more streamlined appearance on smaller screens.

3. Brand consistency: Adjust the "Text color" to ensure the price display aligns with the store's branding, maintaining a cohesive look across all elements.

These settings provide flexibility and control over how product prices are displayed, enhancing both the aesthetic and functional aspects of the store's design.