Customizing the Built-In Carousel's Fonts (Blueprint)

 

This feature requires knowledge of HTML/CSS. See Getting Help for avenues of assistance.

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

The fonts used by the carousel are determined by the css code in the theme. It is possible to change the font specifically on the carousel by following our instructions below.

 

Did you know? You can 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 › My Themes, 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.

Heading, Text, and Button Text fields in the carousel

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.

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 Community Ask 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?