How can I left-align product details like price, variants, and ratings?

Technical Q&A
1

How can I align the product price, variants and star rating to the left of the screen instead of being in the middle?

2

Hi @CharlieB99

welcome to Shopify Community, please post the URL of your store so that I can suggest a fix.

3

lighthaven.co.uk

4

@CharlieB99 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 749px){
    .product-single__meta .loox-rating{
    text-align: left;
}

.product-single__prices{
    justify-content: flex-start;   
}

.swatch-label{
    text-align: left;
}
}

Please let me know whether it works.

Kind regards,
Diego

1 Like
5

Perfect, thank you

6

Hey @diego_ezfy , can you please also help me! I am trying to align these details also in the middle, but it did not work with this code. I am using Dawn 2 and tried adding it to my base.css.

Would appreciate the help, thank you!