Horizon theme featured collection editorial style customization

Store Design
, , , ,
1

I’m using the Horizon theme, in that I need to customize the featured collection section’s editorial view. Now, some of the products on the home page show the product in landscape mode, but I don’t have any option to change the ratio of product images, I want to show the images in portait ratio, is there any possibility to do that.

website: https://staplein.myshopify.com/

password: staple

image
image1906×982 83.3 KB

2

Hi @Sivadarshan ,

Go to Online Store > Themes > Edit Code

Open the section file for featured collection

Find the image tag and remove/replace any media—landscape class

Add a new CSS class like ( media–portrait ) in your theme CSS

.media–portrait {
aspect-ratio: 3 / 4;
object-fit: cover;
}

Apply this class to the product image container.

This will change product images to a portrait ratio.

Thanks

Manoj

3

Hi @Sivadarshan ,

It seems that you have already resolved the issue on your side.
I have quickly checked your site and noticed that:
–gallery-aspect-ratio: 4 / 5; — this is a suitable portrait image ratio.

4

Hi,

Hope this will help

  • CSS (quick & safe): crop images into a portrait box

CSS Example (add at theme.css or base.css or component-card.css)

/* --- Portrait cards: try these selectors — adjust to match your theme's classes --- */

/* 1) Try this modern approach (uses aspect-ratio) */
.featured-collection .product-card__image,
.featured-collection .card__media,
.section-featured-collection .product-media,
.featured-collection .product-media {
  aspect-ratio: 3 / 4; /* width : height = 3:4 -> portrait */
  overflow: hidden;
}

.featured-collection img,
.featured-collection picture img,
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fills the box, cropping as needed */
  object-position: center;  /* change to "center top" or "center 40%" to shift crop */
  display: block;
}

/* 2) Fallback for older browsers (padding-top trick) */
.portrait-card {
  position: relative;
  width: 100%;
  padding-top: 133.3333%;  /* 4 / 3 = 133.333% -> makes the box tall */
  overflow: hidden;
}
.portrait-card img,
.portrait-card picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

- Also You Can Change the Liquid image src (server-side crop)
5

Hi @Small_Task_Help, I’ll give my website preview link, I don’t know how to take the class, please help me to do so.

password: staple