Overview

There are 2 different ways you can adjust the size of your swatches in SC Product Options :

• Adjust the display settings
• Use custom CSS

It is important to note that it is not currently possible to change your product page image when a swatch is selected. 

Method 1: Adjust the Display Settings

Within the SC Product Options display settings, there are 3 predetermined sizes for the swatches that can be selected:

• Small
• Medium
• Large

To adjust the size of your swatches, please follow the steps below.

1. From within the Product Options admin, select Settings > Display Settings.
2. Under Swatch Settings, select Small, Medium, or Large, then Save.

   

Method 2: Use Custom CSS

With custom CSS, the size of your swatches can be adjusted through your Shopify theme's code.

1. From the Shopify admin, select Online Store, then Actions > Edit code.
2. Under Assets, select Add a new asset.
3. Select Create a blank file.
4. Enter the name bold, and select .css from the dropdown menu.
5. Select Add asset.

   

6. Add your CSS styling.

   Note: To target the swatch specifically, please apply the CSS to bold_option_value_swatch. For example:

   .bold_option_value_swatch {
   width: 32px;
   height: 32px;
   }

7. Select Save.
8. Under Layout, select theme.liquid.
9. Find the </head> element near the top of the file.
10. Copy and paste this line right before </head>:

    {{ 'bold.css' | asset_url | stylesheet_tag }}

11. Select Save.

Your swatch sizes should now be adjusted to the sizes entered within the bold.css asset on your theme.