Product Grid Text Left Alignment Prestige

Store Design
,
1

Hi,

How can I align the text on the product grid to the left and put the text inside the card so there’s no spacing on the grid. I have the Prestige theme 9.3.0, my store is: https://39ae8a-a7.myshopify.com/?_ab=0&_fd=0&_sc=1

Thanks

2

Hey @Jahspher

Can you share your store password as well?

Best Regards,

Moeed

3

the password is jah, I also want to know if I can make the product images background grey.

4

Thank you so much, do I put it before or after the html tag?

5

Okay great but how do I make it transparent, I don’t want the box, and also how to move the swatch to the left, and make images grey, and the code isn’t working

6

Hello @Jahspher

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

fieldset.h-stack.wrap.justify-center.gap-1 { width: 100%; justify-content: end !important; } .product-card__info { align-content: start; justify-items: flex-start; gap: .75rem; display: flex; flex-direction: column; position: absolute; left: 0; bottom: 0; width: 100%; height: auto; padding: 20px; margin: 10px; border: unset !important; } .product-card { position: relative; }

techlyser_web_0-1719511138944.png
techlyser_web_0-1719511138944.png1029×389 99.9 KB

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

7

Okay it worked, but how do I align the text to the left? and make the aspect ratio of the images the same

8

Thank you so much, so If I want to change the color of the text and remove the spacing between the images how would I do it,?

9

Hi @Jahspher

Do you mean like this?

Made4uoRibe_0-1719512718898.png
Made4uoRibe_0-1719512718898.png1872×464 685 KB

If it is check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.product-card__info {
    position: absolute;
    bottom: 5%;
    left: 5%
}
  • And Save.
10

@Jahspher

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 { align-items: flex-start !important; }

Because first image have swatch and other two images don’t have swatch that’s it look like this.
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

11

no, I’m thinking it will be better under the image not in it.

12

okay, and to put the text under the image instead?

13

okay, can you please send me the code that will put the text under the image not inside, and to also remove the spacing.

14

It seems like you already solve the problem. Please, mark solution and like that helped you. Thanks!

15

I wanted the text to be under the image not in the image, I haven’t gotten that solution.