How to change the spacing between product titles and prices for all product lists on Yuva theme?

Store Design
1

How can I change the spacing between the product title and price, as well as the size, color, thickness of the price and original price in all product lists? No matter which page or section they are in?

Store URL if needed: 5c252b-bc.myshopify.com

Here is what now:

OneChefOn_0-1747386013719.png
OneChefOn_0-1747386013719.png1825×639 26.4 KB

OneChefOn_1-1747386044755.png
OneChefOn_1-1747386044755.png1901×745 37.7 KB

Here is what I want:

OneChefOn_2-1747386081266.png
OneChefOn_2-1747386081266.png1920×654 167 KB

2

Hi @OneChefOn

let try to add this custom css:

. yv-collection-product-grid .yv-product-information .yv-prizebox{
  margin-top: 10px;
}

BiDealDiscount_0-1747389293316.png
BiDealDiscount_0-1747389293316.png1320×697 205 KB

3

Hi @OneChefOn , to change the distance between product title and price, as well as size, color, thickness of product price on Shopify theme, you need to understand CSS and know how to edit CSS on Shopify.

First, you should refer to How to add custom CSS to your theme from the Shopify Official guide.

Once you know how to change the CSS and where to go to change it, you can move on to the next step: Adjust the margin-top of the price box to 10px (currently 2px) to get the spacing as in the example picture. The same goes for styling (size, color, thickness); Once you understand CSS, you can customize them.

If you want to hard-code these values ​​in the theme, you have to access theme.css to edit, the same way as when adding custom to a page. Make sure you have a backup of the theme before editing theme.css

Also, before you use CSS, you should consult the official Yuva documentation to see if there is a more convenient way to do it besides CSS. If there is, then apply it, because if you are not familiar with code, a wrong CSS change can also cause UX problems for your website.

That’s all. If this solved your problem, please like and mark Solved.

4

Hi @OneChefOn

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

5

Hi @OneChefOn

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file common.min.css and add this code at the end of the file

.product-content-left {
    margin-bottom: 10px !important;
}

Result

DaisyVo_0-1747398945676.png
DaisyVo_0-1747398945676.png1059×625 174 KB

Best,

DaisyVo

6

I tried your method, and the spacing between the product title and price did increase, but the size, color, and thickness of the selling price and original price still cannot be changed.