CSS

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

Custom Slider Border Radius

custom-slider

Css

.custom-slider img{
border-radius: 24px;
}

Custom Border For Posters

poster-round-corners

Css

.poster-round-corners img{
border-radius: 24px;
}

Custom Product Slider Border Radius

custom-slider-products

Css

.custom-slider-products .slider-container>*{
border-radius: 24px;
}

Custom Round Corners For Product List

round-corner-product-list

Css

.round-corner-product-list article{
border-radius: 14px;
}

Login Screen

login-screen-full-height

Css

.login-screen-full-height{
height: 86vh;
}

Custom SearchBar

custom-search-bar

Css

.custom-search-bar {
margin-right: 4%;
}

Custom Search Field

custom-search-field

Css

.custom-search-field input {
background-color: #ffffff;
color: #000000 !important;
}
.custom-search-field .type-ahead-field {
background-color: #ffffff;
}
.custom-search-field svg {
color: #000000;
}

Custom Price Table

custom-pricing-table

Css

.custom-pricing-table .grid {
grid-column: span 10;
display: block;
}
.custom-pricing-table .mt-3{
margin-top: 0rem!important;
}

padding right add to cart button

Css

.btn.btn-primary.btn-sm.flex-fill.js-add-to-cart-button {
padding-right: 10px !important;
padding-left: 10px !important;
}

add to cart button favorite list

Css

.d-none.d-sm-block.btn.btn-primary.w-100.js-add-to-cart-button { 
background-color: #164F78 !important;
border-color: #164F78 !important;
}

add to cart button favorite list hover

Css

.d-none.d-sm-block.btn.btn-primary.w-100.js-add-to-cart-button:hover {
  background-color: #1F6FA8 !important;
  border-color: #1F6FA8 !important;
}

mini cart go to checkout button

Css

.btn.btn-primary.order-first {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

mini cart go to checkout button hover

Css

.btn.btn-primary.order-first:hover {
background-color: #1F6FA8 !important;
border-color: #1F6FA8 !important;
}

customer center my information button background color

Css

.btn.btn-primary.me-2 {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

customer center my information button hover

Css

.btn.btn-primary.me-2:hover {
background-color: #1F6FA8 !important;
border-color: #1F6FA8 !important;
}

send complaint button background color

Css

.btn.btn-primary.send-complaint {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

send complaint button hover

Css

.btn.btn-primary.send-complaint:hover {
background-color: #1F6FA8 !important;
border-color: #1F6FA8 !important;
}

add to cart flex

Css

.btn.btn-primary.btn-sm.flex-fill.js-add-to-cart-button {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

add to cart button text flex

Css

.d-none.d-md-inline {
width: 100% !important; 
max-width: 100% !important;
box-sizing: border-box !important;
}

add to cart favoritelist mobile

Css

.d-sm-none.btn.btn-primary.js-add-to-cart-button.p-0 {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

FF Highlight

Css

.ffHighlighted {
border-color: #F3A161 !important;
}

free shipping banner round corners

Css

.free-shipping-banner {
    border: 1px solid #164F78;
    padding: 12px 8px;
    font-size: 0.9rem;
    margin-top: 4px;
    border-radius: 2.5rem !important;
    justify-content: center !important;
    text-align: center;
}

Add new adress button color

Css

#AddNewAddressButton {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

adress button hover

Css

#AddNewAddressButton:hover {
  background-color: #1F6FA8 !important;
  border-color: #1F6FA8 !important;
}

submitter blue color

Css

#submitter {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

id submitter hover

Css

#submitter:hover {
  background-color: #1F6FA8 !important;
  border-color: #1F6FA8 !important;
}

create new favorite list

Css

#CreateNewFavoriteList {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

create new favorite list hover

Css

#CreateNewFavoriteList:hover {
  background-color: #1F6FA8 !important;
  border-color: #1F6FA8 !important;
}

update password button

Css

#UpdatePasswordButton {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

update password hover

Css

#UpdatePasswordButton:hover {
  background-color: #1F6FA8 !important;
  border-color: #1F6FA8 !important;
}

favorite button color blue

Css

.btn.swift_favorites-button {
color: #164F78 !important;
}

favorite list icon filled

Css

.feather.feather-heart-filled {
color: #164F78 !important;
}

cart buttons mobile margin top

Css

.btn.btn-secondary.full-width.swift_cartbackbutton {
margin-top: 10px !important;
}

add to cart button plp flex

Css

.btn.btn-primary.btn-sm.js-add-to-cart-button {
width: 100% !important; 
max-width: 100% !important;
box-sizing: border-box !important;
}

media query add to cart button text

Css

@media (max-width: 500px) {
.d-none.d-md-inline.span { 
display: none !important; 
}
}

quantity field cart round corners

Css

.form-control.text-center.swift_quantity-field {
border-radius: 2.5rem !important;
}

AddAllToCartButton blue

Css

#AddAllToCartButton {
background-color: #164F78 !important;
border-color: #164F78 !important;
}

AddAllToCartButton blue hover

Css

#AddAllToCartButton:hover {
background-color: #1F6FA8 !important;
border-color: #1F6FA8 !important;
}

diplay none sale badge

Css

.badge.badge-no-label.sale.rounded-0 {
display: none !important;
}