Skip to main content

CSS Guide

Customize Your Live Experience on Terrific

You don't need to be a developer to personalize how Terrific looks on your site. This guide walks you through everything from where to paste the code, to what each snippet actually changes. Just copy, paste, and save.

What is CSS and why does it matter?

CSS is a simple styling language that controls how things look: colors, sizes, fonts, positions. Think of it like changing the formatting in a Word document, but for your live sessions and videos. You don't need to understand it to use it. Just find the effect you want below, copy the code, and paste it in the right place.

Step 1: Where to add your CSS

All CSS customizations go into the CSS Editor inside your Terrific Admin panel. Here's how to get there:

1. Open your Terrific Admin panel:

2. Go to Settings at the bottom of the left side menu:

3. Select CSS editor from the tabs under Store Settings title:

4. You’ll find the different sections that can be customized:

Step 2: Pick the right tab

The CSS Editor has 6 tabs. Here's what each one controls:

Tab

What it affects

Live Session App

Everything inside a live session: chat, video, products

Live Session SDK

The pop-up button that launches the live session

Carousel App

Content inside carousel cards (cart, buttons, player)

Carousel SDK

The video frame itself: size, border radius

Scene Builder App

Content inside each Scene Builder

Scene Builder SDK

The Scene Builder as a whole: carousel size, card layout

Step 3: Copy and paste your snippet

Find what you want to change below. Each snippet includes a plain-language explanation of what it does and which values you can tweak.

Live Session App

Change the font and text size

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family: 'Roboto', sans-serif !important;
  font-size: 20px !important;
}

Get the desire font from Google Fonts, change 'Roboto' to any font name, and 20px to your preferred size. Remember to use !important to overwrite the default style.

Before:

After:

Change the color of chat messages

.message-text {
  color: #7ebc51ff;
}

Replace white with any color name (black, red) or a hex code like #FF5733.

Before:

After:

Resize product thumbnails

.product-image-mobile {
  width: 122px !important;
}

Some styles are specific to desktop and mobile. In this case, the thumbnails have a default size of 80px wide by 122px high. To make the thumbnails square, override the width and set it to 122px. If you want to keep the thumbnails square but make them larger, set both the width and height to the same value and use !important to override the default styles.

Before:

After:

Hide product prices

.item-price,
.price {
  display: none !important;
}

Useful if you don't want prices shown during the live session.

Before:

After:


Rename the "Remind Me" button

button.btn-responsive.btn-rounded.btn-base {
  justify-content: flex-start !important;
}
button.btn-responsive.btn-rounded.btn-base.btn-primary.btn-small {
  color: transparent !important;
}
button.btn-responsive.btn-rounded.btn-base.btn-primary.btn-small::after {
  content: "YOUR TEXT HERE";
  position: absolute;
  left: 53%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

Replace "YOUR TEXT HERE" with the label you want displayed on the button.

Before:

After:

Live Session SDK

Change the font, size, and color of the pop-up button

#terrific-minimize-pop-up-button {
  background: #000000 !important;
  color: #ffffff !important;
  font-family: 'Arial Black', sans-serif !important;
  font-size: 15px !important;
}

Replace #000000 for any hex of the desire color on the background of the button. Replace #ffffff for the color of the text.

Before:

After:

Round or square the button corners

#terrific-minimize-pop-up-button {
  border-radius: 5px !important;
}

Higher number = more rounded. Use 0px for a sharp square button.

Before:

After:

Replace the button text with custom copy

#terrific-minimize-pop-up-button {
  position: relative;
  color: transparent !important;
}
#terrific-minimize-pop-up-button::before {
  content: "LIVE SHOPPING";
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Replace "LIVE SHOPPING" with whatever label you want.

Before:

After:

Carousel App

Change color of play button and navigation arrows

/* Play button */

[class*="carrousel_play-button-overlay__"] {
	background: #000000 !important;
}

/* Play button icon */

[class*="carrousel_play-button-overlay__"] svg path {
	fill: #ffffff !important;
}


/* Navigation arrow */

[class*="carrousel_scroll-button__"] {
	background: #000000 !important;
}

/* Navigation arrow icon */

[class*="carrousel_scroll-button__"] span {
	color: #ffffff !important;
}

Before:

After:

Change navigation arrows icon

[class*="carrousel_scroll-button__"].scroll-right span {
  font-size: 0 !important;   
  line-height: 0 !important; 
  color: transparent !important;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path d='M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z' fill='black' transform='translate(100,100) rotate(180)'/></svg>");
  width: 60% !important;
  height: 60% !important;
  display: inline-block !important;
}

[class*="carrousel_scroll-button__"].scroll-left span {
  font-size: 0 !important;   
  line-height: 0 !important; 
  color: transparent !important;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path d='M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z' fill='black'/></svg>");
  width: 60% !important;
  height: 60% !important;
  display: inline-block !important;
}

Replace the content inside the parentheses in background: url(...) with the URL of an image or SVG.

Before:

After:

Hide product card

[class*="product-buttons_product-item__"] {
  display: none !important;
}

The product card will only be hidden outside the carousel.

Before:

After:

Hide the "Powered by Terrific" footer

[class*="card-footer_container__"] {
  display: none !important;
}

Before:

After:

Change the progress bar color

[class*="progress-bar_progress-bar-fill__"] {
   background: #ffffff !important;
}

Replace #ffffff with the desired hex color.

Before:

After:

Carousel SDK

Change height of the carousel

#terrific-timeline-iframe {
   min-height: auto !important;
   height: 250px !important;
}

The minimum height of the carousel is 400px. If you want to make it shorter, set min-height to auto and then set the desired height. If you want to make it taller, there is no need to override min-height.

Before:

After:

Scene Builder App

Change color background

#scene-preview-root {
   background: #000000 !important;
}

Replace #000000 with the desired hex color.

Before:

After:

Change navigation arrows button

.swiper-button-prev, .swiper-button-next {
    color: #ffffff !important;
    border-radius: 50%;
    background: #1D487E !important;
    width: 40px;
    height: 40px;
    padding: 10px;
}

Replace #ffffff with the desired hex color for the arrows and #1D487E for the background color.

Before:

After:

Tips for non-developers

How do I find what to change?

Right-click any element on your page → click Inspect → look for the element in the panel that opens. This shows you the CSS classes already applied, which helps identify what to target.

My change isn't working. What do I do?

Add !important at the end of the value — before the semicolon — like this: color: red !important;. This forces the style to apply even if something else is overriding it.

Always test first.

Need help?

Our team can help you find the right CSS selector for any element. Reach out and we'll point you in the right direction.

Related Articles
Did this answer your question?