How to move review widget above product images on mobile - horizon theme

Store Design
1

Hello,

i am looking for a way to move the Judge.me reviews widget above the product images for mobile only on the horizon theme.

Any help is appreciated.

Thankyou

help
help817×1472 82.5 KB

2

Hi @LeviFurey,

Please send the website link, I will check it for you

3

hello,

4

Hi @LeviFurey,

Can you add a section that displays the review widget above the ‘Product information’ section? Then I will check it and guide you to add the CSS code to hide and show it

5

hello,

i want to be able to do this for all product pages.

If you give me the code for that specific section wont it only hide it one the one product page?

6

Hi @LeviFurey,

Sure, because with HTML code as it is, this is not possible.

So after you add the section, I will check and guide you to add CSS code for it.

7

ok iv added it.

its on this page,

8

Hi @LeviFurey,

Please go to Customize > Theme settings > Custom CSS and add code:

#shopify-block-Acld1cjg0dHJVTjRoV__judge_me_reviews_preview_badge_GrdTDT {
    display: none;
}
@media screen and (max-width: 749px) {
#shopify-block-Acld1cjg0dHJVTjRoV__judge_me_reviews_preview_badge_GrdTDT {
    display: block;
}
#shopify-block-ATi9hZVVVcEtzcDJ5U__judge_me_reviews_preview_badge_rFCqgW {
    display: none;
}
}

If I helped you, then a Like would be truly appreciated.

9

yes!!! thats works, thankyou so much.

can i add the other widgets to other product pages and do them aswell?

10

Hi @LeviFurey,

Sure, after you add it, send me the code, I will check and guide you

11

ok i have added it to these pages.

12

Hi @LeviFurey,

I checked and this can be done once for all, can I send you a collaborator invitation? It will help me check and guide you in detail

13

if its ok with you id prefer not to give you collaborator access, iv had this done before and it went very badly.

Are you able to just give me instructions to what to do? im not a beginner at code i have a little experience.

14

Hi @LeviFurey,

If so, you can try going to Custom CSS in Section and add code:

.jdgm-horizon-widget {
    display: none;
}
@media screen and (max-width: 749px) {
.jdgm-horizon-widget {
    display: block;
}
}

For Product information section, add code:

@media screen and (max-width: 749px) {
.jdgm-horizon-widget {
    display: none;
}
}
15

Yes that works perfectly thankyou so much