Editing Yotpo Review Block

Store Design
, ,
1

https://qaptmusic.com/products/qapt-presents-phrases-for-addictive-drums-2

Hello is there a way to access the code for Yotpo’s widget? I cant seem to find it in the code

I want to remove the Bold Title (Because it says the same thing as the paragraph) and I want to change the color of the background (or remove it completely) and I want less padding, everything is a bit too large and intrusive

Where do I access it ? and what code should I type in?

2

Hi, @QAPT

Can you take a screenshot to describe your requirements? So that I can assist you.

3

hi, QAPT, good evening

You’ll need to edit the code, going to the place in the image below

Uhrick_0-1715918767369.png
Uhrick_0-1715918767369.png1740×726 108 KB

In the “assets” folder, look for a file with a general name, such as “base.css” or “general.css” or “styles.css”

Uhrick_1-1715918852205.png
Uhrick_1-1715918852205.png360×621 26.8 KB

And, at the end of the file, add this:

.yotpo-review-card .card-container {
    padding: 0;
    background: transparent;
}

.yotpo-review-title.yotpo-review-bold-title {
    display: none;
}

if this doesnt work, try

.yotpo-review-card .card-container {
    padding: 0 !important;
    background: transparent !important;
}

.yotpo-review-title.yotpo-review-bold-title {
    display: none !important;
}
4

@QAPT We cannot access the Yotpo’s widget code, instead we can override it using CSS to edit the yotpo review block. Please follow below steps for it and let me know whether it is helpful for you.

  1. From admin, go to “Online stores” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Go to “base.css” file and paste the below code at the bottom of the file and save changes.
    NOTE: You can change the background color as per your need.
.yotpo-review-bold-title {
  display: none;
}
.card-container{
  background-color: transparent !important;
  padding: 0px !important;
}

Vinsinfo_1-1715923505258.jpeg
Vinsinfo_1-1715923505258.jpeg800×357 35.8 KB

Result will be like,

Vinsinfo_0-1715923457600.png
Vinsinfo_0-1715923457600.png1200×451 467 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

5

Hello,

I am San from MS Web Designer.

Here is the solution:

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before

Do let me know in case of any concerns.

Regards,

San