We are live on
Would love your support.

How to use custom CSS for Shopify product reviews?

Changelog Thumb

The review section of your store is a crucial component that gives it credibility and helps in gaining the customer's trust. In this documentation, we will explore the custom CSS that you can use to adjust the design of your review section to suit your brand and store's aesthetics. Regardless of your CSS skills, this will surely help you modify the appearance of the review section of your Shopify store. 

Please note that this feature is only available on ReviewXpo Premium Plans.

So let’s see how the ReviewXpo review section looks when used in a default version.

Review Summary Area and Review List_Screenshot

Once you click on the “Write a review” button, you will see the review submission form.

Review Form_Screenshot

So, as you can see we have divided the review section into three parts for better understanding. 

  1. Review Summary Area
  2. Review List
  3. Review Form

Now we will look into each part and explore the CSS you will need to customize your Shopify store review section.

  • Review Summary Area

For the “Review Summary Area”, ReviewXpo is offering three styles that you can use. Below, we will be demonstrating the styles and the available CSS you can use to customize each of them.

1. Summary Style - Top

Summary Style - Top_ Screenshot


  1. rvxp_top_container
  2. rvxp_top_title
  3. rvxp_preview_write_review_btn
  4. rvxp_preview_write_review_btn_content
  5. rvxp_stat_inner_container
  6. rvxp_stat_header
  7. rvxp_stat_wrapper_container
  8. rvxp_stat_summary
  9. rvxp_stat_summary_rating_icon
  10. rvxp_stat_summary_container
  11. rvxp_stat_progress_container
  12. rvxp_preview_top_container
  13. rvxp_preview_top_title
  14. rvxp_preview_dropdown_container

2. Summary Style - Dropdown

Summary Style - Dropdown_ Screenshot


  1. rvxp_top_container
  2. rvxp_top_stats_and_star
  3. rvxp_stats_dropdown
  4. rvxp_avg_rating_preview
  5. rvxp_preview_top_container
  6. rvxp_preview_write_review_btn
  7. rvxp_preview_write_review_btn_content
  8. rvxp_stat_inner_container
  9. rvxp_stat_header
  10. rvxp_stat_summary
  11. rvxp_stat_summary_rating_icon
  12. rvxp_stat_summary_container
  13. rvxp_stat_progress_container

3. Summary Style - Left

Summary Style - Left_ Screenshot


  1. rvxp_top_container
  2. rvxp_top_title
  3. rvxp_preview_dropdown_container
  4. rvxp_preview_write_review_btn
  5. rvxp_preview_write_review_btn_content
  6. rvxp_stat_inner_container
  7. rvxp_stat_header
  8. rvxp_stat_summary
  9. rvxp_stat_summary_rating_icon
  10. rvxp_stat_summary_container
  11. rvxp_stat_progress_container

Here, you can use these CSS to modify your Review Summary Area to your preference. And to learn more about how you can customize your Review Summary Area check, How to design your review section with ReviewXpo’s advanced widget customization panel?

  •  Review List 

Now let’s move to the second section “Review List”, and explore the available CSS you can use to modify this section. 

Review List Detailed_Screenshot


  1. rvxp_review_card_style
  2. rvxp_reviewer_name_container 
  3. rvxp_reviewer_name 
  4. rvxp_review_created_time
  5. rvxp_gravater
  6. rvxp_review_rating
    6.1. rvxp_review_rating svg
  7. rvxp_review_attachments_container
  8. rvxp_review_feedback
  9. rvxp_review_reply_heading
  10. rvxp_review_review_reply_accent
    10.1. rvxp_review_review_reply_accent svg
  11. rvxp_review_replier_name
  12. rvxp_review_owner_reply
  • Review Form

As for the third section, we have the “Review Form”. Now let’s go into details about the CSS you can use to modify the review submission form.

Review Form Details_Screenshot


  1. rvxp_form_container
  2. rvxp_form_top_container
  3. rvxp_form_top_title
  4. rvxp_form_close_btn
  5. rvxp_form_product_details
  6. rvxp_form_product_image
  7. rvxp_form_product_title
  8. rvxp_form_product_rating
    8.1. rvxp_form_product_rating_btn
  9. rvxp_form_review_title
  10. rvxp_form_review_title_name
  11. rvxp_form_review_title_field input
  12. rvxp_form_reviewer_feedback
  13. rvxp_form_review_feedback_name
  14. rvxp_form_review_feedback_field textarea
  15. rvxp_form_reviewer_name
  16. rvxp_form_reviewer_name_title
  17. rvxp_form_reviewer_name_field input
  18. rvxp_form_reviewer_email
  19. rvxp_form_reviewer_email_title
  20. rvxp_form_reviewer_email_field input
  21. rvxp_form_review_attachments
  22. rvxp_form_review_attachments_title
  23. rvxp_form_review_attachments_field
  24. rvxp_form_submit_button
    24.1. rvxp_form_submit_btn

Customizing the review section using custom CSS involves modifying the code of your store's theme, so it's important to be cautious. Additionally, it's recommended to have some basic knowledge of CSS and HTML to ensure that the modifications are implemented correctly. However, with the proper approach and focus, customizing your Shopify store's review section with custom CSS can help increase the appeal of your store and give your customers a better shopping experience.

For further queries please contact us, we'll always be there to help you!