Help with product card - Prestige

How do i put the product info on the left side of the product card. And how can i make the space between the lines smaller? Im using the prestige theme. 1st pic is what i want, 2nd pic is what it looks like now.

1 Like

Hello @Patrick59

You can add code by following these steps

  1. Go to Online Store β†’ Theme β†’ Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product-card__info { justify-items: flex-start !important; } .price-list { justify-content: flex-start !important; width: 100%; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

  • Here is the solution for you @Patrick59
  • Please follow these steps:

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press β€˜Save’ to save it.

  • Here is the result you will achieve:

  • Please press β€˜Like’ and mark it as β€˜Solution’ if you find it helpful. Thank you.

Thank you. Is there a way i can make the title bold, and make the distance between the lines shorter?

Hi @Patrick59

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

Hi @Patrick59 ,

Have you tried this code? This should make the title bold as well.

Thank you. What is the code to change the distance between the product picture and product title on the product card?

You can add code by following these steps

  1. Go to Online Store β†’ Theme β†’ Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product-card { gap: 0.25rem !important; } .product-card__info a.product-title { font-weight: bold !important; } .product-card__info { gap: 0 !important; } .gap-1 { gap: 0 !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.