How to display star ratings and percentage discount on product pages?

Store Design
1

Having a bit of trouble with this at the moment, any help would be GREATLY appreciated once again. I am trying to figure out how to add the star rating under the product title and/or the price, and I would also like to have “SAVE 40%” under or next to the sale price. Is anyone able to offer some much needed assistance please and thankyou. Store URL: https://prestigestorageco.com

Screenshot (11).png
Screenshot (11).png600×337 10.9 KB

2
  1. Add star rating to your Product page

Go to your Online store > Theme > Find the Theme that you’re using > Action > Edit Code

oscprofessional_2-1627388061450.png
oscprofessional_2-1627388061450.png864×389 90 KB

Search for product.liquid file (or product-template.liquid in some cases)

oscprofessional_3-1627388082441.png
oscprofessional_3-1627388082441.png844×401 39 KB

Then, find the following code in line (A):

{{ product.title }}​

oscprofessional_4-1627388102966.png
oscprofessional_4-1627388102966.png886×419 104 KB

Copy this code snippet (B):

Insert the code snippet (B) under the above code line (A):

oscprofessional_5-1627388210382.png
oscprofessional_5-1627388210382.png1065×413 108 KB

save now!
Please note that: product.liquid or product-template.liquid can be named differently due to a variety of themes.

3

For tag save 40%

dl.price.price--on-sale::after {
    content: "SAVE 40%";
    position: relative;
    font-weight: BOLD;
    top: 10px;
}

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