Move review star badge

Solved
Highlighted
New Member
77 0 0

How can I move the review star badge to the right so it doesn't cover up the price?

 

I have tried many different things with the code and can't get it to work.  I think it may have something to do with the lines of code shown below, but I'm not sure.

 

Live page is: https://www.palmettowoodshop.com/collections/featured/products/babys-first-christmas-ornament-wooden...

 

<div class="move-reviews" onclick="jQuery('ul.tabs li:nth-child(3) a').trigger('click'); var scrollContainer = jQuery('html, body'); var curElem = jQuery('ul.tabs'); scrollContainer.animate({scrollTop : curElem.offset().top - 1}, 500);">
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>

 

Capture.JPG

0 Likes
Highlighted
Shopify Partner
508 77 96

find and update bellow code in bottom of file

@media only screen and (min-width: 1224px)
.move-reviews {
float: right !important;
margin-top: -42px !important;
}
@media only screen and (min-device-width: 768px)
.move-reviews {
float: right !important;
margin-top: -42px !important;
}
@media only screen and (min-device-width: 480px)
.move-reviews {
float: right;
margin-top: -42px !important;
position: relative !important;
margin-bottom: 0px !important;
}
@media only screen and (min-device-width: 320px)
.move-reviews {
float: left;
margin-top: 10px !important;
position: relative !important;
margin-bottom: 0px !important;
}

Want to modify or incorporate custom changes on store
If helpful then please Like and Accept Solution.
Email: bamaniyaketan.sky@gmail.com
Skype : bamaniya.sky
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
77 0 0

Thanks for your help!

 

I replaced the code on my style.scss.liquid page with your code, but it had no effect.  I don't see any difference.

 

Do you have any other suggestions?

0 Likes
Highlighted
Shopify Partner
1275 103 159

Hi @,
1. Go to Online Store->Theme->Edit code
2. Asset->engo-customize.scss.css->paste bellow code in bottom of file
#product-price {
padding: 30px 15px 0 0 !important;
}
.move-reviews {
float: left !important;
margin-top: -61px !important;
margin-left: 0 !important;
position: relative !important;
margin-bottom: 0px !important;
}

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
New Member
77 0 0

It still didn't change anything.

 

I don't have the asset "engo-customize.scss.css", but I pasted your code in both "custom.scss" and "style.scss" and nothing happened.

0 Likes
Highlighted

Success.

Shopify Expert
2686 67 696

Trenton, 

 

looks like somebody has "speed optimized" your shop and there is no separate stylesheet loaded, but it's included as part of the HTML file. That's why your edits under Assets do not apply.

Unfortunately, it's impossible to tell which file you need to modify without looking at your back-end.

Plus this embedded stylsheet has a number of rules using !important which does not help too.

 

Here is the code I would suggest, based on what you have at the moment:

 

/* to put in the stylesheet */
#product-price+.move-reviews {
    float: right !important;
    margin-right: 25px;
}

@media (max-width: 420px) {
    #product-price+.move-reviews {
        float: none !important;
        margin: 15px 20px !important;
    }
}

 

If you can't see where you actual styles are defined, as a last resort you can add this code to the bottom of the theme.liquid layout  wrapped with <style> ..</style> like so:

<style>
/* to put at the bottom of the theme.liquid layout */ #product-price+.move-reviews { float: right !important; margin-right: 25px; } @media (max-width: 420px) { #product-price+.move-reviews { float: none !important; margin: 15px 20px !important; } } </style>

Untitled.jpegUntitled2.jpeg

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
77 0 0

Ok thanks.  Yeah, that did move the badge, but not exactly where I wanted it. It looks like I'll just have to hire someone to do this.

 

Thanks for your help!

0 Likes
Highlighted
Shopify Expert
2686 67 696

Haha -- you were not very specific about where you want it to be :)

The result would definitely be better with access to the theme code.

My e-mail is right here, just in case 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes