Solved

Dawn Theme - How to move Loox reviews and product title to above product image on mobile?

shanagarryceo
Excursionist
52 0 4

Wondering if there is code I can add to move the loox review star widget & product title to above the product image on mobile? And centre these if possible.

 

Thanks

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4322 980 1639

This is an accepted solution.

Hi @shanagarryceo ,

 

You can replace previous my code by below code:

@media screen and (max-width: 749px) {
    .product {
        position: relative;
        padding-top: 120px;
    }
    .product .product__title {
        position: absolute;
        top: 15px;
        max-height: 52px;
        overflow: hidden;
        text-align: center;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product #shopify-block-loox-rating {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translatex(-50%);
    }
}

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 9 (9)

Mike-Consentik
Shopify Partner
160 28 32

Hi @shanagarryceo ,

This is Mike from Omega

 

Could you leave a link to product page which has Loox Reviews on it, then I can check it for you.

If it’s helpful to you, please give it a like or mark as a solution.
Need any help for Shopify Design or Custom task, please contact via email: locdt@omegatheme.com
Consentik GDPR Cookie Banner: Effortlessly stay compliant with EU GDPR, CCPA
shanagarryceo
Excursionist
52 0 4

Hi Mike,

 

Thanks for looking into this! Here is the link - https://easypackpro.com/products/travel-compression-cube?variant=44506212466962

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

You will need a custom code in main-product.liquid file to do that. 

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

shanagarryceo
Excursionist
52 0 4

Hi Dan,

 

Do you know what this code is?

PageFly-Richard
Shopify Partner
4322 980 1639

Hi @shanagarryceo ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .product {
        position: relative;
        padding-top: 120px;
    }
    .product .product__title {
        position: absolute;
        top: 15px;
        max-height: 52px;
        overflow: hidden;
        text-align: center;
    }
    .product #shopify-block-loox-rating {
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translatex(-50%);
    }
}

PageFlyRichard_0-1677503299397.png

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

shanagarryceo
Excursionist
52 0 4

Hi Richard,

 

This is great, however the title is still positioned to the left, how could I amend this code to centre this? 

shanagarryceo_0-1677518146987.png

 

 

Also - is there a way to decrease the gap between the star rating and title?

PageFly-Richard
Shopify Partner
4322 980 1639

This is an accepted solution.

Hi @shanagarryceo ,

 

You can replace previous my code by below code:

@media screen and (max-width: 749px) {
    .product {
        position: relative;
        padding-top: 120px;
    }
    .product .product__title {
        position: absolute;
        top: 15px;
        max-height: 52px;
        overflow: hidden;
        text-align: center;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product #shopify-block-loox-rating {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translatex(-50%);
    }
}

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

shanagarryceo
Excursionist
52 0 4

Works perfectly Richard thank you

Loox_Success
Tourist
5 0 3

Hey,

Lilach from the Loox team here 🙂

 

We'd be happy to try and help you with adjusting the code of the Rating widget to be displayed above the product's image on mobile only.

 

Please contact us at support@loox.io, and we'll gladly proceed!