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);
}

Here is what the overlay back-ground looks like blurred:

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;
}
}

Here is what the animated free shipping bar looks like: