Centering Title and Price of product within Custom Content of Debut theme on homepage

New Member
3 0 0

Hi, 

 

I'm trying to create a store with just one product on the homepage. Right now, I'm doing this by using a Custom Content section with Product subsection. However, when I add my product and set the container width to 100%, the image centers but the text for the Title and the Price are aligned left. 


Does anyone know of a way to center the Title and Price as well? 

 

My store name is www.shopforthewin.com. 

 

Best,

Sungho

0 Likes
Navigator
358 39 40

add this css at end of your theme.scss file and it should work

 

.template-index .product-card__title, .template-index .price{ display: block; text-align: center; width: 100%;}

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
New Member
7 0 0

Hey I am trying to accomplish the same and have tried this solution but does not work. Any other suggestions. I started a post with the same problem if you want to read it and see where I am coming from.

0 Likes
New Member
7 0 0

Also theSungho, I have seen the product in your store is now centered, did the solution given work for you? or did you find another way?

0 Likes
Shopify Expert
2490 417 525

HI @ivanricsan  and @theSungho  if you add  suyash1 's given css in Asset->theme.scss file at bottom it will work fine. 

If not then send me your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
7 0 0

 

Hello, I have added the code but it doesnt work.

 

Here is a url to my store: https://tic-wtach.myshopify.com/

 

and here a few screenshots of my sections:Screenshot 2019-12-25 at 03.48.09_bad.png

you can see the sections are custom content. Inside each custom content is what I show below.

 

The text section (which has option for horizontal alignment):

Screenshot 2019-12-25 at 03.47.42.png

And the product section which aligns to the left and is what im trying to fix:

Screenshot 2019-12-25 at 03.47.29.png

 

This is ideally how it would be (note this has been done in photoshop and the current website looks like the first photo):

 

 

Screenshot 2019-12-25 at 03.48.09.png

 

 

 

0 Likes
Shopify Expert
2490 417 525

Add this css:

.custom__item--1576636955542{margin: 0 auto;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
7 0 0

That worked, thank you so much, I guess I would have to add as many lines as I need for the different products. I have seen it somewhere but can't remember so in the time you answer I will try and search it myself, but if you reply before then you would help me. Where do I find the product id to do more than 1 product??

0 Likes