CSS

Bootstrap Utility Example

p-4 rounded-4 shadow m-auto position-relative overflow-hidden

Css

Custom CSS Example

custom-image

Css

.custom-image {
}

Fix Width of Small Column

fix-column-width

Css

@media only screen and (min-width: 700px) {
  .fix-column-width {
     min-width: 200px;
  }
}

Top Border

add-top-border

Css

.add-top-border {
   border-top: 1px solid #CCC;
}

Bottom Border

add-bottom-border

Css

.add-bottom-border {
    border-bottom: 1px solid #CCC;
}

Disabled Button Theme

.custom-disabled-button

Css

 .custom-disabled-button .btn.disabled, .btn:disabled, fieldset:disabled .btn {
     opacity: .25;
}

Bold ProductNumber

bold-product-number

Css

.bold-product-number .item_swift_productnumber {
   font-weight: 700 !important;
}
.bold-product-number {
   white-space: nowrap;
}

Strikethrough Padding

strikethrough-padding

Css

.strikethrough-padding .text-decoration-line-through {
    padding: 1rem !important;
}
@media (min-width: 768px) {
    .strikethrough-padding .text-decoration-line-through {
        padding: 0.25rem 0.5rem !important;
    }
}

Hide Stock Description

hideStockDescription

Css

.hideStockDescription .stock_description { display: none; }

Style Stock Description

styleStockDescription

Css

.styleStockDescription .stock_description
{
    margin-top: 15px;
    display: block;
    border: 1px solid black;
   font-size: 9pt;
   text-align: left;
   padding: 5px 10px;
}

Style Hazmat Warning

hazmatWarning

Css

.hazmatWarning
{
    margin-top: 15px;
    display: block;
    border: 1px solid black;
   font-size: 9pt;
   text-align: left;
   padding: 5px 10px;
    width: 80%
}

Fix MegaMenu

fixMegaMenu

Css

.fixMegaMenu .d-flex.flex-column.align-items-start.gap-3  {
   padding-right: 8px;
}

Set max width for Image

custom-image-max-width

Css

@media (min-width: 993px) {
  .custom-image-max-width .item_swift_productdefaultimage {
     max-width: 250px
  }
}
@media (max-width: 992px) {
  .custom-image-max-width .item_swift_productdefaultimage {
     max-width: 160px
  }
}
@media (max-width: 700x) {
  .custom-image-max-width .item_swift_productdefaultimage {
     max-width: 100px
  }
}

Fix ProductList for Mobile

custom-product-list

Css

.custom-product-list {
   --bs-columns: 4 !important;
}

Tools Menu

custom-tools-menu

Css

.custom-tools-menu nav ul li a span {
  font-weight: 700;
  font-size: 11pt;
}