"Buy it with" function overlaying product reviews

Shopify Discussion
1

Hi,

I recently turned on the ‘buy it with’ function however on desktop (not an issue on mobile) it overlays the reviews section which is not a great customer experience, Is there a way that the Review section can be moved lower under the "buy it with’’ section?

error:

BMos_0-1683847279035.png
BMos_0-1683847279035.png1133×280 17.4 KB

thanks,

2

Hello @BMos ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Sections folder → product-template.liquid file
  • Scroll down the code until you find the section that displays the reviews. This section will typically be labeled with something like product-reviews or reviews.
  • Cut the code and paste it right below the section that displays the “buy it with” products.
  • Save changes

Hope this can help. Let us know if you need any further support.

OneCommerce team.

3

To achieve this, you would need to modify the code of your Shopify theme. Here’s a general approach you can follow:

  1. Identify the HTML structure: Locate the section or div that contains the “buy it with” section and the review section. You’ll need to identify the specific HTML elements that represent these sections. You can inspect the page using your browser’s developer tools to find the appropriate HTML structure.

  2. Adjust the layout: Once you’ve identified the HTML elements, you can modify their positioning using CSS. You may need to adjust the CSS properties such as position, top, bottom, margin, or padding to move the review section below the “buy it with” section. You can add custom CSS code to your theme to override the default styles.