How can I center product title and price on Debut Theme landing page?

[jay91]

I am trying to center the Product Title and Price on my landing page in the "featured collection" section. I was able to center the Title of the product in theme.css but cannot get the price to move as well. I would like to center the title and price on my landing page ONLY and keep the individual product pages aligned to the left. Can someone help me out with this?

[KetanKumar · Accepted solution]

@jay91 

try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.product-card {text-align: center;}

After code view

[MarinaPetrovic · Accepted solution]

Hi @jay91  (to answer your DM), open theme.css, and find this element:

.price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 0;
}

Change it with this:

.price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

Title part, find this element:

.product-single__title {
    margin-bottom: 0.5rem;
}

And change it with this:

.product-single__title {
    margin-bottom: 0.5rem;
    text-align:center;
}

[MarinaPetrovic · Accepted solution]

Glad it worked 🙂 
Look for this element:

.product__policies {
    margin: 0.4rem 0 1rem 0;
    font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
}

Change it with:

.product__policies {
    margin: 0.4rem 0 1rem 0;
    font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
    text-align:center;
}

[LitExtension]

Hi @jay91,

Go to Assets > theme.css and paste this at the bottom of the file:

.product-card {
    text-align: center !important;
}
.product-card .price {
    align-items: center !important;
}

Hope it helps!

[jay91]

Unfortunately, that didn't work. It remained the same as before where the Product Title is centered while the Product Price under it is aligned to the left.

[LitExtension]

Hi @jay91,

Please send your site and if your site is password protected, please send me the password. I will check it.

[KetanKumar · Accepted solution]

@jay91 

try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.product-card {text-align: center;}

After code view

[MarinaPetrovic · Accepted solution]

Hi @jay91  (to answer your DM), open theme.css, and find this element:

.price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 0;
}

Change it with this:

.price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

Title part, find this element:

.product-single__title {
    margin-bottom: 0.5rem;
}

And change it with this:

.product-single__title {
    margin-bottom: 0.5rem;
    text-align:center;
}

[jay91]

Thank you! That worked perfectly. I also need to center the "Shipping Calculated At Checkout" under the title and price. How can I center that as well?

[MarinaPetrovic · Accepted solution]

Glad it worked 🙂 
Look for this element:

.product__policies {
    margin: 0.4rem 0 1rem 0;
    font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
}

Change it with:

.product__policies {
    margin: 0.4rem 0 1rem 0;
    font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
    text-align:center;
}

[jay91]

I also need two more edits made if possible.

1. I need to center the Shop Pay / Affirm Message above the add to cart button.

2. I would like to change my products with variants from a drop down to a checkbox

Let me know if you can help

[MarinaPetrovic]

1. add this:

.shopify-installments{
text-align:center;
}

[jay91]

Unfortunately that didn't work. I tried to add it to the theme.css file and the installments message remained aligned to the left

[MarinaPetrovic]

Try adding 

.shopify-installments{
text-align:center!important;
}

[jay91]

That also did not work. Maybe there is something I can edit besides shopify-installments?

[MarinaPetrovic]

@jay91  Find this element:

.product-form__item label {
    display: block;
}

And change it to this:

.product-form__item label {
    display: block;
    text-align: left;
}

And add this:

.product-single__meta{
text-align:center;
}

[MarinaPetrovic · Accepted solution]

@jay91  find this element:

.product-single__thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    margin-left: -9px;
    margin-right: -9px;
}

And change it with:

.product-single__thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    margin-left: -9px;
    margin-right: -9px;
    justify-content: center;
}