Solved

Can I align product details to the left on Shopify?

CharlieB99
Visitor
3 0 0

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

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 5 (5)

drakedev
Shopify Partner
685 148 229

Hi @CharlieB99 

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

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
CharlieB99
Visitor
3 0 0

lighthaven.co.uk

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

CharlieB99
Visitor
3 0 0

Perfect, thank you

Jacquline
Excursionist
48 0 7

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!