Hello. I’m trying to change logo position in ritual theme. Originally it centers the logo on hero. I want to change the location of logo to top left.
@Deck.and.Destiny In the Ritual theme, the logo position is usually controlled in the theme’s header settings:
Go to Online Store Themes Customize.
Open the Header section.
Look for Logo alignment or Logo position and select Top left.
If the option isn’t available, it may require a small CSS tweak to move the logo to the top left. I can guide you through that if needed.
Thank you for fast reply Eric. What I want to do is to control the positions of logo and texts in hero. Originally they are all centered but I need to change their locations. e.g. upward or leftward
@Deck.and.Destiny Thanks for clarifying
In Ritual, the hero logo and text positioning isn’t fully adjustable from the theme editor. By default, they’re locked to the center. To move them upward or left/right, you’ll need a small CSS adjustment targeting the hero content container.
This is safe to do and doesn’t affect the rest of the site. Once you tell me which hero section you’re using (Image banner, Slideshow, or Custom hero), I can give you the exact CSS code and where to add it.
It’s the image banner which I’m trying to handle.
@Deck.and.Destiny What you’re trying to achieve (text layered above the circle, another text below the card, and the logo positioned near the top-left inside the hero) goes beyond the Image Banner’s built-in layout options.
In the Ritual theme, the Image Banner content is rendered as one grouped container, not independent elements. That means:
the text, logo, and image are all positioned together
you can’t separately stack or move them (above / below / corner) using settings or simple CSS alone
To achieve this layout cleanly, a developer would need to:
split the hero content into separate elements
adjust the Liquid markup and structure
apply custom CSS positioning (and responsive rules for mobile)
This is why it’s considered theme customization, not just styling and it’s best handled by a developer to avoid breaking responsiveness or future updates.
I can explain exactly what files a dev would touch or help you scope this so it’s done efficiently and safely.
I think the main problem is to change the position of two text layers. I can omit the second text. and even I can handle the logo on the header. Now I just need to move one text box upwards and that’s all.
Even with just one text layer, the limitation is the same in the Ritual Image Banner. The heading and subtext are still wrapped inside a single centered container that’s positioned with flex rules from the theme. There isn’t a setting to move just the text upward independently.
To move it up cleanly, a dev would still need to:
target the Image Banner content wrapper
override the default flex centering
apply safe offset values (and responsive rules so it doesn’t break on mobile)
A quick CSS hack can force it upward, but it’s risky because it affects all image banners and often causes alignment issues on smaller screens.
That’s why this is still considered theme-level customization rather than a simple editor tweak. If done properly, it should be handled by a developer to keep the layout stable.
Got it Eric. Thank you for clarification. I’ll try another design.
I’m happy to be of help 