Hi everyone,
I am working on a Shopify store using the Horizon theme (version 4.1.4) for an apparel brand. I am trying to refine my product page UX/UI for desktop and mobile. Please take a look at the screenshots I attached
Here are the two main things I need help with:
Visual Color Swatches:
In Horizon 4.1.4, the Variant picker block only gives options for Dropdowns or Buttons (which renders text pills like Asphalt, Natural, Navy). I want to convert these color option pills into visual circular color swatches (with active outline state/tooltips) or variant image thumbnails. What is the cleanest native method or liquid/CSS code tweak to achieve this in Horizon 4.1.4 without relying on heavy third-party app scripts?
“ADD TO CART” Button Text & Styling:
I want to increase the font size, weight (bold), and vertical padding of the primary ADD TO CART button on the product template so it stands out more prominently on mobile devices. Where in Horizon 4.1.4’s Liquid/CSS files should I apply these custom styles to override the default global typography scale?
Any guidance, Liquid snippets, or CSS code for Horizon 4.1.4 would be greatly appreciated!
Hi @Orlando_O
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
Making the Add to Cart button larger may improve discoverability, but I’d treat that as a hypothesis rather than the first fix.
For an apparel PDP, I’d first remove decision ambiguity: visual swatches need a clear active state, an accessible name and a reliable image/availability change; the default variant should be purchasable; and the CTA should make the selected variant and price obvious.
Measure swatch interaction → selected variant → Add to Cart by device and variant. If shoppers repeatedly change swatches, backtrack or add a different variant than the one they viewed, the issue is clarity or confidence, not button size. Then test the CTA styling against that baseline.
hey @Orlando_O, for the swatches that’s not really a theme setting, its driven by whether the option value actually has a swatch assigned. go to Products > your product > Options, click into each colour value (Asphalt, Natural, Navy) and assign a colour or image swatch through Shopify’s native swatch picker there. once every value on that option has a swatch, the Variant picker block in the theme editor unlocks “Swatches” as a style choice instead of just Dropdown/Buttons, and Horizon renders the circles automatically, no code needed.
for the add to cart button, thats controlled by .product-form__submit in the theme, drop this in Theme settings > Custom CSS:
.product-form__submit {
font-size: 1.1rem;
font-weight: 700;
padding-block: 1.25rem;
}
Hi @Orlando_O 
As you’re working on the best solution for visual color swatches and in general enhance your page’s UX/UI experience, you could also consider Aris Product Options – Color Swatch. It gives you more flexibility than the standard Horizon variant picker, especially if you want to customize the swatch appearance without digging into the theme’s Liquid/CSS.
Have a look at the Aris Color Swatch Demo and you can see 6 different swatch display types on the left and try customize the app settings in real time on the right. This way you can quickly find the look that works best for your apparel products.
This feature is built-in the app, easy to use without any coding experience or heavy app scripts! Not to mention, for the Add to Cart button, you can still handle the font size, weight, and padding with a small CSS customization in your Horizon theme on your own or through our support team. Aris Product Options 24/7 Support team would gladly help you handle button styling separate from the color-swatch functionality too!!
Hope this gives you another option to consider 
