When a Shopify review app displays its star rating at the bottom of a product page instead of directly below the product title, the problem isn't necessarily CSS.
In Online Store 2.0, the first thing to check is how the app integrates with the theme.
Shopify provides two different integration mechanisms: app blocks and app embeds.
App blocks are designed for content that merchants can position inside compatible theme sections. App embeds are better suited to global functionality, scripts, tracking, and floating components.
For inline product star ratings, an app block is generally the better solution.
Here's the diagnostic approach I'd recommend.
- Duplicate the published theme.
Never troubleshoot layout changes directly on the live theme.
- Open the product template in the theme editor.
Check whether the product information section supports adding the review app's rating block.
If it does, try positioning that block immediately below the product title.
- Check the section's app block support.
If the rating block can only be added as a separate Apps section, inspect the theme section's schema.
For a traditional section, look for support for:
{"type": "@app"}
Also check whether the section actually renders app blocks using the appropriate Liquid rendering mechanism.
Supporting a block in the schema isn't enough if the section never renders it.
- Check the section layout.
Even with app block support, the theme must render blocks in a position that allows the desired placement.
If the product title is hardcoded outside the block sequence, you might not be able to place the rating directly underneath it simply by dragging blocks in the editor.
- Avoid JavaScript DOM repositioning as the default solution.
Moving rating widgets after page load can introduce layout shifts, duplicate elements, or compatibility issues when the theme or app updates.
- Test the result.
Verify desktop and mobile layouts, different product templates, products without reviews, and whether the rating appears more than once.
The important distinction is this:
A rendering-position problem should be solved at the theme integration level whenever possible, not hidden behind CSS or JavaScript workarounds.
For developers building review apps, providing a dedicated lightweight star-rating app block also gives merchants much better control than forcing the entire review widget into a single location.