How to Style/Design Product Variants Using Custom CSS on a Shopify Product Page

How to Style/Design Product Variants Using Custom CSS on a Shopify Product Page


In the vast digital marketplace, first impressions are pivotal. A customer’s decision to buy can boil down to a matter of seconds, influenced significantly by the design and feel of your website, more specifically, the product page. But why is it so essential to style your product variant swatches or customizers with custom CSS on a Shopify product page?

When customers land on your product page, they look for a seamless and intuitive buying experience. A well-designed product variant, for instance, can mean the difference between a completed sale and a missed opportunity. Styling product variants ensure that they not only blend with the design of your site but also stand out in a way that is appealing. Moreover, aligning your product page design with product variant buttons or swatches boosts consistency, which is essential for branding and providing a professional look to your store.


Step 1: Download the App and Complete the Onboarding Process
Click here to install the app and then simply follow the onboarding instructions. It’s as straightforward as setting up your favorite social media profile.

Step 2: Select Your Product
Navigate to the 'New Product' section and look for the plus sign. Here, you have the choice of selecting a single or multiple products. Once chosen, click on 'Select Product' with the search icon.

Step 3: Setting up Swatches
Next, click on 'Add Option' and for the sake of this guide, we’ll choose image swatches. Once you’ve set up the image swatches and uploaded the necessary images, ensure that they're functioning correctly.

Step 4: Dive into CSS
If all looks good, it’s time to give those swatches a makeover! Head to the design setting, located right below the option. For a chic, modern look, we’ll design our swatches to be circular with a pronounced border, adding a shadow to give it a button-like appearance. The magic happens when you hover or click; the shadow disappears, making it act like a responsive button. While this is a basic CSS tweak, remember, the sky's the limit! For those with advanced CSS knowledge or those wanting to add a JS file, remember to save that directly in the Shopify theme code under assets.


/* Default state */
.cl-po--swatch {
width: 110px;
height: 110px;
flex-shrink: 0;
border-radius: 100px;
border: 4px solid #000;
box-shadow: -6px 6px 0px 0px #000;
transition: transform 0.8s; /* Smooth transition effect */

/* On hover */
.cl-po--swatch:hover {
transform: translate(-7px, 7px); /* Moves the element 7px to the left and 7px down */
box-shadow: 0px 0px 0px 0px #000;

/* On click (active state) */
.cl-po--swatch:active {
transform: translate(-7px, 7px); /* Moves the element 7px to the left and 7px down */


Step 5: Review and Test
Once you've made all the necessary changes, activate it by clicking the 'Enable' button, save, and preview the product page. A quick glance ensures everything aligns with your vision.

Encountered a hitch? Don't fret! The customer support and FAQ sections are a goldmine of information and guidance. Moreover, if you wish to explore further features like SVG masking, stay tuned for our upcoming blogs! For those seeking complex features like conditional logic or custom pricing formulas, our app has a plethora of options to delve into.


The digital marketplace is evolving, and staying ahead requires not just quality products but also a user interface that resonates with the customers. A product page that's aesthetic, intuitive, and responsive can make a world of difference to your sales. With the Shopify App - Live Product Options, you're not just choosing an app; you're opting for efficiency, reliability, and a sales booster. Why settle for the ordinary when you can customize and shine? Get started today, and transform your product page into a sales magnet!

About Live Product Options

Use Live Product Options to create a custom personalized shopping experience with unlimited product options and a live preview of the product.

Super easy installation

No theme modifications are required.

The App does not add any liquid to your theme and can be installed and uninstalled without the risk of messing up your theme code.

Personalize products

Personalize your products with custom text inputs and image file uploads. Show a live updating preview of the product image with the customers inputs.

Perfect for print on demand products like canvas, posters, picture framing, monogram or text engraving.

Unlimited Product Options

Extend the 100 variant limit by adding unlimited custom product options:

  • text (single / multi line)
  • select dropdown
  • radio / checkbox
  • swatches (button / images / colors)
  • color picker
  • file upload (with Ajax support)
  • HTML

Conditional Logic

Show product options with conditional logic based what the customer has selected.

Live preview

Show a live preview of the product options that updates in real time when the customer changes an option.

Live preview can consist of multiple layers to build a preview image:

  • overlay (image with transparent parts)
  • mask (crop preview with a provided mask or shape e.g. circle)
  • text
  • upload

In-App Editor

Create custom product configurations with the simple to use visual editor inside the app. Configure specific areas for customers to add text or image uploads.

Order Archive & Export

The app archives each order with all the products and their custom options. Export a ZIP file with all the file uploads and CSV containing the options and custom text inputs.

View in Shopify App store
Zurück zum Blog