Browse by Topic

Customizing Swatch Sizes on Free BigCommerce Themes (Blueprint)

 

These instructions requires knowledge of HTML/CSS. See Getting Help for avenues of assistance.

These instructions apply to free, legacy Blueprint themes that have not been customized. As always, we recommend backing up your current theme customizations before making any changes.

Blueprint themes this article pertains to:

Classic NextClassicHealth and BeautyMusik
BeautificationClassic HipHipsterOutdoor
BedazzledFun N GamesHome IQRunway
Bride to BeGrease MonkeyMunchenWine Store

By default, color or pattern swatch options display at 18px by 18px on free Blueprint themes. If you have not already set up your swatches, follow the steps in Product Options: Swatch to do so before continuing.

Example of swatch options at their default size.

Uploading Custom Pattern Swatch Images

This section applies to clients who are using pattern swatches, which allow you to upload a custom image to be used for a swatch. If you are not using pattern swatches, skip to Updating custom.css.

In order to display pattern swatches at custom sizes, you must have custom images created at the exact dimensions you would like them to display on your storefront. When you have your custom-sized images ready, follow the instructions below to upload them to your store’s WebDAV server.

Renaming Your Custom Images

1. Go to Products › Product Options, then click the Option Name of the swatch you want to customize.

2. Click the Current image link of a pattern swatch you have configured. The image will open in its own tab.

"Current image" link highlighted in the list of option values

3. Note the ID of the image in the address bar, which is listed just before .preview.

Example of swatch image ID.

4. Update the name of the custom image you have stored on your computer to [ID].thumbnail.jpg, replacing [ID] with the ID of your image. For example, 79.thumbnail.jpg.

Repeat this process for any other pattern swatch images you have set up before continuing.

Uploading Your Custom Images

In order to complete these steps, you must have a WebDAV client such as CyberDuck  installed on your computer. For more information see Connecting to WebDAV.

1. In your control panel, go to Server Settings File Access (WebDAV), then click Download for the WebDAV client you have installed on your computer. A connection file for that WebDAV client will download to your computer.

Download WebDAV connection file buttons

2. Open the downloaded file. It will automatically open a connection to your store's server in your WebDAV client.

3. Upload your renamed image files to the product_images/attribute_value_images directory. Since you are replacing the existing images with updated versions, you may be asked if you are sure that you want to overwrite the existing ones; be sure to select Continue.

Example of overwriting existing files.

Example of uploaded swatch image.

Updating custom.css

1. In your control panel, go to Storefront Design › My Themes, then click Edit/HTML CSS.

Edit HTML/CSS link

2. In the list of Other Template Files on the left, select custom.css.

The custom.css file.

Use Ctrl F or Command F to quickly locate template files in the list.

3. Copy and paste the first code below at the end of the file, replacing the [size] with the width and height of your custom images. Clients using the Beautification design theme should use the second code instead.

/* Customize Swatch Sizes */
.productOptionPickListSwatch .thumbnail, .productOptionPickListSwatch .swatchColour {
    width: [size]px !important;
    height: [size]px !important;
}

Example:

Updated custom.css example.

Beautification Theme Code

/* Customize Swatch Sizes */
.productOptionPickListSwatch .thumbnail, .productOptionPickListSwatch .swatchColour {
	width: [size]px !important; height: [size]px !important;
}
    html.javascript div.productOptionPickListSwatch li, .productOptionPickListSwatch .textureContainer, .productOptionPickListSwatch .swatchColours {
    height: [size]px !important;
}​

Example:

Example of edited custom.css for Beautification theme.

4. Save your changes, then view a product on your storefront which has a swatch option applied to it.

Example of customized swatches.

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce CommunityAsk a Design Partner Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?