Centering Title of Product - DEBUT THEME

New Member
2 0 0

Hi guys,

New to shopify and e-commerce in general, and wanted to see if anyone can help me with the below.

I can't seem to center the product title on my DEBUT THEME. I've gone through the previous discussions and have added the below to my theme.scss.liquid:

}

.grid-view-item__title, .grid-view-item__meta {
  text-align: center;

}
.product-card .price {
    justify-content: center !important;
}

 

but so far only my price has been centered and not my product title. 

Is there someone who can advise?

Thanks,

Jen

0 Likes
Astronaut
952 116 219

I can't see your site because it's password protected, but I replied this to someone last week on debut theme and they said it worked for them. Add this to the bottom of the theme.scss.liquid file

.h4.grid-view-item__title--collection.product-card__title--collection {
    text-align: center;
    width: 100%;
}

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
2 0 0

Apologies, I didn't realize it was locked! The password is "rooyoh".

Thanks for your response! Unfortunately, that did not work for me. This is my code at the end of the theme.scss.liquid:

.grid-view-item__title, .grid-view-item__meta {
  text-align: center;

}
.product-card .price {
    justify-content: center !important;
}

.product-single__description {
    text-align: center;
}

.h4.grid-view-item__title--collection.product-card__title--collection {

text-align: center;
width: 100%;
}

 

0 Likes
Shopify Partner
14 0 6

 

Managed to get the text centered on the homepage, but it also centers text on the product page.  Just wanted to pass this along to you in case you do not mind the text being centered on the product page as well. Added text-align:center; to the class selector .grid

.grid {
  @include clearfix();
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -$grid-gutter;
  text-align: center; 

  @include media-query($small) {
    margin-left: -$grid-gutter-mobile;
  }
}

 

1 Like
Shopify Partner
14 0 6

I have been having the exact same issue! When I target the class selector .grid in the theme.scss.liquid and add text-align: center; it centers the text under the product collection, but it also alters the text to be centered on the product page (which looks terrible).

 

I tried adding the code snippet at the end of theme.scss.liquid as you suggested, and it didn't work for me either!  I included the code snippet that resulted in the screenshot below. I feel like this should be a simple enough fix, but I am definitely missing something. I just want the text centered beneath the products on the homepage, not on the individual product page. 

Screen Shot 2019-01-23 at 9.42.54 AM.png

 

.grid {
  @include clearfix();
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -$grid-gutter;
  text-align: center; 

  @include media-query($small) {
    margin-left: -$grid-gutter-mobile;
  }
}

 

0 Likes
Astronaut
952 116 219

Could you guys and gals post a link to your stores and passwords if protected? Since the update I don't see anyone's store under their username anymore. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
14 0 6
0 Likes
Astronaut
952 116 219

For your problem frankie, you can go into your product-template.liquid (which is in the Snippets folder despite being called a "Template") file and ctrl + f for "product-single__meta" and you should see this:

 

<div class="product-single__meta">

Add a class to it called "align-left":

 

<div class="product-single__meta align-left">

Then in your theme.scss.liquid file in your Assets folder scroll all the way to the bottom and add this to it:

 

.align-left{
text-align: left;
}

 

That will leave your text centered under your collection images, and left aligned on the products. The reason that happens is because the ".grid" class is going to be used throughout the website, so wherever that class is applied, it will align the text to the center unless overridden by another CSS class further down the line. You may want to avoid this. What I would do is delete what you changed in the .grid class and instead go into your collection.liquid and find:

 

<ul class="grid grid--uniform grid--view-items">

And do the same by adding a class to the end of it:

 

<ul class="grid grid--uniform grid--view-items align-center">

And then go into your theme.scss.liquid and add:

.align-center{
text-align: center;
}

Let me know if this works out for you.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
14 0 6

Thanks for the help Ninthony! 

 

I took your suggestion and eliminated the tex-align: center; from .grid. I added .align-center class to the bottom of the stylesheet.  When I went to collection.liquid, the code looked like this instead. 

 

      <ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items {% endif %}">
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li>

The section I am trying to manipulate was initially titled "Featured Products", so I am wondering if I am targeting the incorrect page and should instead be adding this new class to code in product-template.liquid or product-card-grid.liquid. 

 

Looking into it further, I think I located where the product title beneath the picture and the price (which i eliminated from the code) is in product-card-grid.liquid. Opened DevTools just to double check, and the text beneath the product image on the home page is indeed the div below with these class selectors. 

 

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

I tried adding the class we created (align-center) after product-card__title, and it is still not working! When I go directly to product-card__title in theme.scss.liquid and add a text-align: center; it does not center the text beneath the image on the homepage either! I am at a loss right now.

 

 

0 Likes
Shopify Partner
14 0 6

@Jennifer_Zhu and @Ninthony , I ended up targeting the .product-card in theme.scss.liquid and adding text-align: center; to that specific class selector and it worked! Now the title of my product is centered beneath the image on the homepage, but not on the individual product page! 

 

Thank you @Ninthony for all the help. I would have been spinning my wheels a lot longer if you had not helped me eliminate some of the other possibilities, 

 

.product-card {
  position: relative;
  text-align: center; 

  &:hover,
  &:focus-within {
    .product-card__image-wrapper {
      opacity: 0.8;
    }
2 Likes