Hi,
Fresh install of Horizon theme, no code customisation. The caret icon inside the Quick-add modal’s variant selector (Color / Size dropdowns) renders massively oversized on the live storefront — but displays correctly in the theme editor preview.
Setup:
- Latest Horizon from Theme Store
- No code edits, settings configured via visual editor only
- Tested on Chrome + Safari, hard refresh done, issue persists
Issue: Caret SVG inside <select> dropdown appears to render without size constraints on the live view. Editor preview is fine.
Screenshots attached:
- Live view (broken)
- Editor preview (correct)
Is this a known issue? Any temporary fix recommended without modifying theme code?
Thanks!
Yes, this is a known issue. I think I remember this specific thing in a previous post but I can’t find it. If you go to the product page template, and click on variant picker, choosing button instead of dropdown eliminates the problem.
I wasn’t able to reproduce on my Horizon theme. it worked as expected.
Can you send a link of your store?
Were there any other customizations ?
And what screen size are you looking at?
Ah, i missed the quick view part. I see it now.
Looks like a containing box was missed…
Styles arent loading in the quick add.
If you add this (at bottom) to quick-add-modal-styles.liquid
just after
.quick-add-modal__content .variant-option--swatches legend {
margin-inline-start: calc(-1 * var(--padding-2xs));
}
it will fix you up.
Note: this wasn’t well tested, just saw it wasnt loading the styles, and i added the styles to that component. You will definitely want to test mobile etc.
A longer term fix would be to move this to a common css or wait for Horizon to get updated.
Hope this helps until then!
-Velvet
/* Dropdown variant option styles */
.variant-option__select-wrapper {
display: flex;
position: relative;
border: var(--style-border-width-inputs) solid var(--color-border);
border-radius: var(--style-border-radius-inputs);
align-items: center;
margin-top: var(--margin-2xs);
overflow: clip;
}
.variant-option__select-wrapper:has(.swatch) {
--variant-picker-swatch-width: 20px;
--variant-picker-swatch-height: 20px;
}
.variant-option__select-wrapper:hover {
border-color: var(--color-variant-hover-border);
}
.variant-option__select:focus-visible {
outline: var(--focus-outline-width) solid currentcolor;
outline-offset: var(--focus-outline-offset);
}
.variant-option__select {
padding-block: var(--padding-md);
padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
appearance: none;
border: 0;
width: 100%;
margin: 0;
cursor: pointer;
}
.variant-option__select-wrapper .icon {
position: absolute;
right: var(--padding-md);
top: 50%;
transform: translateY(-50%);
width: var(--icon-size-2xs);
height: var(--icon-size-2xs);
pointer-events: none;
}
.variant-option__select--has-swatch {
padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
}
.variant-option__select-wrapper .swatch {
position: absolute;
top: 50%;
left: var(--padding-md);
transform: translateY(-50%);
}
Looks like a bug in theme engine or rather in Horizon architecture?
Here is why:
The CSS code which controls the dropdown is inside the {% stylesheet %} area in horizon/snippets/variant-main-picker.liquid at main · Shopify/horizon · GitHub
Liquid tags: stylesheet
Dox on this – Liquid tags: stylesheet
This code is rendered as part of HTML in Customizer, but on storefront its included as part of /cdn/shop/t/XXXX/compiled_assets/styles.css which is included automatically.
However, this file is not the same for different pages – looks like the theme engine selects only those liquid files which are directly involved in rendering current page.
But Quick Add modal content is fetched with JS, so this CSS is not included.
Say, if you include a “featured product” section on the same page, it will fix the problem 
Worth reporting, I guess.
Someone with Horizon in a store on a paid plan should leave a theme review with the link to this thread.
For fix – just copy contents of the mentioned {% stylesheet %} clause into, say assets/base.css or elsewhere.
