Articles on: Live Shopping Page

Add a Custom CSS to the Live Shopping Page

By default, the Title, Date, Description, and Countdown will mirror the font size and color of your theme. However, if you’d like, you can add a custom touch with CSS to your Live Shopping page.

From your Shopify Admin / Personalize, head to the Live Shopping page in the Pages selector

Inject the following CSS code with appropriate font size in px and color in hex

Personalize the Title font size and color
.lmuLiveTitle {
font-size: 20px;
color: #63197a;
}

Personalize the Date font size and color
.lmuLiveDate {
font-size: 20px;
color: #63197a;
}

Personalize the Description font size and color
.lmuLiveDescription {
font-size: 14px;
color: #63197a;
}

Personalize the Countdown font size and color
.lmuCountdownValue {
font-size: 24px;
color: #63197a;
}

Hiding the countdown button
.lmuCountdownAndIcons {
display: none !important;
}
#livemeup-landingpage .lmuLiveButton {
margin-top: auto !important;
}

Personalize the "Notify Me" button color
.lmuButton {
background-color: #63197a;
}

AND

Modify the background color of the Live Block
.lmuHighlightedEventsSection {
background-color: #f2f2f2;
padding: 45px;
border-radius: 10px;
box-shadow: 10px;
}

Hide shadow blocks on the Live Block
lmuLiveDescription:after {
box-shadow: inset 0px -18px 27px 5px red;
-moz-box-shadow: inset 0px -18px 27px 5px red;
-webkit-box-shadow: inset 0px -18px 27px red;
}

Modify the background color of the Replay Block
.lmuReplaysWrapper {
background-color: #f2f2f2;
padding: 45px;
border-radius: 10px;
}

Hide shadow blocks on the Replay Block
.lmuReplayDescription:after {
box-shadow: inset 0px -18px 27px 5px red;
-moz-box-shadow: inset 0px -18px 27px 5px red;
-webkit-box-shadow: inset 0px -18px 27px red;
}

Hide the Title of the Replay section
.lmuReplaysSectionTitle {
display: none;
}

Updated on: 23/04/2025

Was this article helpful?

Thank you!