How to move the title, ratings and price to the left side of the product page on mobile?

Store Design
, , ,
1

Impulse theme -

Store URL: www.chromic.co

Any help would be very much appreciated, thanks!

d7ffad07b775ab12e79d1cabe92901c4.png
d7ffad07b775ab12e79d1cabe92901c4.png371×1209 59.6 KB

2

Hi @RC120

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1703042002322.png
PageFlyRichard_0-1703042002322.png375×667 27.2 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

.product-info__details {

display: flex;

flex-direction: column;

}

.product-title, .product-rating, .product-price {

float: left;

width: 50%; /* Adjust width as needed */

}

4

Hey thanks this was very helpful! Also just wondering, do you know how to flip the positioning of the discounted price and actual price? Like $59.99 on the left and $99.99 on the right. Thanks!!

5

Hi @RC120 Yes that possible

You can replace the code added above with this new one to have that function too

Result:

PageFlyRichard_0-1703061241739.png
PageFlyRichard_0-1703061241739.png375×667 29.3 KB

6

Thanks, it seems to work on mobile. Is there a way to change the price to the left side on desktop as well?

7

With that concern, this will be the correct code for you @RC120
1 Like