I’m trying to centralize the cell phone’s headers, I’ve seen several codes on the internet but none of them worked. I want to centralize “Productos Relacionados”, “Más Vendidos” and “Descuentos Imperdibles”. Can anyone help me?
Topic summary
Issue: A Shopify store owner wants to center mobile headers for “Productos Relacionados” (Related Products), “Más Vendidos” (Best Sellers), and “Descuentos Imperdibles” (Unmissable Discounts).
Initial Solution Attempt:
- Dan-From-Ryviu provided CSS code to add to the theme.liquid file under the
<head>element - This partially worked but failed to center the “Related Products” header
- The code only worked on desktop, not mobile devices
Working Solution:
Made4uo-Ribe provided a targeted fix:
- Navigate to: Online Store > Themes > Actions > Edit code
- Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add this CSS at the bottom:
h2.related-products__heading.inline-richtext h2 {
text-align: center !important;
}
Status: Solution provided for centering the “Related Products” header specifically. The user was asked to mark the helpful post as a solution.
1 Like
Hi @KhallP
Please go Online store > Themes > Edit code > open theme.liquid file, add this code under element
Thank you very much, it worked, but the “Related Products” header is still missing
Please update the code
For some reason the “Related Products” code does not work
The code works on desktop but not on mobile
Hi @KhallP
For the “Related products”
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
h2.related-products__heading.inline-richtext.h2 {
text-align: center !important;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!