BETA: Product Reviews (Etsy Import) Styling

Site URL: https://www.shopuhhuh.com/shop/p/study-05-gateway-5tz2x

I'm testing out using "product reviews" on my product pages which is currently in beta.

I'm using the etsy import feature. Example attempt: https://www.shopuhhuh.com/shop/p/study-05-gateway-5tz2x 

I've already started to noodle a bit but I'm wondering if anyone can help me clean it up in one of two ways:

1. move below image/info and make full width 

2. constrain so there isn't white space below image (the reviews could scroll but there wouldn't be white space below the image, or maybe constrain the number or reviews shown)

//place reviews below additional details
.I5QWflG8d {
  order: 7!important;
}
//hide title/image
.EXF8_ab7F {
display:none!important;
}

// hide 'posted on etsy'
._19HY3qkUe {
  display:none!important;
}
// remove divider line
._3JUIkAKJx {
  border: 0!important;
  opacity: 100%;
}

You want move this?

@tuanphan exactly! 

On 10/13/2021 at 6:44 AM, jdillagodzilla said:

@tuanphan exactly! 

 

Try adding to Last Line in Code Injection > Footer

<script>
$(document).ready(function() { 
		$('section.reviewsSection').appendTo('figure.ProductItem-gallery');
	});
</script>

Huh, I have the opposite problem -- that's how I'd like the product reviews to show up! Was there something you added to get it to show up right under the description?

On 3/7/2022 at 2:13 AM, tinyturk said:

Huh, I have the opposite problem -- that's how I'd like the product reviews to show up! Was there something you added to get it to show up right under the description?

Can you share link to a product? We can check it easier

On 3/10/2022 at 4:29 AM, tuanphan said:

Can you share link to a product? We can check it easier

Of course! Here's the link to one of my products: https://melikecarr.com/shop/p/palo-santo-holder

Is it possible to move the reviews to underneath the description? Also, is it possible to remove the line breaks and "posted on etsy" text?

On 3/12/2022 at 12:17 AM, tinyturk said:

Of course! Here's the link to one of my products: https://melikecarr.com/shop/p/palo-santo-holder

Is it possible to move the reviews to underneath the description? Also, is it possible to remove the line breaks and "posted on etsy" text?

Move this position?

On 3/13/2022 at 7:28 PM, tuanphan said:

Move this position?

Below the "add to cart" button if possible

On 3/17/2022 at 9:11 AM, tinyturk said:

Below the "add to cart" button if possible

Add to last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section.reviewsSection').insertAfter('div.sqs-add-to-cart-button-wrapper');
	});
</script>

Hmm that didn't seem to work

On 3/20/2022 at 4:58 AM, tinyturk said:

Hmm that didn't seem to work

Can you take screenshot all code in Code Injection (after added above code)?

Here it is. It just looks the same as it did before. Can the reviews go underneath the related products instead?

18 hours ago, tinyturk said:

Here it is. It just looks the same as it did before. Can the reviews go underneath the related products instead?

Try this new code

<script>
  $(document).ready(function() { 
     setTimeout(function(){
            $('section.reviewsSection').insertAfter('div.sqs-add-to-cart-button-wrapper');
         }, 3000);
	});
</script>

On 3/26/2022 at 4:29 AM, tuanphan said:

Try this new code

<script>
  $(document).ready(function() { 
     setTimeout(function(){
            $('section.reviewsSection').insertAfter('div.sqs-add-to-cart-button-wrapper');
         }, 3000);
	});
</script>

 

That worked but on mobile the reviews are showing up right under the photos instead of after the "add to cart" button.

Is it also possible to limit the initial number of reviews shown to 3? I'd also love to remove the "Posted on Etsy" text and the photos from etsy reviews

Try this new code

<script>
  $(document).ready(function() { 
     setTimeout(function(){
            $('section.reviewsSection').insertAfter('div.sqs-add-to-cart-button-wrapper');
         }, 3000);
	});
</script>
<style>
  img.reviewImg {
    display: none;
}
  p.sourceText {
    display: none;
}
  @media screen and (max-width:767px) {
  section.reviewsSection {
    order: 5;
}
  }
</style>

that worked! thanks so much!

hi there! 

This thread has been really helpful; thank you for posting.

Does anyone know how to remove the text/link above the product title that says "3,000 Store Ratings"

if you might be able to help, I'd SO appreciate!

On 8/8/2022 at 9:44 AM, moondesignco said:

hi there! 

This thread has been really helpful; thank you for posting.

Does anyone know how to remove the text/link above the product title that says "3,000 Store Ratings"

if you might be able to help, I'd SO appreciate!

Hi. Can you share link to this product?