Customise Horizon theme - font and image size

[chocs]

Hello,

I am using the Horizon theme.

• How do I increase my font size for price?
• How do I make my product image size smaller?
• I have 3 collections - all the images are of different size. How do I make them all the same size?

[Mikedavid247]

Hi Chocs,

A few of these depend on how your Horizon theme is currently structured, so the exact solution can vary a bit.

Price font size:
There’s a typography control for this, but Horizon sometimes assigns the price to a separate class, so increasing it globally doesn’t always work. In those cases a small, targeted CSS tweak is the cleaner approach.

Product image size:
This is tied to both the image ratio and the way the product section handles spacing. Some Horizon setups scale the image container differently, so the best method depends on how your layout is currently styled.

Collection images:
Different sizes usually come from mixed aspect ratios. Standardizing them helps, but Horizon may also need a quick template adjustment so the theme crops and displays them evenly.

If you’d like, feel free to share your store URL in this thread. I can take a quick look and point you to the exact setting or line of code your version of Horizon uses.

[suyash1]

hello these changes need CSS, can you please share your website link?

[chocs]

My store is not live yet. Can u access thru this link?

70% Peru

[chocs]

Pls see link below. I have added the link to Midedavid247

[Mikedavid247]

Thanks for sharing the preview link - that helps a lot.

I checked the structure of your product page, and here’s what I noticed:

1. Price font size

Your theme is using the default Horizon product price class, which isn’t tied to the main Typography settings. That’s why adjusting typography doesn’t change the price.

A small targeted CSS rule will be needed to increase only the price without affecting titles or other text.

2. Product image size

Your product images are currently taking the full width of the image container. The container itself is what needs adjusting — Horizon uses a fixed ratio wrapper here. The image ratio setting plus a small tweak to the wrapper will give you the exact size you want.

3. Collection images consistency

Your collections are displaying directly based on the original image ratios. To make them uniform, the theme needs either:

A standardized aspect ratio for uploads, or

A quick template adjustment so Horizon crops them consistently.

Right now, it’s simply respecting your source dimensions.

If you let me know the exact sizes or look you want for each part (price size, product image size, and collection image ratio), I can guide you to the precise place to adjust them based on your theme version.

[suyash1]

please add this css to the end of your styles.css file and check, this is for font

span.price {font-size: 24px;}

which image size do you want to make smaller?

issue with the collections images is that those are by default different size images, if we force them using css then it will look distorted

[chocs]

i don’t know the exact size I want - I intend to just adjust them till they look “right”. Yes please guide me to the precise place to adjust! I can work out the font sizes or images sizes on my end?

[Opeoluwa123]

Since you’re using the Horizon theme, here are quick fixes:

1. Increase price font size:

Add this in your theme CSS:

.price { font-size: 22px !important; }

2. Make product images smaller:

.product__media img { max-width: 75% !important; }

3. Make all collection images the same size:

.collection-grid-item img {

aspect-ratio: 1/1;

object-fit: cover;

If you share your store URL, I can place the code in the correct file and adjust it to match your design perfectly.

[chocs]

70% Peru

Here’s the link.

I also need elp to change the font size for the collapsed section - ingredients etc

[chocs]

where exactly do I add them?

[chocs]

So what should I do?

[chocs]

Do u mean theme.liquid? Where should I add exactly?

[chocs]

I can’t find styles.css file

[suyash1]

@chocs check if you have styles.css.liquid or base.css in assets folder

[chocs]

i only have base.css. Where exactly do i add the codes?

[suyash1]

@chocs to the very end of it

[oscprofessional]

Hi @chocs ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

body .price {
    font-size: 20px;
}
body .product-media {
    max-width: 75%;
    justify-content: center;
}
body img.product-media__image {
    max-width: 75%;
}

[chocs]

Thanks! How do i make the image centre now? and how do i make the add to cart and paypal lines shorter to be aligned with my text below?

[oscprofessional]

Hi @chocs ,
Add below css

body li.product-media-container {
    justify-content: center;
}
@media (min-width: 768px) {
  .product-form-buttons.spacing-style.product-form-buttons--stacked {
      max-width: 400px;
  }
}