Bootstrap Utility Example
p-4 rounded-4 shadow m-auto position-relative overflow-hidden
Css
Custom CSS Example
custom-image
Css
.custom-image {
}
Custom Callout Example
callout
Css
.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
content: "";
background: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9InJnYmEoODUsIDAsIDI1NSwgMSkiIGNsYXNzPSJiaSBiaS1hc3RlcmlzayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAwYTEgMSAwIDAgMSAxIDF2NS4yNjhsNC41NjItMi42MzRhMSAxIDAgMSAxIDEgMS43MzJMMTAgOGw0LjU2MiAyLjYzNGExIDEgMCAxIDEtMSAxLjczMkw5IDkuNzMyVjE1YTEgMSAwIDEgMS0yIDBWOS43MzJsLTQuNTYyIDIuNjM0YTEgMSAwIDEgMS0xLTEuNzMyTDYgOCAxLjQzOCA1LjM2NmExIDEgMCAwIDEgMS0xLjczMkw3IDYuMjY4VjFhMSAxIDAgMCAxIDEtMXoiLz4KPC9zdmc+);
position: absolute;
height: 200px;
background-position: center;
right: 0;
top: 0;
background-size: 100%;
z-index: 0;
transform: translate(20%, -20%) rotate(45deg);
background-repeat: no-repeat;
aspect-ratio: 1/1;
opacity: 0.6;
}
Paragraph spacing
Css
p:empty {
margin-bottom: 1rem;
}
p {
margin-bottom: 0rem;
margin-top: 0;
}
p:last-of-type {
margin-bottom: 0;
}
Menu styling
menu-styling
Css
.menu-styling .text-wrap-nowrap {
text-transform: capitalize;
font-weight: 500;
}
.menu-styling {
box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 30%);
-webkit-box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 30%);
}
Top Menu styling
top-menu-styling
Css
.top-menu-styling,
.top-menu-styling .text-wrap-nowrap {
text-transform: capitalize;
font-weight: 400;
font-size: 0.85rem;
}
Global Styling
Css
#ShippingMethodsGroup .text-price {
display: none;
}
Product List Card
product-card
Css
.product-card article.product, .product-card ul.slider-container>li {
border: 1px solid #EAECF0;
border-radius: 10px;
transform: translate(0px, 0px);
transition: 0.3s;
}
.product-card article.product:hover, .product-card ul.slider-container>li:hover {
transform: translate(0px, -3px);
}
.product-card .product-list.item_swift_productlistitemrepeater {
margin-bottom: 15px;
}
Employees
employees
Css
.employees .g-col > .h-100 > .d-flex.flex-column.gap-3 {
padding: 0rem 1rem 1rem;
}
.employees .g-col > .h-100 > .d-flex.flex-column.gap-3 > .gap-3 {
gap: 0.3rem!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}
.employees .g-col > .h-100 > .d-flex.flex-column.gap-3 .fs-8 {
font-size: 0.8rem!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}
Variant Grid View
product-grid-variant-styling
Css
.product-grid-variant-styling .item_swift_productstaticvariants article {
display: none!important;
}
.product-grid-variant-styling .item_swift_productstaticvariants article:first-of-type {
display: grid!important;
grid-template-columns: auto auto auto;
}
.product-grid-variant-styling .item_swift_productstaticvariants article:last-of-type {
display: grid!important;
grid-template-columns: auto auto;
}
.product-grid-variant-styling .item_swift_productstaticvariants article:first-of-type:after {
content: "-";
margin-left: 8px;
}
Mega Menu Styling
mega-menu-styling
Css
.mega-menu-styling ul.nav.flex-nowrap.menu_shop {
grid-gap: 1.5rem;
}
.mega-menu-styling svg#Layer_3 {
height: 120%;
width: 120%;
}
.mega-menu-styling .d-flex.flex-column.align-items-center.gap-1 {
grid-gap: 0.5rem!important;
}
.mega-menu-styling .col-4.col-xl-3.col-xxl-2 {
padding: 1rem;
}
.mega-menu-styling a[data-type="group"] {
padding: 0 0 0.5rem;
}