center tax information on product page

Store Design
, , , ,

Topic summary

Goal: align the tax information with the product price on a Shopify product page (it appears too low).

Proposed solution: adjust CSS to align elements and tweak spacing.

  • Admin path: Online Store > Themes > Actions > Edit code.
  • Open the theme’s CSS file (base.css, style.css, or theme.css).
  • Add CSS to set .product .price__container { vertical-align: baseline !important; } and adjust spacing with div#price-template–23992678941021__main { margin-top: 1rem; }.
  • Save changes.

Outcome: a screenshot was provided showing the tax text visually aligned with the price.

Status: a working approach was shared; awaiting confirmation from the original poster. No conflicting views or alternative methods presented.

Summarized with AI on December 15. AI used: gpt-5.
1

https://imanethelabel.com/products/essential-dress?variant=52234317627741

how can I center the tax information to the price? it looks a bit too much on the bottom and not at the same height like the price

1 Like
2

Hi @alyhz

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product .price__container {
    vertical-align: baseline !important;
}

div#price-template--23992678941021__main {
    margin-top: 1rem;
}

  • And Save.

  • Result:

    Made4uoRibe_0-1730846411084.png

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like