Adjust the Swatch Size in Product Options

There are 3 different ways you can adjust the swatch size in your app.

Select the method below that you'd like to view.

Within the Product Options display settings, there are 3 predetermined sizes for the swatches that can be selected. You have the option to choose between small, medium, and large for sizing.

To change the sizes through the display settings, please follow these steps:

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

    Product Options Swatch Settings

With custom CSS, the swatch sizes on your product pages can be adjusted through your Shopify theme code.

To apply custom CSS to your swatches to adjust the size, please follow these steps:

  1. From Shopify's admin, select Online Store, then ActionsEdit 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 drop-down menu.
  5. Select Add asset.

    enter bold.css and 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.

    find the theme.liquid head tag

  10. Copy and paste this line right after <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.

To build the swatch size adjustment into your theme, please follow these steps:

  1. From your Shopify admin, select Online Store, then ActionsEdit code.
  2. Under "Config", select settings_schema.json.

    select config, then settings_schema.json

  3. Copy and paste this code at the end of file, then select Save:

    Note: You will need to add a comma after the closing curly brace before pasting this code.

    {
    "name": "Bold Customizations",
    "settings": [
    {
    "type": "checkbox",
    "id": "BOLD_custom_swatch",
    "label": "Use Custom Swatch Size",
    "default": true },
    {
    "type": "number",
    "id": "BOLD_custom_swatch_size",
    "label": "Custom Swatch Size",
    "default": 5
    }
    ]
    }

    paste the code

  4. Under "Layout", select theme.liquid.
  5. Find {{ content_for_header }}.

    find content for header

  6. Right after the {{ content_for_header }} line, paste this code, then select Save.
    {%- if settings.BOLD_custom_swatch == true -%}
    <style>
    span.bold_option_value_swatch {
    width: {{ settings.BOLD_custom_swatch_size | default: 5 }}rem;
    height: {{ settings.BOLD_custom_swatch_size | default: 5 }}rem;
    }
    </style>
    {%- endif -%}

    paste the code after content_for_header

  7. Select Customize theme.

    select customize theme

  8. Select Theme settings.
  9. You should see Bold Customizations on the list, where you can adjust the swatch size.

    Bold_Customization.png

  10. To adjust the size of the swatch, enter in your desired number and select Save in the top-right corner.

    Bold_Custom_Swatch_Size_Adjustment.png

Storefront Example

By default, the swatch sizes are 5 rem:

5rem_Swatch_Size_Example.png

Here is an example of a 2.5 rem swatch size:

2.5rem_swatch_Size_Example.png

Finally, here is an example of a 1 rem swatch size:

1rem_Swatch_Size_Example.png

Was this article helpful?
0 out of 0 found this helpful