Re: Various problems about my product cards and product page

Solved

Various problems about my product cards and product page

davidvilaa
Excursionist
24 0 6

I want to modify several things about the product cards of my website, but my little knowledge in Shopify does not allow me to do it, so I would love if someone could help me! 😄

 

First of all, it's about the outer margin, I would like to set it to 0 so that the borders of the products overlap each other, but Shopify only allows up to 4, is there a way to exceed this limit? (blue)

 

Second, and I think it's a bit more complicated request, I'd like to create interior padding on the product cards. Let me explain, that there was a padding that was adjusted to the size of the product image so that the images and the texts of the product card were the same. (red)

 

imagen_2023-05-30_175502093.png

 

Thanks for all!
PD: I use Dawn (Shopify 2.0 i guess)

Finally, I would like to know if there is any way that the image of the product within its respective page was centered and then the information, sizes, purchase of the product, etc. they were below it. I attach a photo of my idea

imagen_2023-05-30_180025111.png

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6999 1665 2058

This is an accepted solution.

Thank you for the information. 

You can try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "theme.scss.liquid, styles.scss.liquid or base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

Number 1 and 2 solution.

ul#product-grid {
    grid-gap: 0px;
}
.card__inner.ratio {
    height: 100%;
}

The last one you need to hire a Developer to do this cause it would be a lot of editing. 

I hope it help. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 2 (2)

Made4uo-Ribe
Shopify Partner
6999 1665 2058

Hi @davidvilaa ,

Would you mind to share your URL website with password? 

Or you can PM the info if you dont like to share. We can give solution one at the time.😊

Thanks! 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Made4uo-Ribe
Shopify Partner
6999 1665 2058

This is an accepted solution.

Thank you for the information. 

You can try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "theme.scss.liquid, styles.scss.liquid or base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

Number 1 and 2 solution.

ul#product-grid {
    grid-gap: 0px;
}
.card__inner.ratio {
    height: 100%;
}

The last one you need to hire a Developer to do this cause it would be a lot of editing. 

I hope it help. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.