Drawer Cart CSS Styling Options

Here are some CSS options for customizing different aspects of Giftship’s Drawer Cart.

To get any of these in place, copy / paste them into the CSS box by going to Apps –> Giftship –> Global Settings –> Drawer Cart –> and scrolling down to the CSS box. Remember to Save you customizations.

Because the CSS is stored within Giftship, it will not be effected by theme updates.

Background Blur

#gsDrawer.gs__active .gs__drawer-overlay {
backdrop-filter: blur(5px);
}

Animated Free-shipping Bar

#gsDrawer .gs__shipping-bar-wrapper {
background-color: rgba(0, 123, 255, 0.50);
overflow: inherit;
max-width:100%;
}

#gsDrawer .gs__shipping-bar-wrapper .gs__shipping-bar-progress {
background-color: #007bff;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
-webkit-animation: progress-bar-stripes 0.5s linear infinite;
animation: progress-bar-stripes 0.5s linear infinite;
position: relative;
}

@keyframes progress-bar-stripes {
from {
background-position: 10px 0;
}
to {
background-position: 0 0;
}
}

Hide Upsell Overlay on Mobile

@media (max-width: 768px) {

	#gsDrawerBodyAppContainer .gs__cart-option[data-upsell-type="overlay"],
	#gsDrawerFooterAppContainer .gs__cart-option[data-upsell-type="overlay"],
	#gsDrawerHeaderAppContainer .gs__cart-option[data-upsell-type="overlay"] {
		display: none;
	}

}

Rounded Corners

#gsDrawerBodyAppContainer input[type=text],
#gsDrawerFooterAppContainer input[type=text],
#gsDrawerHeaderAppContainer input[type=text] {
border-radius:4px;
}

#gsDrawer .gs__drawer-slider {
background-color:transparent;
}

#gsDrawer form.gs__cart-drawer-form {
margin: 20px;
background: #fff;
border-radius: 10px;
padding: 20px;
}

#gsDrawer:not(.gs__preview) [data-upsell-type=overlay][data-first-instance=true] .gs__overlay-upsell-item {
border-radius: 10px;
}

#gsDrawerFooter button.gs__drawer-footer-btn {
border-radius: 50px;
}