Hello,
I need help with justifying the text for the complementary products section and increase the space between the 2 lines of text.
Left is what I’m trying to achieve, and right is what it looks like right now
The page URL is ELLE スナックボール グレー – meroware
Any help would be appreciated. Thanks in advance!
Hi @SIM_SX
You can fix both issues with a small CSS adjustment.
Go to Online Store Themes Edit code → base.css or theme.css and add
Complementary products text alignment
.product-recommendations .card information {
text-align: justify;
}
Increase space between title and price
.product-recommendations .card__heading {
margin-bottom: 8px; adjust as needed
}
.product-recommendations .price {
line-height: 1.6;
}
If it doesn’t apply, inspect the exact class names in DevTools and adjust the selectors accordingly.
Hi @SIM_SX
.complementary-products__container is just the outer wrapper, so it’s not the correct class to target the text.
To find the right one:
Right-click directly on the product title text
Click Inspect
Look for the element that directly wraps the text — usually something like:
<h3 class="card__heading">
or
<div class="price">
You want the class on that exact element, not the parent container.
In Dawn, it’s commonly:
.card__heading
.card__information
.price
.price-item
Once you confirm the exact class, you can target it specifically inside:
.complementary-products .card__heading {
text-align: justify;
line-height: 1.6;
}
That should work once the correct selector is used
I got it to work, thank you so much!! You’re a life saver