What Is CSS?
CSS stands for Cascading Style Sheets. It's a simple way to control how things look on your website – like changing fonts, colors, sizes, or hiding elements. CSS doesn’t affect what content is shown – just how it appears.
Key Terms You Should Know:
Element: Any piece of your website, like a title, button, or image.
Class: A label for a group of elements. You'll use this to tell the CSS which part you want to style.
Selector: The name of the element or class you want to target.
Property: What you want to change (like color, size, font).
Value: The setting you want to apply (like red, 16px, bold).
How to Find the Right Class:
Right-click the element on your website and choose "Inspect" (on Chrome or Firefox).
A panel will open showing the site’s code. Look for something like:
<div class="product-title">Cool Shirt</div>
In this case,
product-titleis the class name.To change it, you’ll write your CSS like this:
.product-title { /* your changes here */ }
Now, let’s walk through the most useful CSS changes.
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 a Font
Go to Terrific Admin panel
Store Settings- CSS editor
click on the CSS editor to open it
choose if you want to edit the CSS code of the Live session or Shoppable video.
paste this code there : ** change the font ('Roboto' etc..) to the relevent one you need.
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif !important;
}* if needed - import the fonts from google font. then paste the @import code in the first line as mentioned above.
Click done
click save changes
now check the embeded Live session/ shoppable video on your website - the font should be updated.
3. How to Increase or Decrease Elements
Use the transform: scale() property. A value greater than 1 increases the size, and less than 1 decreases it.
Example:
/* Makes the video window 1.5 times bigger */
.video-window {
transform: scale(1.5);
}
/* Makes the product image smaller */
.product-image {
transform: scale(0.8);
}
👉 Change the class name (like .video-window) to match the element you want to adjust.
4. How to Hide Elements
Use display: none; to completely hide an element.
Example:
/* Hides the timer */
.timer {
display: none;
}
/* Hides the brand logo */
.brand-logo {
display: none;
}
👉 Just replace .timer or .brand-logo with the element you want to hide.
5. How to Edit a Background Color
To change the background color: change the color code ( for example: #FEFCF6) to the one you need....
/* Session Background */
.main-content {
background-color: #FEFCF6 !important;
}
You can find color codes here or use common names like blue, black, etc.
6. How to Add a Word or Sentence
Use the ::after pseudo-element to add text after a chosen element.
Example:
/* Adds a label after the product title */
.product-title::after {
content: " - Limited Time Offer!";
color: orange;
font-weight: bold;
}
👉 This text will appear after the product title. You can also use ::before if you want it to appear before.
Final Tips:
Always test changes on your staging or test website first.
Ask our team if you’re unsure about a class name.
If your CSS isn't working, try using
!importantor double-check the class name.