How to reposition LAYBUY details on the product page?

Shopify Discussion
1

Hi there,

I’m unable to set up a Sale price on my products as the Sale price on the product page is appearing below the LAYBUY details (which is confusing to the customers).
I want the sale price to appear next to the full price (striked through price).
I have attached an example here. Could you please help me to reposition the LAYBUY below the SALE price.
Need to get this sorted urgently. Please help.

2023-02-21 (2).png
2023-02-21 (2).png1016×530 260 KB

2

Hello! To reposition the LAYBUY section on your product page, you would need to modify the theme’s code. This can be a bit tricky, especially if you don’t have experience with coding, so it’s important to proceed with caution and back up your theme files before making any changes.

Here’s a general guide on how to achieve what you’re looking for:

  1. From your Shopify admin, go to “Online Store” > “Themes” > “Actions” > “Edit Code”.
  2. In the left sidebar, open the “Sections” folder and click on the “product-template.liquid” file.
  3. Look for the section of code that displays the sale price and LAYBUY details. It may look something like this:

phpCopy code
{% if product.price < product.compare_at_price %} <p> <span class="product-price__price product-price__sale">{{ product.price | money }}</span> <span class="product-price__price product-price__compare">{{ product.compare_at_price | money }}</span> </p> <p>{{ 'laybuy-fragment' | t }}</p> {% else %} <p><span class="product-price__price">{{ product.price | money }}</span></p> {% endif %}

 
  1. To move the LAYBUY details below the sale price, you can modify the code to look like this:

phpCopy code
{% if product.price < product.compare_at_price %} <p> <span class="product-price__price product-price__sale">{{ product.price | money }}</span> <span class="product-price__price product-price__compare">{{ product.compare_at_price | money }}</span> </p> <div class="laybuy-details">{{ 'laybuy-fragment' | t }}</div> {% else %} <p> <span class="product-price__price">{{ product.price | money }}</span> <div class="laybuy-details">{{ 'laybuy-fragment' | t }}</div> </p> {% endif %}

 
  1. Save the changes to the file and preview your product page to see if the LAYBUY section has been moved below the sale price.

Note that the exact code you need to modify may vary depending on your theme and the way it handles pricing and LAYBUY details. If you’re unsure about any part of this process, it may be a good idea to consult with a Shopify expert or developer who can help you make the necessary changes safely and effectively.

1 Like
3

hallo @LetsCraft888

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

**.product-single__price--compare-at {**
**display: inline-block;**
**float: left;**
**margin-right: 10px;**
**}**

**.product-single__price--sale {**
**display: inline-block;**
**float: left;**
**color: #e74c3c;**
**}**

If you require any further information, feel free to contact me.

Best regards,

1 Like
4

@LetsCraft888

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
5

Hello @LetsCraft888 ,

We are OneCommerce - an eCommerce Solution Platform.

To reposition the sale price on your product page, you will need to edit the code of your Shopify theme. Here’s how:

  • Go to Online Store → Themes → Action → Edit Code
  • In the code editor, look for the file that controls the layout of your product page. This may be called “product-template.liquid”.
  • Find the section of code that controls the display of the product price. This may include code for the regular price, the sale price, and any additional details like the LAYBUY information.
  • you can try adding some CSS code to adjust the position like this:
.product-single__price--compare-at {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

.product-single__price--sale {
  display: inline-block;
  float: left;
  color: #e74c3c;
}
  • Save and preview.

Hope this can works. Please hit the Like Button or mark this as Accepted Solution to let us know, it means a lot to us.

Regards,

OneCommerce team.

1 Like
6

Hi everyone. thank you for your help. :+1: Laybuy support is going to make the changes to the code.