Product Price

Design Controls


In the “Layout” section, you can determine how the pricing elements are arranged. Decide whether prices stack up vertically across different breakpoints, and manage the space in between for an optimal viewing experience.

  • Stack Vertically: Opt to arrange prices one on top of the other. The dropdown lets you decide at which screen breakpoints this stacking effect should apply.
  • Space Between: Adjust the distance between the “Current Price” and the “Old Price” for clarity and appeal.


The “Typography” controls are all about the appearance of your pricing text. Personalize the visual properties of both the current and the old price to make them resonate with your brand and catch the visitor’s eye.

  • Current Price: Dive into the typography settings specific to the current or active price of the product.
  • Old Price: Adjust the typography for the old or slashed price, often used to show discounts.


“Spacing” controls give you the power to handle the positioning of the price element on the page. By tweaking the margins at the top and bottom, you can achieve a balanced layout that meshes well with other website components.

  • Margin Top: Increase or decrease the space above the price element to ensure it stands out or fits well with the content above it.
  • Margin Bottom: Manipulate the space below the price element to harmonize it with subsequent elements on the page.