Placing a "Star Rating" on a product on the products page of a collection

Store Design
, ,

Topic summary

Goal: show a selectable “star rating” (text box/divider under product name) on each product card within collection pages.

Context: Store URLs shared; screenshots provided to illustrate placement under the product title and above Add to Cart.

Data source options discussed: manual entry per product, product variant, or product description. Clarifying question asked about where ratings will be fetched; merchant prefers manual control.

Proposed solution: use product tags (e.g., “1 star”, “2 star”, etc.) and add custom Liquid code in the collection product item template.

  • Implementation: insert a Liquid loop after the product title to check product.tags and output matching rating text.
  • Provided snippet covers 1–5 stars; merchant originally mentioned 6 stars as well. The snippet can be extended to include “6 star”.

Technical notes: Liquid is Shopify’s templating language; product tags are metadata you add per product in the admin. Styling (divider/box) would be handled via CSS after the text output.

Status: approach agreed (manual tags + custom Liquid); code snippet supplied; no confirmation of deployment yet. Action items: tag each product with the appropriate star tag, add/extend the Liquid snippet, and style the divider via CSS.

Summarized with AI on December 27. AI used: gpt-5.
1

Hi, I’m trying to put a box/and or text below the product name on the products page of a collection that shows the options of our star ratings of meat.

Shop URL: shop.meatonline.com.au

For example:

productpage.png
productpage.png170×300 28.9 KB

Placing a Divider or similar between the Text and Add to Cart button, and being able to add in some text that says “6 Star, 5 Star, 4 Star, 3 Star, 2 Star, 1 Star”

Then if available, being able to easily change this selection between the different star ratings for each product would be amazing too.

Either done through liquid, pages, CSS, or anyway?

2

Hi, @MeatOnline

Can you share the store URL and take a screenshot to describe your requirements? So that I can assist you.

3

The store URL is shop.meatonline.com.au or 5b74e0.myshopify.com

productpage2.png
productpage2.png248×384 64.1 KB

I’m looking to put a box/and or text below the product name on the products page of a collection that shows the options of our star ratings of meat.

Placing a Divider or similar between the Text and Add to Cart button, and being able to add in some text that says “6 Star, 5 Star, 4 Star, 3 Star, 2 Star, 1 Star”

Then if available, being able to easily change this selection between the different star ratings for each product would be amazing too.

Either done through liquid, pages, CSS, or anyway?

4

@MeatOnline - from where will this ratings be fetched?

5

Either manually entered for each product through some way, or from a variant or even descriptions of the product.

6

@MeatOnline - it can be done by using a tag for your product, but it will need manually adding tag to EACH product and some custom code editing

7

I’m fine with using a tag for the product, actually makes it easier :+1:

Just need help with the custom code to fit the spot in there, and preferably with a small divider

8

@MeatOnline - add this code after your title code and check

{% for t in product.tags %}
{% if t contains '1 star' %}
1 star
{% endif %}

{% if t contains '2 star' %}
2 star
{% endif %}

{% if t contains '3 star' %}
3 star
{% endif %}

{% if t contains '4 star' %}
4 star
{% endif %}

{% if t contains '5 star' %}
5 star
{% endif %}
{% endfor %}