Change place of title under product CRAVE

Shopify Discussion
1

Hey there!

I’m trying to change the place of the titles under the products, more specific in the centre under the products.
Now it is placed on the left side.
Have anyone an idea how to do/code? :slightly_smiling_face:
Some coding? (I’m totally new on that, but the support team said that was the only way.)

Best regards,

Lukas

1 Like
2

Hi @LukasSvensson

Would you mind to share your Store URL website? with password if its protected. Thanks!

1 Like
3

https://lukas.nu/password

hej123

:):slight_smile:

1 Like
4

Thank you for the information.

Im not sure which product title you want to center. I give two titles. The one is the collection page titles and other is the product page titles.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  • Collection pages.
.card__information {
    text-align: center;
}

.product__title {
    text-align: center;
}
1 Like
5

Ohh, so much thanks to you for the fast and big help!! < 3

Worked out fine!

6

Hi,

Yes, there is some coding involved, but just a little bit.

Here are the steps from your store’s dashboard:

  • Click “Online Store”
  • In the “Current theme” section, look to the right, there should be 3 dots next to a “Customize” button
  • Click the 3 dots and then click “Edit code” in the context menu that pops up
  • On the left column, there should a search box toward the top, type: base.css
  • Then click on the base.css file a little further down from the search box
  • This should open a file on the right with a whole bunch of code in it
  • Scroll down to the very bottom of that file and add the following code, just copy and paste from here:
/******************** center title and price under product image ******************************/
.card__information {
display: flex;
flex-direction: column;
align-items: center;
}
.price {
margin-bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
}

And hat’s it. Your product images will now have the title and price centered underneath them.

P.S. If you only want the title to be centered and not the price, then remove this part of the code from what you just added:

.price {
display: flex;
flex-direction: column;
align-items: center;
}