Several questions about Horizon theme

Store Design
, , , ,

Topic summary

Users are troubleshooting issues with Shopify’s new Horizon theme during early testing phases.

Main Issues Identified:

  1. Image cropping and scaling problems - Product images are being cropped at top/bottom instead of displaying fully
  2. Layout width concerns - Product page layout spans full screen width, appearing visually unbalanced
  3. Jumbo section customization - Headline text and font size appear hard-coded with limited editing options
  4. Missing blog post feature - Unlike Dawn theme, Horizon lacks a simple method to display recent blog posts on homepage

Solutions Provided:

  • CSS code snippets offered to prevent image cropping using object-fit: contain and adjust product page width to 80%
  • Jumbo section text can be modified by replacing the shop.name variable, though font size adjustment remains unclear
  • Blog posts section would require custom development from scratch, though one user successfully used Shopify’s AI module with the command “Create recent blog posts (last 3)”

Ongoing Issues:

Some CSS solutions aren’t working for all users. One user reports that while cropping was fixed, images now display as squares instead of maintaining portrait orientation. Discussion remains active with users offering further troubleshooting assistance.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

I’m in the process of transitioning to the Horizon theme (yes – I know it’s still early, but I’m testing it anyway).

I’m encountering a few issues:

  1. Images, slideshows, etc. are getting cropped at the top and bottom and are not scaling properly.

  2. Aspect ratio between product images and product info becomes chaotic and cower the entire screen. How to get a narrower layout (e.g. 80% screen width). It doesn’t seem visually balanced.

  3. The headline text in the Jumbo section appears to be hard coded – I can’t find a way to change it.

  4. In Dawn, we had a simple method for displaying recent blog posts as a collection or preview on the homepage. How can I achieve a similar setup in Horizon?

Any tips, workarounds, or adjustments are highly appreciated – especially concrete and tested solutions if possible.

2

Hi @BjornAnd !

Allow me to answer your queries one by one.

  1. To avoid the images getting cropped on the product page, you can add the following CSS to your base.css file or the custom CSS within your theme settings:
img.product-media__image {
    object-fit: contain !important;
}
ul.media-gallery__grid .product-media {
    align-items: flex-start;
}

Here’s what it looks like before the CSS:

swym_0-1749204370752.png
swym_0-1749204370752.png1582×1031 150 KB

Here’s what it looks like after. As you can see, the image is no longer cropped:

swym_1-1749204370761.png
swym_1-1749204370761.png1582×1031 160 KB

  1. If you’d like the product image and information to take up no more than 80% of the screen width, you can add the following CSS:
.product-information.section.section--page-width.spacing-style.color-scheme-1.relative {
    display: grid;
    justify-items: center;
}

.product-information__grid.product-information--media-left {
    width: 80%;
}

This way, the product info and image will no longer cover the entire screen, and it becomes easier to read:

swym_2-1749204370797.png
swym_2-1749204370797.png1582×1031 144 KB

  1. By Jumbo section, are you referring to the store name on the homepage? If so, you can change the content by adding a store logo through your theme settings. If you do not want to add a logo and instead just change the text, you’ll need to navigate to the file “blocks/logo.liquid” and go to line 66. To change this text, you’ll need to replace the shop.name variable with the text of your choice. As an example, I’ve replaced it with the string “horizon test”. This will change the text content of the section on the homepage.

swym_3-1749204370300.png
swym_3-1749204370300.png862×298 23.5 KB

swym_4-1749204370864.png
swym_4-1749204370864.png1582×1031 328 KB

However, this will only change the text in this specific instance, and not in the header banner. If you wish to change this content, you’ll need to update it in your theme’s Logo settings.

  1. Unfortunately, the section to display blog posts on Dawn is specific to that theme. To have the same section on Horizon, it would involve creating a new section from scratch, perhaps using the Dawn theme section for reference.

I hope this helps!

If my response helped you, please consider giving it a like ( :+1: ) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards,

Matthew from Swym

1 Like
3

I did get some of these things to work. But not everything.

This part:
img.product-media__image {
object-fit: contain !important;
}
ul.media-gallery__grid .product-media {
align-items: flex-start;
}

Does not seem to work.

The JUMBO settings I wish to be able to adjust, is the overall font size.

4

Hello Bjorn

I’m brand new to this forum and to Shopify. I started with Dawn two weeks ago and have now switched to Horizon. I asked myself exactly the same question regarding your point 4 about blog posts. I’ve just found a solution. You can use the AI module and use this exact command: “Create recent blog posts (last 3)”.

It created a perfect section with the last three posts for me.

Kind regards
Marco

5

Thank you Matthew, I had the same issues (1 & 2) and your code solved them, but now all my images are square. I don’t suppose you know similar code but for portrait images? Many thanks, Tracey

6

Hey @Tracey_Bowen1

Looks like Matthew’s code solved half of your problem, feel free to share your store URL and password (if enabled) with some details of your exact issue as well and I would be happy to help you out with portrait images.

Best,
Moeed

1 Like
7

Thank you for your kind offer, here is an example of a page where I would prefer to have portrait images: New Zealand Batiks – New Zealand Fabrics & Yarn but with no cropping.