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) ...Display bundle items in product page
Add Metafields to Bundle Product Example metafield: Namespace & key: custom.bundle_items Type: List of Products (this is the ideal type for linking individual Shopify products) Assign Metafields to Bundle Product: Go to the bundle product in your ...Request for Quote button in product page
In customize theme, add custom liquid in default product template. Please the code as below. Note: the rule is when the price is '0'. {% if product.selected_or_first_available_variant.price == 0 %} <a href="https://wa.me/60162261314?text={{ 'I would ...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 ...