How to Center Product Titles and Prices in Shopify Debut Theme

Are you struggling to center align your product titles and prices on your Shopify store’s collection pages? You’re not alone. Many Shopify store owners using the Debut theme face this challenge. In this comprehensive guide, we’ll walk you through the process of centering your product titles and prices, adjusting font sizes, and removing unwanted styling elements. Let’s dive in!

Understanding the Problem

The Default Layout

By default, the Shopify Debut theme aligns product titles and prices to the left on collection pages. While this layout works for some stores, many owners prefer a centered alignment for a more balanced and aesthetically pleasing look.

The Importance of Visual Harmony

Centering product information can create a more cohesive and professional appearance for your online store. It can also improve the overall user experience by presenting product details in a more organized and visually appealing manner.

Common Challenges

Store owners often encounter difficulties when trying to modify the default styling. These challenges may include:

1. Inconsistent alignment across different pages
2. Unwanted styling elements like underlines on hover
3. Misalignment of prices and titles

The Solution: Custom CSS

The Most Effective Approach

The most reliable way to center align your product titles and prices is by adding custom CSS to your theme. This method allows for precise control over the layout without affecting other aspects of your store’s design.

Implementing the CSS

To center align your product titles and prices, add the following CSS code to your theme’s theme.scss.liquid file:

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
  align-items: center;
}

.h4.grid-view-item__title.product-card__title {
  text-align: center;
  width: 100%;
  display: inline-block;
  text-decoration: none;
}

.product-recommendations__inner dl.price {
  display: block!important;
  text-align: center;
}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}

This code will center your product titles and prices on collection pages and in product recommendations. It also removes the underline that appears when hovering over product titles.

Adjusting Font Sizes

To adjust the font sizes of your product titles and prices, you can add additional CSS rules. For example:

.product-card__title {
  font-size: 18px; /* Increase title font size */
}

.price {
  font-size: 14px; /* Decrease price font size */
}

Adjust the pixel values to achieve your desired font sizes.

Fine-Tuning Your Layout

Centering Prices on Collection Pages Only

If you want to keep prices left-aligned on product pages while centering them on collection pages, add this CSS:

.template-product dl.price {
  align-items: flex-start;
}

Removing Border on Hover

To completely remove the border that appears when hovering over product titles, use this CSS:

.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}

Aligning Recommended Products

If you notice that recommended products are not centered, add this CSS:

.product-recommendations__inner dl.price {
  display: block!important;
  text-align: center;
}

Troubleshooting Common Issues

Misaligned Prices

If your prices appear slightly off-center, try adding this CSS:

.price dd {
  margin: 0 -0.5em 0 0 !important;
}

Centering Issues on Mobile Devices

For better mobile responsiveness, consider adding media queries to your CSS:

@media screen and (max-width: 749px) {
  /* Add mobile-specific styles here */
}

Removing the “Sale” Label

To remove the “Sale” label throughout your site, you’ll need to modify your theme’s liquid files. Look for code related to sale badges and comment it out or remove it entirely.

Advanced Customizations

Changing Text Color on Hover

To change the color of product titles when hovering, add this CSS:

.product-card:hover .product-card__title {
  color: #your-desired-color;
}

Replace #your-desired-color with the color code of your choice.

Adding “Add to Cart” Buttons on Collection Pages

Adding “Add to Cart” buttons to collection pages requires more extensive modifications to your theme’s liquid files and JavaScript. It’s recommended to consult with a Shopify expert or developer for this level of customization.

Customizing Collection Headers

To style your collection headers, you can use CSS like this:

.collection-header h1 {
  background-color: #000;
  color: #fff;
  padding: 5px;
  text-transform: uppercase;
}

This will create a black background with white text for your collection titles.

By following these steps and customizations, you’ll be able to create a beautifully centered layout for your product titles and prices in the Shopify Debut theme. Remember to always test your changes across different devices and browsers to ensure a consistent experience for all your customers. Happy styling!