How to ensure images in the product card are aligned within the product card?

Onnaha_pk
New Member
6 0 0

The top of my product gets cut off on the product cards shown on the home page (refer to attachment). I am using Shopify starter. Any help would be appreciated.

 Screenshot 2023-12-26 at 8.56.04 PM.png

Replies 11 (11)

techlyser_web
Shopify Partner
1004 188 189

Hello @Onnaha_pk 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Onnaha_pk
New Member
6 0 0

PageFly-Richard
Shopify Partner
4050 902 1556

Hi @Onnaha_pk 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.card__media .media img {
object-position: top center !important;
}
</style>

PageFlyRichard_0-1703638171387.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Onnaha_pk
New Member
6 0 0

Is it not possible to edit code in the Shopify Starter Plan?

ZenoPageBuilder
Shopify Partner
1041 202 217

Hello @Onnaha_pk 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.card__media .media img {
    object-position: top !important;
}

The result

Screenshot 2023-12-27 at 10.17.53.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
Onnaha_pk
New Member
6 0 0

I am unable to find the edit code option. Is it not possible on Starter plan?

 

techlyser_web
Shopify Partner
1004 188 189

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your base.css file

3. Paste the code at bottom

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Onnaha_pk
New Member
6 0 0

There seems to be no edit code option for the shopify starter plan! 

ZenoPageBuilder
Shopify Partner
1041 202 217

Hello @Onnaha_pk 👋

Yes it seems there is no option for editing code on the Starter plan.

 

Then you can consider using an app like this one to insert CSS code into your theme without modifying code.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
Onnaha_pk
New Member
6 0 0
Oh no, even this app is not compatible with Shopify Starter.

ZenoPageBuilder
Shopify Partner
1041 202 217

That is so unfortunate. Then I think we cannot customize freely on the Starter plan 😞

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com