How do I move the product rating to the same line as the title? Specifically, how do I move it to the right of the title and remove the space between the title and description?
Topic summary
A user wants to reposition the product rating to appear on the same line as the product title, specifically to the right of it, while removing excess spacing between the title and description.
Two solutions were provided:
-
HTML/CSS modification approach: Wrap both elements in a container div and use
display: flexwithalign-items: centerto align them horizontally. -
CSS-only solution (recommended): Use the theme’s “Custom CSS” setting to avoid direct code editing. This approach uses flexbox on the
safe-stickyelement with specific width calculations to position the title and rating side-by-side. The solution includesflex-wrap: wrapand CSS variables to control the rating width.
Screenshots demonstrate the CSS-only implementation showing the rating positioned next to the title. The discussion remains open with no confirmation of which solution was implemented.
To move the product rating next to the title in Shopify Btwu
HTML
<div class="product-title-container">
<h2 class="product-title">{{ product.title }}</h2>
<span class="product-rating">{{ product.metafields.reviews.rating }}</span>
</div>
CSS
.product-title-container {
display: flex;
align-items: center;
}
You can do this with CSS and use “Custom CSS” setting of the section to avoid editing the theme code.
Try this custom CSS:
safe-sticky {
display: flex;
flex-wrap: wrap;
--rating-width: 3rem;
}
safe-sticky > * {
width: 100%;
}
safe-sticky > .product-info__title {
width: calc(100% - var(--rating-width));
}
safe-sticky > .product-info__rating {
width: var(--rating-width);
}
