Dawn Theme : Judge.Me app review widget layout

Topic summary

A Shopify store owner using the Judge.me review app seeks to replicate a card-style review widget layout they saw on another site. They’re currently on the free plan and want to know if this layout is achievable.

Two solutions emerged:

  • Custom CSS approach: A community member provided CSS code to modify the review widget layout for desktop screens. The code creates a flexbox layout with horizontal card arrangement. However, the original poster reports the CSS isn’t working properly on mobile and isn’t reflecting in the desktop version despite being added to base.css.

  • Official Judge.me solution: A Judge.me representative confirmed the desired “Cards” theme is part of their Awesome plan ($15/month). They can access it via Widgets > Review Widget > Customize > Theme in settings. A 15-day free trial is available to test before committing.

Current status: The discussion remains open, with the CSS solution encountering implementation issues and the paid plan option presented as the official alternative.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

Hi

I am currently using judge.me for me product reviews . My current layout looks like this:-

My website link : https://f40566-d3.myshopify.com/products/dare-pong

I know this site also uses judge.me and i really like their layout:-

Link for this website : https://dring.in/products/drings-bestsellers-kit?variant=45344822100138

This is the review widget for the judge.me app. Can someone help me with how can i turn my layout to be like this and also if this is a paid feature. I am currently using the free version.

Thanks in advance!!

1 Like

Hi @RaghavGoel1

CXheck this one

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 989px){
.jdgm-rev-widg__reviews {
    display: flex;
    flex-direction: row;
    gap: 20px;
    border-bottom: 0;
}
.jdgm-rev.jdgm-divider-top.jdgm--done-setup {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid rgba(51, 153, 153, 0.1);
    border-color: var(--jdgm-secondary-color);
}
.jdgm-rev__content {
    display: flex;
    flex-direction: column-reverse;
}
.jdgm-rev__pic-link {
    width: 300px;
    height: 300px;
}
}

And Save.

Result:

This will show only on the dekstop screen.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Hello @RaghavGoel1 ,

This review widget theme is indeed part of our Awesome plan ($15/month) - and you can find the themes we offer by going to your Judge.me settings at Widgets > Review Widget > Customize > Theme (or, click here: https://judge.me/shop/widgets/review-widget) and select the Cards theme.

You can find some examples of the themes we offer here: Review Widget themes (widget 3.0). If you’d like to give the Awesome plan a try before committing, feel free to use to click the following link, in order to claim a 15-day trial period.

Otherwise, if you prefer having more of a customized approach; @Made4uo-Ribe solution would work as well I believe.

In case you would prefer a more direct communication, you can reach out to our support team at support@judge.me, or, you can send us a message via chat once you access the app.

Hi @Made4uo-Ribe

Thanks for the help, but i primarily wanted the design for the mobile. Also the code in base.css is pasted but not reflecting in the desktop version.