Impulse theme -
Store URL: www.chromic.co
Any help would be very much appreciated, thanks!
Topic summary
A user working with the Impulse theme on Shopify (chromic.co) needs to reposition product page elements—specifically the title, ratings, and price—to the left side on mobile devices.
Solution Provided:
PageFly-Richard offers CSS code to be added to theme.liquid above the </head> tag:
- Uses flexbox to restructure
.product-info__details - Floats product title, rating, and price elements to the left with 50% width
Follow-up Requests:
- User asks how to swap the positions of discounted price ($95.99) and regular price ($99.99)
- Richard provides updated code to handle this swap
- User then requests the same left-alignment for desktop view
- Richard begins providing desktop-specific code
Status: Ongoing conversation with iterative code solutions being provided to refine the layout across mobile and desktop breakpoints.
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
Hope this can help you solve the issue
Best regards,
Richard | PageFly
.product-info__details {
display: flex;
flex-direction: column;
}
.product-title, .product-rating, .product-price {
float: left;
width: 50%; /* Adjust width as needed */
}
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!!
Hi @RC120 Yes that possible
You can replace the code added above with this new one to have that function too
Result:
Thanks, it seems to work on mobile. Is there a way to change the price to the left side on desktop as well?
With that concern, this will be the correct code for you @RC120
1 Like