Knowledge base for reviews on your Shopify store

‍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 Pro Packages.‍

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

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

‍‍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

‍‍CSS:‍

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

‍‍CSS:‍

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

‍‍CSS:‍

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. 

‍‍CSS:‍

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.

‍‍CSS:‍

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!