Price

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on customizing sections
3. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to present product pricing clearly and give it the right visual priority in your product details. It works best when you want the price to stay easy to scan, with optional sale emphasis and supporting policy text nearby. For a broader overview of how blocks work, see Shopify documentation on sections and blocks

Core settings

The main settings control how prominent the price feels in the product information area. Text size changes the visual hierarchy, while text color and sale price color help you distinguish standard pricing from discounted pricing.

Choose a size that keeps the price noticeable without overpowering nearby product details. For colors, aim for strong readability first, then use the sale color to add emphasis only where discounts should stand out.

You can also show shipping and tax policy messaging with the price. This is helpful when shoppers benefit from seeing extra cost context early, but it works best when your policy wording is clear and complete.

Only show shipping and tax policy messaging if those policies are current and customer-ready. Unclear policy text can make the price area feel less trustworthy.

Standard block settings

Visibility settings

Visibility settings control whether this block appears on desktop, mobile, or both. This is useful when you are building different product information layouts for smaller and larger screens. For more on managing blocks in the editor, see Shopify documentation on customizing sections

If you hide the block on one device, make sure pricing still appears clearly somewhere else in that layout. You can read more about shared visibility settings.

Usage notes

1. Set clear hierarchy. Use a text size that gives the price enough emphasis relative to the title, badges, and purchase actions.
   1. Keep nearby details secondary so the price remains the fastest thing to scan.
2. Highlight discounts carefully. Use the sale color to call attention to reduced prices without hurting readability or clashing with the page design.
   1. Keep the regular price legible enough to compare with the sale price.
3. Show policy text intentionally. Enable shipping and tax policy messaging only when that extra context helps reduce hesitation.
   1. Make sure the wording is complete and current before you rely on it in the price area.
4. Check both devices. If you change visibility, confirm the price remains easy to find on desktop and mobile.
   1. Hiding the block on one device means the layout should still present pricing clearly somewhere else.
5. Expect product context to change what shoppers see. Price display can vary with selected variants, quantity, availability, and configured commerce actions.
   1. Test a few product states so you know the price area still makes sense when options or availability change.
6. Use understated styling when you want shared fallback behavior. Blank, transparent, or default-style values usually let the surrounding design carry the price area.
   1. Use explicit colors or stronger visual overrides only when you want the price block to stand apart more clearly.