I want product title on one line and product price on the next line

Hello!

I am using Doris theme. The store is grannysthings.in(password-Grannys) for you to check it out.

I want to shift the product price on the next line instead of both(product title and price being on the same line)

Thanks in advance.

Hi @shafinshaikh25
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

Store link: grannysthings.in

password: Grannys

It is also already provided in the description of the question. Thanks a lot for the help

Hi @shafinshaikh25

You can follow these steps to fix this problem.

Step 1: Go to Themes → Edit Code

Step 2: Find the file style.scss.css
Trong đến đoạn css

.collection .product-title-price {
    -webkit-box-align: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
}

Change it to:

.collection .product-title-price {
    -webkit-box-align: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    display: flex;
    flex-direction: column;
}

Here’s the result:

Please note that, if you find the product name and price are too far apart, just remove the
tag in the code.

If it work, please mark as a solution. Good luck!

1 Like