How to change the product card dimensions in a collection section

Store Design
, , , ,

Topic summary

A user seeks to resize product cards in their Shopify storeā€™s featured collection section on the homepage. They want the entire card to appear smaller, not just the product image.

Solution provided:

  • Navigate to Online Store > Themes > Edit Code
  • Locate the file component-slider.css
  • Find the class .slider--desktop.grid--3-col-desktop .grid__item
  • Adjust the size value (example: 150px) and save

Important note: This solution works specifically when the desktop column display is set to 3. If the column count changes, corresponding classes in component-slider.css must be adjusted accordingly.

The issue was successfully resolved with this CSS customization approach.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

WEBSITE Preview: https://nobwh4pg69yfwfvj-68796285242.shopifypreview.com

So in the home page of my site, in the featured collection, I want to resize the product cards, as to appear smaller. I want the re-sizing to take place to the whole of the card, not just the image.

Andy106_0-1682446755147.png
Andy106_0-1682446755147.png1858Ɨ801 325 KB

Thanks for the help in advance!

2

Hi @Andy106

This is BSS Commerce - Full-service eCommerce Agency. Weā€™d love to suggest you this solution:

We checked on your web and found you are setting the number of columns to display on the desktop to 3.

Kindly follow the steps below:

  1. Online store > theme > edit code

view (80).png
view (80).png1919Ɨ961 97.8 KB

  1. Search for the file ā€˜component-slider.cssā€™ and search for the class ā€œ.sliderā€“desktop.gridā€“3-col-desktop .grid__itemā€ > edit the size you want > save

view (81).png
view (81).png1905Ɨ946 66.2 KB

If you set it to 150px, you will get the result as shown below

view (82).png
view (82).png1893Ɨ853 447 KB

Note:

  • The above changes only work properly with the number of columns displayed on the desktop is 3. If you change the number of columns displayed on the desktop, then follow the same steps as above and select the corresponding classes in the file ā€œcomponent-slide. cssā€.

Hope this helps you.

BSS Commerce - Shopify Apps & Development Services Provider

Level up your Shopify store with our B2B & B2C apps

1 Like
3

Excellent, thank you!

1 Like