Solved

Change place of title under product CRAVE

LukasSvensson
Tourist
3 0 2

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? 🙂 
Some coding? (I'm totally new on that, but the support team said that was the only way.) 

 

Best regards, 

Lukas

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
5127 1223 1497

This is an accepted solution.

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;
}

 

  • And Save.
  • Result: 
  • Made4uoRibe_0-1695422307335.png
  • Product pages. 

 

.product__title {
    text-align: center;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_1-1695422448893.png
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
5127 1223 1497

Hi @LukasSvensson 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


LukasSvensson
Tourist
3 0 2
Made4uo-Ribe
Shopify Partner
5127 1223 1497

This is an accepted solution.

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;
}

 

  • And Save.
  • Result: 
  • Made4uoRibe_0-1695422307335.png
  • Product pages. 

 

.product__title {
    text-align: center;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_1-1695422448893.png
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


LukasSvensson
Tourist
3 0 2

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

Worked out fine! 

JohnE10
Shopify Partner
101 11 16

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;
}

 

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com