Enhance Your Shopify Store’s Design with a Centered Collection Title
A well-organized and visually appealing Shopify store enhances user experience and boosts conversions. One common customization store owners seek is centering the featured collection title and adding decorative lines on both sides. This simple yet elegant tweak improves the aesthetics of your store, making your collections stand out. In this guide, we’ll walk you through the process of achieving this customization in Shopify.
“The best thing about Shopify? It lets small businesses dream big.”
Why Centering the Featured Collection Title Matters
By default, Shopify aligns collection titles to the left, which may not always match the store’s overall design. Centering the title with lines on both sides:
- Creates a balanced and professional look
- Draws attention to your featured collection
- Enhances readability and visual hierarchy
- Improves brand consistency
If you want your Shopify store to look polished and engaging, implementing this design tweak is a great step.
Steps to Center the Featured Collection Title with Lines on Both Sides
To achieve this effect, you’ll need to modify your Shopify theme’s CSS and Liquid code. Follow these steps carefully.
1. Locate the Featured Collection Section in Your Theme
- From your Shopify Admin panel, go to Online Store > Themes.
- Click Customize on your active theme.
- Identify the Featured Collection section where you want the title to be centered.
2. Modify the CSS to Center the Title
- Click on Actions > Edit Code.
- Navigate to the Assets folder and open the base.css, theme.css, or style.scss.liquid file (depending on your theme).
- Add the following CSS at the bottom of the file:
.featured-collection-title {
text-align: center;
position: relative;
font-size: 24px;
font-weight: bold;
margin: 20px 0;
}
.featured-collection-title::before,
.featured-collection-title::after {
content: “”;
display: inline-block;
width: 50px;
height: 2px;
background: #333;
vertical-align: middle;
margin: 0 10px;
}
3. Apply the CSS Class to the Featured Collection Title
Now, you need to apply this class to the featured collection title in your Liquid file.
- In the Sections folder, locate featured-collection.liquid.
- Find the line that outputs the collection title, which usually looks like this:
<h2 class=”section-title”>{{ section.settings.title }}</h2>
- Modify it as follows:
<h2 class=”featured-collection-title”>{{ section.settings.title }}</h2>
4. Save and Preview Your Changes
- Click Save in your theme editor.
- Go back to the Shopify theme customizer and refresh the page to see the changes.
You should now see your featured collection title centered, with decorative lines on both sides.
Additional Customization Options
If you want to tweak the style further, here are a few options:
Change Line Width and Color
Modify the width and background values in the CSS to change the size and color of the lines.
.featured-collection-title::before,
.featured-collection-title::after {
width: 70px;
background: #ff6600;
}
Adjust Spacing
Increase or decrease the margin values to adjust spacing between the lines and title.
.featured-collection-title::before,
.featured-collection-title::after {
margin: 0 15px;
}
Conclusion
Centering the featured collection title with lines on both sides in Shopify is a simple yet effective way to elevate your store’s design. By following these steps, you can create a more polished and professional look that enhances user experience and brand identity.
If you need further customization or Shopify development services, ShopifyEcommerce is here to help. Contact us today to optimize your store’s design and functionality!