Customizing the Built-In Carousel's Fonts

These instructions apply to free Blueprint themes that have not been customized. The BigCommerce Support Team will not be able to assist with issues that occur after applying them to a previously customized theme. As always, we recommend backing up your current theme customizations before making any changes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce approved agencies or our Community Forum. You may also be able to achieve similar results by editing your slide images directly in a graphics editor. Check out our Carousel Tips and Tricks video for more information.

Copying the Font Reference Code

1. Go to the Google Fonts website.

2. Click Add to Collection on the font(s) you want to use.

The Add to Collection button.

3. Click Use located near the bottom of the screen.

4. Copy the Standard code from step 3.

Standard code example.

Keep this page open — you'll need it again in a later step.

Updating the HTMLHead.html File

1. Open a new browser tab, and log in to your BigCommerce store (or switch to that tab if you have already done so).

2. Go to Storefront Design › Design Option, then click Edit HTML/CSS.

3. In the list of Files used by this template, locate and click on HTMLHead.html.

The HTMLHead.html file.

4. Place your cursor in front of the </head> tag at the end of the file, then press Enter or Return once.

5. Paste the code you copied in step 3 on the empty line just above </head>.

6. Delete http: from the beginning of the code you pasted.

Before:

The Google font href code before.

After:

The Google font href code after.

7. Save your changes.

Updating custom.css

1. Go back to the Google Fonts page you left open in the Copying the Font Reference Code section.

2. Copy the code from step 4 into a notepad.

The Google font css code.

3. In your BigCommerce control panel, locate and click custom.css.

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

4. Copy and paste the code below that matches the carousel text element you want to customize, replacing the [font-family code] with the font-family code you copied.

Carousel text elements examples.

Heading

/* Carousel Font Customizations */
.slide-overlay h2.slide-heading {
	[font-family code]
}

Text

/* Carousel Font Customizations */
.slide-overlay p.slide-text {
	[font-family code]
}

Button Text

/* Carousel Font Customizations */
.slide-overlay .slide-button span {
	[font-family code]
}

Example:

Example of customized custom.css.

Result:

Example result of customization.

Updating Capitalized Text:

If your theme automatically capitalizes every letter in a text element, such as in the example above, simply add text-transform: none; on a new line below the font family to have the text display exactly as you entered it in the control panel.

Heading

/* Carousel Font Customizations */
.slide-overlay h2.slide-heading {
	[font-family code]
	text-transform: none;
}

Text

/* Carousel Font Customizations */
.slide-overlay p.slide-text {
	[font-family code]
	text-transform: none;
}

Button Text

/* Carousel Font Customizations */
.slide-overlay .slide-button span {
	[font-family code]
	text-transform: none;
}

Example:

Example of advanced custom.css code.

Result:

Example result of advanced customization.

Was this article helpful?