Skip to main content

Widget Style Customization Guide

Introduction​

In the widget section, you can customize the bottom area using code to personalize your widget styles. This includes customization for star ratings, carousels, and other components.

Widget Customization Overview

1. Reviews Widget Settings​

1.1 Width and Margin Settings​

Modify widget width and margins:

.trustoo-reviews-wrapper > #vstar-reviews.trustoo-widget {
    max-width: 1600px; /* Maximum width is 1600px */
    padding: 0px 20px; /* Top/bottom padding 0px, left/right padding 20px */
}

1.2 Hide UI Elements​

Remove Sorting Button​

#vstar-reviews div.head-sort {
    display: none;
}
Hiding Sorting Button

Hide Photo Upload Option​

.trustoo-write-review .upload-area {
    display: none !important;
}
Hiding Photo Upload

1.3 Additional Widget Customizations​

Change Font to graphie-regular​

.trustoo-widget p,
.trustoo-widget button,
.trustoo-widget span,
.trustoo-widget div,
.trustoo-widget input,
.trustoo-widget textarea {
    font-family: 'graphie-regular';
}

Hide Widget for No-Review Products​

#noreviews-wrapper {
    display: none !important;
}
Hide No Reviews Widget

Remove Pagination​

#vstar-reviews #reviews-footer {
    display: none !important;
}
Remove Pagination

2. Star Rating Widget Settings​

2.1 Icon Size Settings​

Product Page Rating Icons​

.product-icon-list .star-item, 
.product-icon-list svg {
    width: 18px !important;
    height: 18px !important; /* Default size is 20px */
}
Product Page Star Icon Size

Collection Page Rating Icons​

.collection-icon-list .star-item, 
.collection-icon-list svg {
    width: 16px !important;
    height: 16px !important; /* Default size is 16px */
}
Collection Page Star Icon Size

2.2 Text Color Settings​

.product-icon-list.vstar-star > .tt-rating-text {
    color: white !important; 
    /* You can use color names, hex (#fff) or RGB values (rgb(255,255,255)) */
}

2.3 Margin Adjustments​

.product-icon-list.vstar-star {
    margin-top: 10px !important; /* Default top margin is 10px */
    margin-bottom: 10px !important; /* Default bottom margin is 15px */
}

2.4 Additional Customizations​

Show Review Tab on Left Side​

body > #vstar-tab {
    left: 0;
    right: initial;
    transform: translate(-50%, 0) rotate(-90deg);
    transform-origin: 50% 0%;
}
Review Tab on Left Side

Add More Space Under Star Rating​

div.collection-icon-list.vstar-star {
    margin-bottom: 15px;
}
Add Space Under Star Rating

3.1 Image and Text Carousel​

#tt-carousel[data-type=primary] {
    max-width: 1600px !important;
    padding: 100px 200px;
}

#tt-carousel[data-type=primary] .tt-card-footer .tt-reviews-image {
    width: 100px;
    height: 100px;
}

3.2 Text-only Carousel​

#tt-carousel[data-type=text] > .tt-swiper-wrapper {
    max-width: 1600px !important;
    padding: 100px 200px;
}
#tt-carousel[data-type=photo] > .tt-swiper-wrapper {
    max-width: 1600px !important;
    padding: 100px 200px;
}
#tt-carousel[data-type=barrage] > .tt-swiper-wrapper {
    max-width: 1600px !important;
    padding: 100px 200px;
}

3.5 Instagram Feed Width​

div#ins-area {
    width: 80%;
}
Instagram Feed Width

3.6 Reduce Review Size​

#vstar-reviews .list-review-body-item {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#reviews-body .star,
#reviews-body .list-review-body-item-head {
    margin-bottom: 10px !important;
}

#reviews-body .img-list {
    margin-top: 10px !important;
}
Reduce Review Size

4. Usage Tips​

Size Unit Options​

  • Use pixels (px) or percentages (%)
  • Consider responsive design requirements

Color Value Support​

  • Color names: white, black, etc.
  • Hexadecimal: #fff, #000000
  • RGB values: rgb(255, 255, 255)

Important Notes​

  • Use !important sparingly
  • Test across different screen sizes
  • Consider adding media queries for mobile responsiveness
  • Hidden elements will not be accessible to users

Best Practices​

  • Always preview changes before finalizing
  • Ensure consistency across different device types
  • Maintain a clean and intuitive user interface
  • Test customizations thoroughly