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

Store Design
, , ,
1

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

2

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.

3

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

4

Hi Mike,

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

5

Hi Dan,

Do you know what this code is?

6

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
PageFlyRichard_0-1677503299397.png339Ɨ638 78.4 KB

I hope it would help you
Best regards,

Richard | PageFly

7

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
shanagarryceo_0-1677518146987.png754Ɨ546 110 KB

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

8

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

9

Works perfectly Richard thank you

1 Like