How to Align Center my Product Names

New Member
3 0 0

Hello to everyone!

I was just setting up my store and I would prefer to have my product names aligned Center instead of default (Left)

I have minimal theme. There are other guides about that here in shopify community but as Support Shopify told me they are a little bit outdated. If someone could help me with this I would appreciate that a lot!

 

Best, Regards. :)

0 Likes
Shopify Staff
Shopify Staff
440 23 63

Hi, Ali.

This is Dallas from the Social Care Team here at Shopify. 

I would be more than happy to help you get the product title and price all centered for you. It will require a bit of coding, however, it is pretty simple. 

The first thing that you will need to do will be to go to the code for your site. It can be found by clicking Online Store > Themes in your Store Admin. Go to your Minimal theme and select Action > Edit Code. This will bring you to the code sheets that make up your site. 

Now you will need to look on the left-hand side and select Assets > theme.scss.liquid

Around line 1188 you will see a section that looks like this:

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;
}

The easiest thing to do would be to type Command + F on Mac or Control + F on Windows and start typing the above into the search bar until you find it. 

Once you have found it you are going to need to put this line in:

text-align: center;

So that it will look something like this:

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;
  text-align: center;
}

Just be sure to hit Save and you will be good to go. 

If you'd rather not do this yourself you can always send us an email and we can look into doing this for you since your theme is supported by Shopify. If you would like us to do it for you, you can send us an email to support@shopify.com from the account owner email on file. In that message body, you can let us know what it is that you want to be done and we can dive right in and see what we can do for you. 

If you have any more questions for me please let me know. I will be more than happy to help you further. 

Cheers,
Dallas

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
3 0 0

Hello, :)

Thanks for the quick reply, and detailed instructions.

I went to the Assets theme.scss.liquid  , then I clicked CTRL+F and I copy pasted the part of the code you mentioned above in order to find it quicker but it doesn't exist that part,

I also wrote ".grid-link__title"   but that class doesn't exist either. 

You can see more details in the screen shot below :) 

0 Likes
New Member
3 0 0
Shopify Staff
Shopify Staff
440 23 63

Hi, Ali. 

Thank you for attaching this image. That is interesting that it isn't showing up. 

I can take a look at this for you, however, I will need to take a look at the inside of your site. I am going to send an email to the email attached to this forum account. Can you reply to that email from the account owner email on file and also let me know what the .myshopify.com domain is for the store in question. 

From there I will be able to take a closer look for you. 

Dallas

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
19 0 0

To align center Assets > theme.scss.liquid and search for grid-view-item__link line 2610

Add the text-align: center;

.grid-view-item__link {
  display: block;
  text-align: center; 
}

This worked for me

0 Likes
Shopify Staff
Shopify Staff
440 23 63

Wonderful! I am so glad to hear that it worked. 

If you have any more questions please don't hesitate to let me know. Or if you would like to contact our live support gurus you are welcome to do that as well as they are here 24/7 to answer any of the questions that you may have. 

Best,
Dallas

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes