Moving Shopify Product Reviews on Debut Theme.

Solved
Highlighted
Shopify Partner
45 1 4

I managed moving the reviews widget on my product page below the cart. Thing is, now that it is "outside" the product.description section, the review go full screen on mobile. I would love to for it to have a small margin when using mobile. Here's an example, below the description you can click on the reviews.

0 Likes
Highlighted

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
{
#shopify-product-reviews:before, #shopify-product-reviews:after {
    margin-top: 20px;
}
.text-center.return-link-wrapper {
     margin-left: 15px;
    margin-right: 15px;
}
.return-link-wrapper {
    margin: 25px;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
45 1 4

Hey! 

 

Thanks a lot for your replay! It didn't work, though. The reviews starts at the very edge of the screen and it's a bit hard to read. I'm attaching a screenshot!

 

WhatsApp Image 2019-12-03 at 11.54.44 PM.jpeg

0 Likes
Highlighted

Can you share url for this screen?

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Shopify Partner
45 1 4
Highlighted

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
{
div#reviews_775829815353 {
    margin-left: 15px;
    margin-right: 15px;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Shopify Partner
45 1 4

It worked great! But only for that specific page/review, the other product I had recently reviewed is this one but it does not have the margin

https://coolpebbles.com.mx/collections/decoracion/products/vela-spin

0 Likes
Highlighted

Ok.

Remove that css:
Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
{
.spr-reviews {
    margin-left: 20px;
    margin-right: 20px;
}
}

This will works for all reviews.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
45 1 4

It didn't work haha, this last one has the review without the margin again!

0 Likes

Success.

Ok.

Remove that css that was not worked because of iframe.:
Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
{
.product-single div#shopify-product-reviews {
    margin: 0 20px !important;
}
}

 This will work.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like