Horizon theme product card customization

[sivaus]

I’m using the Horizon theme in Shopify and I want to customize the product card on the home page. Specifically, I want the Add to Cart button and the quantity selector to appear on the same row.

Currently, this layout works on desktop when I set the number of products to 3 per row, but the product images become too large.

What I want is to display 4 products per row while still keeping the Add to Cart button and quantity selector on the same line.

I have tried multiple configurations using the default settings available in Shopify, but it’s not working as expected. On mobile, it also doesn’t look good because the Add to Cart button and quantity selector appear on two separate rows.

Is it possible to customize the code to achieve this layout?

Website: https://tamizh-natural-farm.myshopify.com/
Password: growzen

[sivaus]

[sivaus]

I want it like this but 4 products in a row. In mobile I want 1 product with add to cart and quantity selector in same line with carousel style

[tim_1]

Well, you can’t beat the nature, if the stuff does not fit – you can do nothing.

You can decrease the padding on the cart button, change the wording (keep omly “Add” or “Sold”).
You should not really decrease spacing on + and - buttons otherwise people with fat fingers will have problems.

The best I could do with 4-per-row on desktop widths is this. For widths less than 910px it starts to wrap anyway…

Should rather try 4->3-> 1 per row on desktop/tablet/mobile with the code like this in sections Custom CSS setting:

@media (min-width:750px) {
  
  /* reduce number of slides on narrower screens */
  slideshow-slides:has(product-card) { 
    --column-count: min(4, calc(100vw / 320px));
  }

  /* reduce padding on cart button */
  product-card .add-to-cart-button {
    padding-inline: 10px;
  }
  
  product-card .product-form-buttons--stacked > * {
    flex: 1 1 calc(50% - var(--gap-sm)/2) !important;
  }
  
  /* scale down quantity selector */
  product-card .quantity-selector {
    --quantity-selector-width: clamp(100px, 9vw, 128px);
    --minimum-touch-target: clamp(30px, 3.5vw, 44px);
    min-width: 100%;
  }
}