Hi there, I’ve created a custom page template, but need to know how to center the title and everything else on that custom page please. Just this template - not any others. Appreciate your help!
Hey @claribelskincar ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
.main-page-title {
text-align: center !important;
}
https://claribelskincare.com/pages/all-natural-eyelash-growth-serum
Please ignore the blurbs of text. I need the title and the text centered, as well as anything else on this particular page. It is a custom page, so it should not affect any other pages (hopefully). Thank you.
I don’t have this file.
This has to be wrong. I don’t have that file.
try:
- { text-align: center !important; }
or
- {align-items: center;}
Am I supposed to add this to my custom page template coding?
sorry, add to the Custom CSS of individual sections in the theme editor. click the section and scroll to the bottom (under padding). in this section you can edit most anything regarding the visuals like fonts, font size, font color, background color, margins, etc. etc.
You can do that by adding this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings.
#shopify-section-template--19196959916269__main-wide * { text-align: center; }
Hey there!
Great question! To center everything on just your custom page template, you’ll need to add some CSS that targets only that specific template. Here’s how:
Solution: Add template-specific CSS
- Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
- Find your custom page template file (likely in Templates folder, something like page.custom.liquid)
- Add this CSS at the top or bottom of that template file:
<style>
/* Center everything on this custom page only */
.page-width {
text-align: center;
}
.page-title,
.page__title {
text-align: center;
}
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6,
.rte p, .rte ul, .rte ol {
text-align: center;
}
/* Center any images */
.rte img {
display: block;
margin: 0 auto;
}
/* Center any buttons */
.btn {
display: block;
margin: 0 auto;
width: fit-content;
}
</style>
Alternative approach - if you want to be more specific, you can target by the page handle:
<style>
/* Replace 'your-page-handle' with your actual page handle */
.template-page .page--your-page-handle {
text-align: center;
}
.template-page .page--your-page-handle .page-width * {
text-align: center;
}
</style>
The page handle is the URL-friendly version of your page name (spaces become dashes, etc.).
Quick idea: If you’re planning to create more custom layouts or make other design changes, I actually developed Easy Edits that lets you visually center elements, adjust alignments, and customize pages without touching any code. Just click and drag to center everything exactly how you want it!
Try the first code snippet and let me know if everything centers properly for you!
I’m wondering if it’s a video, how can you align it centrally? The Video Banner that comes as a section withing Dawn theme is not clickable, so I’ve added some custom liquid to the page, but for some reason it aligns to the left. would appreciate any help 
Very generally, you can try the code below in “Custom CSS” of this section.
This should centre video inside its parent element.
Or share a link to a page where this video can be seen.
And ideally, start a new thread.
video {
margin-left: auto;
margin-right: auto;
}
Hello @claribelskincar,
Go to online store > edit theme > custom css
.title-wrapper-with-link,
.section-template–active .title,
h2.title {
justify-content: center !important;
text-align: center !important;
display: flex !important;
width: 100% !important;
}
.grid,
.product-grid {
justify-content: center !important;
display: flex !important;
}
.card__content,
.card__information {
text-align: center !important;
}
.collection__view-all {
display: flex !important;
justify-content: center !important;
}