change product card size

Store Design
, , ,
1

change the product card size and image size in my site for mobile screen and i want it to appear two product so i can swap to se the other two

this my site url: sainalen.com

ai41_0-1733414868786.png
ai41_0-1733414868786.png400×502 58.2 KB

1 Like
2

@ai41 oh sorry for that issue but your store doesn’t work

3

Sorry it’s: saintalen.com

1 Like
4

@ai41 thanks for new URL i have already give you solution for this Article can you please check here

5

Hey there,

If you want to change the product card and image sizes on mobile so two products are displayed side by side (with swipe functionality), here are two ways you can do it:

Option 1: Manual Coding

  1. Backup Your Theme: Duplicate your theme before making changes.
  2. Edit the Product Grid CSS:
    • Go to your Shopify Admin > Online Store > Themes > Actions > Edit Code.
    • Open your base.css (or similar stylesheet file).
    • Add the following code to target mobile devices:
@media screen and (max-width: 768px) {
    .product-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        gap: 10px;
    }
    .product-grid-item {
        flex: 0 0 calc(50% - 10px); /* Two items per row */
        max-width: calc(50% - 10px);
    }
    .product-grid img {
        width: 100%;
        height: auto;
    }
}

  • This creates a horizontal scroll for product cards on smaller screens.

  • Test It Out: Check your site on mobile to ensure it looks good.

    Hopefully that works, for you. You might have to tweak it a bit to get it to work.

Option 2: Use EasyEdits for Layout Tweaks
If coding feels like a hassle, you can use EasyEdits to adjust product layouts. It allows you to customize grid sizes for mobile screens without needing CSS. Plus, you can preview changes directly in the app to get the exact look you want.

Let me know how this works out for you! Disclaimer: I’m the developer of EasyEdits, so if you’d like to try it, I’m here to help. :blush: