Change theme star rating color on product grids
- In Edit Code, go to assets/component-rating.css
- Replace the following code:
.rating-star::before {
content: '★★★★★';
background: linear-gradient(
90deg, var(--color-rating-star) var(--percent),
rgba(var(--color-foreground), 0.15) var(--percent)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
with:
.rating-star::before {
content: '★★★★★';
background: linear-gradient(
90deg,#ffd500 var(--percent),
rgba(var(--color-foreground), 0.15) var(--percent)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Related Articles
Change Sale Badge to % off
In card-product.liquid {% comment %} {{- 'products.product.on_sale' | t -}} {% endcomment %} {%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%} Save {{ ...Change background color for each column in a multicolumn
In the multicolumn section, add the following custom css: li:nth-child(1) .multicolumn-card__info { background-color: red; color: white; } li:nth-child(2) .multicolumn-card__info { background-color: green; color: white; } li:nth-child(3) ...Add “Description” title before the description on product page
Add a custom liquid section in product page after add to cart button. Insert the following liquid in the custom liquid. {% if product.description != '' %} <br> <h3 style="color: #EC1C24; font-weight: 600;">DESCRIPTION & SPECIFICATIONS</h3> {% endif ...Highlighting one menu link with a distinct color
In the header, add in custom css as followings: a[href^="/pages/contact-us"] {color: #33ff00 !important;}Insert product weight into product page
In custom liquid, insert the following: Weight: {% for variant in product.variants %}{{variant.weight | weight_with_unit }}{% endfor %}