Shopify themes, liquid, logos, and UX
On our default collection page in Craft 2.0, the theme does not provide options for alligning the header and sub-header. We want our header and sub-header centered on the page on all devices.
I already added this code to center the header (thanks to the posters of this code in the following thread):
Specifically, this is the code that I added to the base.css file.
.collection-hero h1.collection-hero__title { text-align: center !important; }
The code worked beautifully; however, I also need the text under the header centered as well. Here is an example collection where the text under the header is not centered:
Thanks, guys.
Solved! Go to the solution
This is an accepted solution.
Hi @TomMc
This is Lucas from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file -> Save
.collection-hero__text-wrapper {
display: flex !important;
flex-direction: column;
align-items: center !important;
}
Hope that my solution works for you.
Best regards,
Lucas| PageFly
Could you share your store URL to check?
I messaged you the info, Lucas.
This is an accepted solution.
Hi @TomMc
This is Lucas from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file -> Save
.collection-hero__text-wrapper {
display: flex !important;
flex-direction: column;
align-items: center !important;
}
Hope that my solution works for you.
Best regards,
Lucas| PageFly
You rock, Lucas.
It worked beautifully:
Hi Lucas, I'm having the same issue centering the collections text on my Shopify store using the Craft theme. I've tried adding this code to the base.css as well as a number of other .css codes to no avail. This is the website: https://treehoodies.com/collections/all. Any help resolving this would be greatly appreciated. Thanks!
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...
By JasonH Sep 2, 2024Note: Customizing your CSS requires some familiarity with CSS and HTML. Before you cust...
By JasonH Aug 12, 2024