Customize Your Live Experience on Terrific (CSS Guide)

You can easily tailor the appearance of your live sessions with Terrific’s built-in CSS editor. Whether you want to adjust product sizing, change fonts, or restyle interface elements, this guide gives you the freedom to do it all, independently and efficiently.

Empower your self-service: each snippet is explained simply and is ready to copy-paste.

Where to Add CSS in Terrific

1. General Settings

Changes you make will only apply to Terrific sessions embedded on your site.
The changes will not be visible inside the Terrific platform.
You must add the code to the CSS editor provided by Terrific.

2. How to Change CSS

1. Go to the Terrific Admin panel

2. Store Settings- CSS editor

3. Click on the CSS editor to open it

4. Select the tab you want to edit. You’ll see 6 key tabs:

Live session App - styles visible inside the live session (chat, videos, products, etc.)
Live session SDK - styles for the Pop-up (button embedded etc.)
Shoppable Video App - Related to the content inside the iframe within the video format.
Shoppable Video SDK - outside of the iframe, such as size or border radius.
Timeline App - related to the content inside the different cards.
Timeline SDK - related to the outside of the iframe, meaning the carousel as a whole, card sizing, etc.

5. Copy and paste your Ready-to-Use CSS Snippets

6. Click "Done"

7. Click "Save Changes"

3. Ready-to-Use CSS Snippets

3.1 Live Session App

Styles visible inside the live session (chat, videos, products, etc.)

Change the Font and the Size of all text

app-live-session-content.live-session-content-mobile {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
}

💡 The font is "Bebas Neue' and the size is 12px.

Change the color of the desired element

app-live-session-content.live-session-content-mobile .message-text {
  color: white;
}

💡 This CSS targets the chat messages element.

Remove Chat Background

.chat-wrapper-mobile .chat .chat-messages .message-item {
  margin: 3px 0;
  padding: 0px 6px;
  line-height: 1;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 7px;
  backdrop-filter: blur(0px);
}

💡 Creates a transparent, minimalist chat interface that blends seamlessly with your site.

Resize the Progress Bar

.progress-bar {
  width: 50px !important;
  height: 300px !important;
}

💡 Adjust the progress bar to match your page design or layout proportions better.

Resize Product Thumbnails

div.btn-view-item.ng-star-inserted {
  display: block;
  width: 50px !important;
  height: 50px !important;
}

.wrapper {
  width: 50px !important;
  height: 50px !important;
}

💡 Customize how products are presented during the live, for instance, make thumbnails bigger or match your grid style.

Add a Gradient Background to the Live

div.bottom-gradient {
  bottom: 0;
  background-image: linear-gradient(0deg, #000, rgba(4, 60, 7, 7));
}

.camera-feed-wrapper-mobile .bottom-gradient,
.camera-feed-wrapper-mobile .top-gradient {
  position: absolute;
  z-index: 2;
  height: 350px;
  width: 100%;
}

💡 Add visual depth or overlay effects to enhance readability or aesthetic impact.

3.2 Live Session SDK

Styles for the Pop-up (button embedded, etc.)

Change the Font, the Size, and color of all text

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

💡 The font is "Bebas Neue' and the size is 12px.

Make edges round - For a Square Button Look, reduce border-radius Pixels

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

💡For a Square Button Look, reduce border-radius Pixels

Customize the Floating Minimize Button

button#terrific-minimize-pop-up-button {
  background: rgb(0, 123, 255) !important;
  padding: 8px 16px !important;
  bottom: 32px !important;
  width: 150px !important;
  border-radius: 0px;
  justify-content: center !important;
}

💡 Makes it easy to style and reposition the widget launcher, adjust size, color, corner radius, etc.

3.3 Shoppable Video App

Related to the content inside the iframe within the video format.

Change Cart and Share buttons Color

[class*="button_primary"] {
  --tw-text-opacity: 1 !important;
  color: rgb(0 0 0/ 1!important) !important;
  background: #AD8A32;
}

Change Close View Button Color

[class*="drawer_closeButton"] {
  top: -5px;
  background-color: #52B8AB;
  border: 3px solid white;
}

Change Cart Quantity color

[class*="product-cart-quantity_activeButton"] {
  color: #000000;
}

Change Font and Size of Featured Product Button Text

[class*="shoppable-video-container_seeItemButton"] {
  font-family: 'Impact', 'Arial Black', sans-serif;
  text-align: center;
  font-size: 16px;
}

Change Play Button Background Color

[class*="shoppable-video-gallery_playOverlay"] svg rect {
  fill: white !important;
}

Change Play Button Color

[class*="shoppable-video-gallery_playOverlay"] svg path {
  fill: black !important;
}

3.4 Shoppable Video SDK

Outside of the iframe, such as size or border radius.

Make edges round

To be defined

3.5 Timeline App

Related to the content inside the different cards.

Change the font of all text

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

[class*="carrousel_"],
[class*="media-display_"],
[class*="cta-button_"] {
  font-family: "Arizonia", cursive !important;
}

[class*="carrousel_"] *,
[class*="media-display_"] *,
[class*="cta-button_"] * {
  font-family: inherit !important;
}

💡 Apply Arizonia font to the whole Terrific Timeline

To do this, you first need to look for the desired font at the following URL: https://fonts.google.com/
Select the font, click Get font, then Get embed code, choose @import, and embed the code in your CSS editor. Select only the @import url.

Change all components' font in the scroll view to the Arizona font

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

/* Applies Arizonia globally */
html, body {
  font-family: "Arizonia", cursive !important;
}

/* Ensures everything inherits the font */
*, *::before, *::after {
  font-family: inherit !important;
}

Change the background and text color of the Timestamp

[class^="timestamp-display_timestampText__"] {
  background-color: white;
  color: black;
}

💡 Customize the timestamp

Change the Size of all text

To be defined

Change the product button "Click here"

[class^="product-buttons_product-text__"] {
  color: black; 
  background-color: pink;
  font-size: 10px;
  padding: 7px;
  border-radius: 6px; 
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

💡 Customize the button "Click here" with the following information:

color: Changes the text color to pink

background-color: Changes the background color to pink

font-size: Specify desired font size here

padding: Adds 7px padding around the content

border-radius: Rounds the corners with a 6px radius

font-weight: Sets the font weight to bold

display: Changes the display type to inline-block

text-align: Centers the text horizontally

Change the color of the image title

[class^="carrousel_card-title__"] {
  color: #00BDA3;
}

💡 This CSS changes the text color of the image title to #00BDA3.

Change the color of the image description

[class^="carrousel_card-description__"] {
  color: black;
}

💡 Change the color of the image under the image title

Remove the time from the timestamp, leaving only the date

[class^="timestamp-display_timestampText__"] {
  display: inline-block;
  direction: ltr;
  overflow: hidden;
  white-space: nowrap;
  width: 70px;
  text-indent: -60px;
}

💡 This CSS hides the time part of the timestamp by shifting it out of view, so that only the date remains visible.

Change the scroll button background to a specific color

.scroll-button {
  background: pink !important;
}

💡 This CSS forces the scroll button’s background to a specific color (pink in this case)

Change the play button color

.carrousel_play-button-overlay__hAVxU svg path {
  fill: #ff0000 !important;
}

Change the text color of the poll question

div[dir="auto"][class^="list-questions_questionTitle__"] {
  color: #000000 !important;
}

Change the color of the poll result bars when the answers are revealed

[class^="list-questions_itemBgResult__"], [class^="list-questions_itemBgResultSelected__"] {
  background-color: pink !important;
}

Change the pool question color

div[dir="auto"][class^="list-questions_questionTitle__"] {
  color: #000000 !important;
}

3.6 Timeline SDK

Related to the outside of the iframe, meaning the carousel as a whole, card sizing, etc.

Make edges round

To be defined

Best Practices for Self-Service

Always test changes in a staging environment
Use !important to override default styles when needed
Use “Inspect Element” in your browser to find the correct CSS selectors
Need guidance? Our team is ready to help identify the correct classes or targets

How to Customize the Look of Your Store

Going Live Via OBS Guide