Shopify Product Card Height: Adjusting for the Perfect Look

Making Your Product Cards Just Right

Ever feel like your Shopify product cards are *almost* perfect, but just need a little tweak? That's exactly what a store owner named ecom11 was feeling over in the Shopify Community. They wanted to make their product cards on their www.marencio.com store (using the Horizon theme) just a *tad* bit taller. Sounds simple, right? Well, there are a couple of ways to approach this, and the community had some great ideas.

The CSS Route: Quick and Easy

One of the easiest ways to adjust the height of your product cards is through custom CSS. This is a great option if you're not comfortable diving into the theme's code directly. As tim_1 pointed out in the community thread, you can add a rule to "Theme settings" -> "Custom CSS" to adjust the aspect ratio. Here's the code snippet they suggested:

.card-gallery > .contents {
  --gallery-aspect-ratio: 0.75; /* amend the ratio to your liking */
}

So, what's happening here? The --gallery-aspect-ratio variable controls the aspect ratio of the product cards. By changing the value (0.75 in this example), you're essentially telling the browser to make the cards taller relative to their width. Play around with this value until you get the desired height. A smaller number will make the cards taller, and a larger number will make them wider.

Why CSS is a Good Starting Point

Non-destructive: Changes are isolated to the custom CSS section.
Easy to revert: Simply remove or comment out the code to go back to the original look.
Quick adjustments: Tweak the --gallery-aspect-ratio value and see the changes instantly in your theme editor preview.

Diving into the Code: For the Adventurous

If you're comfortable editing your theme's code, you can directly modify the aspect ratio settings in the card-gallery.liquid snippet. Tim_1 was kind enough to share the relevant code from the Horizon theme:

github.com/Shopify/horizon

snippets/card-gallery.liquid

df79657df


      
          assign ratio = '1'
          case block_settings.image_ratio
            when 'landscape'
              assign ratio = '16 / 9'
            when 'portrait'
              assign ratio = '4 / 5'
            when 'square'
              assign ratio = '1'
            when 'adapt'
              assign ratio = product.featured_media.preview_image.aspect_ratio | default: '1'
          endcase

This code determines the aspect ratio based on the image ratio setting you choose in the theme editor (landscape, portrait, square, or adapt). If you want to make a more permanent change, you could directly modify these ratios. For example, if you always want a slightly taller "portrait" card, you could change '4 / 5' to something like '4 / 6'.

Important Considerations When Editing Code

Backup your theme: Always, always, *always* backup your theme before making any code changes. This gives you a safety net if something goes wrong.
Use a child theme (if possible): If your theme supports child themes, use one. This will prevent your changes from being overwritten when the theme is updated.
Test thoroughly: After making changes, test your store on different devices and browsers to make sure everything looks as expected.

Choosing the Right Approach

So, which method should you choose? If you just want a quick and easy tweak, the custom CSS approach is probably the best option. It's non-destructive and easy to revert. If you want more control over the aspect ratios and are comfortable editing code, modifying the card-gallery.liquid snippet might be a better choice. The best option depends on your comfort level and the specific changes you want to make.

Ultimately, ecom11 and anyone else looking to adjust those product card heights now has a couple of solid options to explore. Remember to test and preview your changes to find what looks best for your store and products! Good luck, and happy customizing!

Fine-Tuning Your Shopify Product Cards: A Height Adjustment How-To