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

Store Design
1

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?

2

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!

3

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.

1 Like
4

Hi @jay91 ,

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

5

@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

KetanKumar_0-1654065441471.png
KetanKumar_0-1654065441471.png1920×1080 180 KB

1 Like
6

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

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?

8

Glad it worked :slightly_smiling_face:
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;
}
9

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

10
  1. add this:
.shopify-installments{
text-align:center;
}
11

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

12

Try adding

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

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

14

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

Screenshot 2022-06-11 at 19.45.39.png
Screenshot 2022-06-11 at 19.45.39.png638×352 15.3 KB

15

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