Solved

Center title and price in collections in debut theme

tharomaticbrand
Tourist
6 0 2

I have used the following code to center title and price in my collections page, however the title and price don't seem to align and center properly.

dl.price.price--listing {
align-items: center;
}

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

Screen Shot 2020-08-14 at 12.28.04 PM.png

Also looking to center title and price in home page. Thanks for the help! 

Shopify page - https://thearomaticbrand.com/

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

Hey @tharomaticbrand,

Please remove the last given script and add the following script at the bottom of your assets/theme.scss.liquid file.

/* For home page products */
#shopify-section-collection .product-card__title {
display:block;
text-align:center;
}

 #shopify-section-collection .price{
 align-items: center !important;
 }

 /* For collection page products */

#Collection .product-card__title {
display:block;
text-align:center;
border-bottom: none !important;
}

#Collection .price{
 align-items: center !important;
 }

.price__regular, .price__sale{
margin-right: 0px !important;
}

 

Hope this will work.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12280 2546 3694

Hey @tharomaticbrand,

Please add the following code at the bottom of your assets/theme.scss.liquid file.

/* For home page products */
#shopify-section-collection .product-card__title {
display:block;
text-align:center;
}

 #shopify-section-collection .price{
 align-items: center !important;
 }

 /* For collection page products */

#Collection .product-card__title {
display:block;
text-align:center;
border-bottom: none !important;
}

#Collection .price{
 align-items: center !important;
 }

 

Hope this works!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
tharomaticbrand
Tourist
6 0 2

Hi, 

Thank you so much for the help, it worked!! However, the text still looks a bit off and not completely center aligned with each other. See attached image.

Screen Shot 2020-08-14 at 9.28.20 PM.png

Any help is appreciated, thanks again! 

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

Hey @tharomaticbrand,

Please remove the last given script and add the following script at the bottom of your assets/theme.scss.liquid file.

/* For home page products */
#shopify-section-collection .product-card__title {
display:block;
text-align:center;
}

 #shopify-section-collection .price{
 align-items: center !important;
 }

 /* For collection page products */

#Collection .product-card__title {
display:block;
text-align:center;
border-bottom: none !important;
}

#Collection .price{
 align-items: center !important;
 }

.price__regular, .price__sale{
margin-right: 0px !important;
}

 

Hope this will work.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
tharomaticbrand
Tourist
6 0 2

It worked!!! Thank you so much!!!

dmwwebartisan
Shopify Partner
12280 2546 3694

Hey @tharomaticbrand,

Welcome. Glad to know it worked for you 🙂

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
cali21
New Member
4 0 0

@dmwwebartisan

These work for great for the main collections, except it doesn't work with the "you may also like" collections.  Is there a fix for that?

mtilden
Tourist
3 0 5

This worked for my shop as well. Thank you so much! 

LucieG
Visitor
1 0 0

Awesome! It works! Thank you so much 🙂

GoodVegans
Tourist
7 0 1

I was able to center title/price on main shopping page using your code (thank you!)—but how do you do it in 'YOU MAY ALSO LIKE'?Screen Shot 2021-11-14 at 12.15.40 PM.png

mon01
Excursionist
32 0 7

Hello. Can I get the code how to position the sold out badge like the one in this picture?

Thanks