Adjust the Swatch Size in Product Options

Follow

Overview

Product Options Premium allows you to show your customers their options in the form of swatches. They can either select from a colour wheel, or upload an image to make their selection. The swatches will display on your storefront by default.

You can use custom CSS to change the size of your swatches from within the app's display settings, or by building it in your theme's Liquid code. By adding to the theme's files, you're able to adjust the swatch sizes from directly within your theme settings.

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

  1. From your Shopify admin, select Online Store.

    select_online_store.png

  2. Select Actions.

    select_actions.png

  3. Select Edit code.

    select_edit_code.png

  4. Under "Config", select settings_schema.json.

    select_config___settings_schema.png

  5. 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.png

  6. Under "Layout", select theme.liquid.

    select_theme.liquid.png

  7. Find {{ content_for_header }}.

    find_content_for_header.png

  8. 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_code2.png

  9. Select Customize theme.

    select_customize_theme.png

  10. Select Theme settings.

    select_theme_settings.png

  11. You should see Bold Customizations on the list, where you can adjust the swatch size.

    bold_customizations.png

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

    custom_swatch_size_5.png

Storefront Example

By default, the swatch sizes are 5 rem:

5rem_swatch_size.png

Here is an example of a 2.5 rem swatch size:

2.5rem_swatch_size.png

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

1rem_swatch_size.png

Helpful Links:

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.