There are 3 different ways you can adjust the size of your swatches in Bold Product Options 2.0:
- Adjust the display settings
- Adjust the theme 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. If this is something you are interested in, please reach out to our partners at Storetasker for a quote.
Pro-Tip
Looking to create Swatches? Check out our guide here: Create Swatches in Product Options
Within the 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.
- From within the Product Options admin, select Settings > Display Settings.
- Under Swatch Settings, select Small, Medium, or Large, then Save.
- From the Shopify admin, select Online Store, then Actions > Edit code.
- Under Config, select settings_schema.json.
- 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
}
]
} - Under Layout, select theme.liquid.
- Find {{ content_for_header }}.
- 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 -%} - Select Customize theme.
- Select Theme settings.
- You should see Bold Customizations on the list, where you can adjust the swatch size.
- To adjust the size of the swatch, enter in your desired number and select Save in the top-right corner.
Storefront Examples
By default, the swatch sizes are 5 rem:
Here is an example of a 2.5 rem swatch size:
Finally, here is an example of a 1 rem swatch size:
With custom CSS, the size of your swatches can be adjusted through your Shopify theme's code.
- From the Shopify admin, select Online Store, then Actions > Edit code.
- Under Assets, select Add a new asset.
- Select Create a blank file.
- Enter the name bold, and select .css from the dropdown menu.
- Select Add asset.
- 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;
} - Select Save.
- Under Layout, select theme.liquid.
- Find the </head> element near the top of the file.
- Copy and paste this line right before </head>:
{{ 'bold.css' | asset_url | stylesheet_tag }}
- Select Save.
Your swatch sizes should now be adjusted to the sizes entered within the bold.css asset on your theme.