Hello guys, how can I start a new line for the stars here?
Topic summary
A Shopify store owner needed help moving star ratings to a new line in their product review display. The stars and reviewer name (“Peter. S ☆☆☆☆☆”) were appearing on the same line.
Technical Issue:
- The text and stars were contained within a single
<p>tag - Multiple helpers requested the store URL and password to investigate
- The store owner provided access to nistore.de with password “nikthe”
Proposed Solutions:
- DaisyVo provided CSS code to be added to the theme.liquid file above the
</head>tag - htmlBurger and oscprofessional explained that since elements share the same tag, HTML modification would be needed (adding
<br>tags or restructuring elements) - Pure CSS solutions were noted as insufficient without HTML changes
Resolution:
The issue was resolved using DaisyVo’s CSS solution, which the store owner confirmed worked successfully.
1 Like
Can you share your store url (with password, if any) with us?
Hi @NikosBat ,
Could you please share your store URL? If it is password-protected, kindly provide the password as well.
1 Like
Hello @NikosBat
Can you please share your store URL so I can look into this? If the store is password-protected, please share the store password as well.
1 Like
Hello Oscprofessional, sure here is the url and password:
nikthe
Hello HtmlBurger, sure here is the url and password:
nikthe
Hi @NikosBat
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ
Here is the code for Step 3:
{% style %}
.swiper-slide.swiper-slide-fully-visible.swiper-slide-active > div:nth-child(2) > p {
border: 1px solid red !important;
}
{% endstyle %}
Please let me know if it works. Thank you!Best,
Daisy - Avada Support Team.
1 Like
Hello @NikosBat
Thank you for sharing the details. It seems that the stars are added as text and they are part of the same element as the title. Which means that there isn’t a good way to split them into a separate row.
Do you manually add the text for these cards? If this is the case, we can figure out a clean solution.
1 Like
As we have checked, the text “Peter. S ☆☆☆☆☆” is contained within a single
tag. To display the stars on a new line, you will need to modify the HTML structure. If you have access to the code, you can achieve this by adding a line break (
) or separating the elements into different tags.
Without editing the HTML structure, it is not possible to force a line break purely through CSS.
Thank you!
1 Like
Thank you DaisyVo, that solved my problem.
Hello HtmlBurger, thanks for your time and interest I have already found the solution.
Thank you very much Oscprofessional, I appreciate it.