Shopify Product Page Perfected: Aligning Media & Details in Horizon Theme

Hey fellow store owners! It's always great to dive into the Shopify Community forums and see how everyone's tackling common design challenges. Recently, a thread popped up that really resonated, focusing on those little visual tweaks that make a huge difference on your product pages, especially for those of us using the popular Horizon theme.

Our friend Geronim0 kicked off a discussion about two specific pain points: getting the product media and details sections to perfectly align on desktop, and adding a neat little colon after variant labels like "Colour." These might seem like small details, but they're crucial for a polished, professional look that boosts buyer confidence.

Getting Your Product Media and Details to Line Up

Geronim0's main challenge was that on desktop, his product media carousel and the product details block weren't starting at the same height from the header. He'd tried fiddling with padding and page settings, but no luck. This is a super common issue, and the community really came through with some fantastic troubleshooting steps and a solid solution.

Initial Checks & Why They Might Not Work

Jennifer_Lawrence and JohnQQ quickly pointed out that Horizon sections often have their own padding settings, and sometimes individual blocks within those sections can have their own margins or padding that override the main section settings. So, simply matching the "Top padding" for both the "Product media" and "Details" blocks might not cut it, even if it seems logical.

Ploqo initially suggested setting both "Product media" and "Details" top padding to the same value in the theme editor. While a good first step, Geronim0 found this wasn't quite doing the trick. He clarified that his media looked fine, but the details block was still too high.

ModrataOrder offered a more detailed diagnostic approach, which is brilliant for general troubleshooting:

1. Check the Product information section's Padding top setting. This controls both columns together.
2. Then, click the Product details group block inside it. This often has its own Padding settings, particularly a top value on desktop that the media side might not have. Try setting its top padding to 0, or match it to your media side.
3. Also, peek at the Media block settings. An "extend to edge" or similar option can sometimes shift the carousel.

The Winning CSS Tweak for Alignment

After a bit of back-and-forth, including a suggestion for a broader CSS rule from umerzaman152, Ploqo delivered the exact CSS snippet that Geronim0 confirmed worked perfectly. This is a great example of how precise CSS can override those tricky theme defaults.

Here’s how you can achieve that perfect alignment, assuming your product media is already where you want it and it's the details section that needs to drop down:

1. In your Shopify Admin, go to Online Store > Themes.
2. Find your Horizon theme and click Customize.
3. Navigate to a Product page template.
4. In the left sidebar, click the Product information section.
5. Scroll to the very bottom of its settings and open Custom CSS.
6. Paste the following code into the Custom CSS box:

@media screen and (min-width: 750px) {
  .product-details { padding-top: 20px; }
}

The @media screen and (min-width: 750px) part ensures this change only applies to desktop views (screens wider than 750px), so your mobile layout remains untouched. The .product-details { padding-top: 20px; } line adds 20 pixels of top padding specifically to your product details block, pushing it down to align with your product media.

Important Note: If your Product media block has a different top padding (e.g., 30px), you should use that number instead of 20px in the CSS code to ensure a perfect match. You can find this value by clicking on your "Product media" block in the theme editor and checking its "Padding Top" setting.

This simple tweak can make your product page look much cleaner and more professional, as Geronim0 happily confirmed!

Adding a Colon to Variant Labels (e.g., "Colour:")

The second challenge Geronim0 faced was adding a colon after variant option names, like changing "Colour" to "Colour:". This is another small detail that can really enhance clarity for your customers.

Why Renaming in Admin Isn't Always Best

Umerzaman152 initially suggested simply renaming the option from "Color" to "Color:" directly in the product admin settings. While this works immediately, ModrataOrder offered a crucial warning: renaming the option this way means the colon will also appear in other places like filters, the cart, and order details, which might not be what you want. This is a fantastic insight that highlights the importance of considering the broader impact of your changes.

The Cleanest Solutions: Code Edit or CSS

Given the potential side effects of renaming, the community converged on two cleaner methods:

1. The Code Edit (ModrataOrder's Preferred Method)

This method directly modifies the Liquid snippet responsible for displaying variant options. It's considered the cleanest because it targets the display on the product page without affecting backend data.

1. Before making any code edits, it's always a good idea to create a duplicate of your theme (Online Store > Themes > Actions > Duplicate). This way, you have a safe backup!
2. In your Shopify Admin, go to Online Store > Themes.
3. Find your theme and click Actions > Edit code.
4. In the file explorer, navigate to snippets/variant-main-picker.liquid.
5. Search for {{ option.name }}. You'll typically find it twice (once for swatch/button styles, once for dropdowns).
6. Add a colon right after it, like this: {{ option.name }}:. Make sure to update both instances if they exist.
7. Click Save.

2. The CSS-Only Approach (Ploqo & ModrataOrder)

If you're hesitant to dive into Liquid code, a CSS-only solution can also work by using the ::after pseudo-element to inject the colon.

1. In your Shopify Admin, go to Online Store > Themes > Customize.
2. Navigate to a Product page template.
3. In the left sidebar, click the Product information section.
4. Scroll to the bottom and open Custom CSS.
5. Paste one of the following CSS snippets:

Ploqo's suggestion:

Or ModrataOrder's slightly different class (if Ploqo's doesn't work, class names can vary by theme version):

.variant-option__legend > span:first-child::after { content: ":"; }

If neither of these immediately works, remember ModrataOrder's advice: use your browser's "Inspect" tool (right-click on the variant label) to find the exact class name for your variant option legend or span, then update the CSS accordingly.

Click Save, and you should see that clean colon appear next to your variant labels!

It's these kinds of community discussions that truly empower store owners. Small visual discrepancies can sometimes feel like huge hurdles, but with a little expert advice and some clever code (or no-code!), you can achieve that perfectly polished look for your Shopify store. Happy customizing!