This guide provides a reference for using custom CSS in InkSoft to further personalize the appearance of your online stores and pages. It explains how custom styles can be applied, highlights commonly used CSS options, and helps merchants make visual adjustments that better reflect their brand while enhancing the overall customer experience.
The files below are designed to give you a basic structure to work from and does not include all available selectors that can be targeted within the application. This resource is intended to be used by individuals who have experience with custom coding and web development.
Note: We cannot offer support for custom coding and customization of your page.
PRO TIP: Being as specific as possible is key!
The #body prefix is used to enforce a more specific selector and to ensure that your custom styles are applied. However, in some scenarios, you may have to use !important to override default element attributes. Keeping this in mind can save some headaches down the road.
TABLE OF CONTENTS
1. Buttons 8. Component: Featured Products
2. Modals 9. Sign In / Create Account
3. Header 10. Product Catalog
4. Footer 11. Product Detail Page
5. Component: Promo Bar 12. Designer
6. Component: Fundraiser 13. Shopping Cart
7. Component: Countdown 14. Checkout
1. BUTTONS
/* Shared Button Styles */
#body button.mat-button,
#body button.mat-fab,
#body button.mat-flat-button,
#body button.mat-icon-button,
#body button.mat-mini-fab,
#body button.mat-raised-button,
#body button.mat-stroked-button {
/*
border-radius: 100px;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: 40px;
*/
}
/* Primary Buttons */
#body button.mat-raised-button {}
2. MODALS
/* Shared Styles */
#body .mat-dialog-title {}
#body .mat-dialog-content {}
#body .mat-dialog-actions {}
/* Page Overlay that displays behind the modal when open */
#body .cdk-overlay-dark-backdrop {}
/* Default Modal */
#genericConfirmDialog {}
/* Bulk Order Dialog */
#bulkOrderDialog {}
/* Contact Us Modal */
#contactUsModal {}
/* Report a Problem Modal */
#cartFeedbackModal {}
/* Item Added to Cart Modal */
#itemAddedDialog {}3. HEADER
#StoreHeader-component {}
/* Header Links */
#StoreHeader-component a {}
/* Only applies when a logo image is uploaded */
#storeLogo .logo-image {}
/* Store Name will show when there is no logo uploaded */
#storeLogo .store-name {}
/* Mobile Nav Drawer */
#mobileHeaderWrap {}
.mobile-header--close-icon {}
ul.mobile-menu {}
li.mobile-menu-item {}
a.mobile-menu-link {}
a.mobile-menu-link:hover {}
.mobile-header-title {}4. FOOTER
/* Shared Footer Styles */
#StoreFooter-component {}
#StoreFooter-component .main-footer-wrap {}
#StoreFooter-component .column h5 {}
#StoreFooter-component .column ul {}
#StoreFooter-component .column li {}
#StoreFooter-component .column a {}
/* Layout 4 */
#StoreFooter-component .footer-layout-4 ul.navigation-wrap {}
#StoreFooter-component .footer-layout-4 ul.navigation-wrap li {}
#StoreFooter-component .footer-layout-4 ul.navigation-wrap a {}
#StoreFooter-component .footer-layout-4 ul.social-networks-wrap {}
#StoreFooter-component .footer-layout-4 ul.social-networks-wrap li {}
#StoreFooter-component .footer-layout-4 ul.social-networks-wrap a {}5. COMPONENT: PROMO BAR
#body promo-bar-wrapper {}
#body promo-bar-wrapper span {}6. COMPONENT: FUNDRAISER
/* Fundraiser Shared */
#body .fundraiser-block {}
/* Fundraiser Layout 1 */
#body .fundraiser-block .count-down-number {}
#body .fundraiser-block .raised-amount {}
#body .fundraiser-block .raised-label {}
#body .fundraiser-block .goal-progress {}
#body .fundraiser-block .mat-progress-bar {}
#body .fundraiser-block .end-date-description {}
/* Fundraiser Layout 2 */
#body .fundraiser-block .background-description {}
#body .fundraiser-block .goal-information {}
#body .fundraiser-block .towards-goal {}
#body .fundraiser-block .days-left {}
#body .fundraiser-block .ends-at {}7. COMPONENT: COUNTDOWN
#body .countdown-block {}
#body .countdown-block .headline h1 {}
#body .countdown-block .countdown-container {}
/* Countdown Layout 1 */
#body .countdown-block .flip-clock-wrapper {}
#body .countdown-block .flip-clock-wrapper div.inn {
/* The numbers displayed within the flip cards */
/*
color: #ccc;
text-shadow: 0 1px 2px #000;
background-color: #333;
font-size: 60px;
*/
}8. COMPONENT: FEATURED PRODUCT
#body .store-products-wrap {}
#body .store-products-wrap .product-list-wrap {}
#body .store-products-wrap .product-list-wrap .product-list-header h2 {}
#body .store-products-wrap .product-list-wrap .product-list-header span {}
#body .store-products-wrap .product-card {}
#body .store-products-wrap .product-card:hover {}
#body .store-products-wrap .product-color-wrap {}
#body .store-products-wrap .product-name {}
#body .store-products-wrap .product-manufacturer {}
#body .store-products-wrap .product-price {}
#body .store-products-wrap .mat-raised-button {}9. SIGN IN / CREATE ACCOUNT
account-login .store-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}
create-account .store-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}
#body .login-container-wrap {}
#body .create-acct-container-wrap {}
#body .login-container-wrap .store-logo-wrap,
#body .create-acct-container-wrap .store-logo-wrap {}
#body .login-container-wrap .store-logo-link .logo-image,
#body .create-acct-container-wrap .store-logo-link .logo-image {}
#body .login-container-wrap .store-logo-link h1.text-wrap,
#body .create-acct-container-wrap .store-logo-link h1.text-wrap {}
#body .login-container-wrap .card {}
#body .login-container-wrap .card h1 {}10. PRODUCT CATALOG
product-category .store-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}
/* Category List */
#body a.category-view-all {}
#body ul.category-list {}
#body ul.category-list li {}
/* Product List Wrap */
#body .product-list-wrap {}
#body .product-list-wrap .actual-category-info {
/* Category header above product grid */
}
#body .product-list-wrap .actual-category-info p {
/* Select Category Name */
}
#body .product-list-wrap .category-path {
/* Selected Category Breadcrumps, ex. All Products / Long Sleeve */
}
#body .product-list-wrap .category-path span {
/* Current Category */
}
#body #sortByContainer {}
/* Product Card */
.product-card {}
.product-card:hover {}
.product-card .product-list-img-wrap {}
.product-card .product-list-img-wrap .product-list-img {}
.product-card .product-info {}
.product-card .product-info .product-color-wrap {}
.product-card .product-info .product-meta-wrap {}
.product-card .product-info .product-name {}
.product-card .product-info .product-manufacturer {}
.product-card .product-info .product-price {}11. PRODUCT DETAIL PAGE
product-detail .store-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}
/* Product Preview Carousel */
#body .product-carousel-wrap {
/*
background: #fff;
border: 1px solid #eee;
*/
}
/* Product Detail Panel */
#body .product-detail-panel {
/*
background: #fff;
border: 1px solid #eee;
border-radius: 2px;
*/
}
#body .product-panel-group-item {
/*
border-bottom: 1px solid #eee;
padding: 24px;
*/
}
#body .product-panel-group-item.has-background {
/*
background: #f5f5f5;
*/
}
/* Product Info */
#body .product-detail-panel .product-title {}
#body .product-detail-panel .product-manuf {}
#body .product-detail-panel .product-price {}
/* Color Select */
#body .product-detail-panel #productStyleSelect {}
#body .product-detail-panel #productStyleSelect .color-swatch {}
/* Size Select and Size Chart Link */
#body .product-detail-panel #product-size-select-row {}
#body .product-detail-panel a#sizeChart {}
/* Quantiy Select and Dropdown */
#body .product-detail-panel button#quantityDropdownTrigger {}
#body .product-detail-panel .quantity-dropdown-menu {}
#body .product-detail-panel .quantity-dropdown-menu .quantity-option {}12. DESIGNER
/* Catalog Header */
#body .ds-select-product-container .product-catalog-wrap {}
#body .ds-select-product-container .header-and-filters {}
#body .ds-select-product-container .product-catalog-header {}
#body .ds-select-product-container .product-catalog-header h1 {}
#body .ds-select-product-container .product-catalog-header p {}
/* Filter Options */
#body .ds-select-product-container #categoryFilterContainer {}
#body .ds-select-product-container #filterByContainer {}
#body .ds-select-product-container #sortByContainer {}
/* Product Card */
#body .ds-select-product-container .product-card-wrap {}
#body .ds-select-product-container .product-card-wrap:hover {}
#body .ds-select-product-container .product-card-wrap.selected-state {}
#body .ds-select-product-container .product-card-wrap .product-img {}
/* Product Detail Panel */
#body .ds-select-product-container .product-detail-container {}
#body .ds-select-product-container .product-detail-container #productName {}
#body .ds-select-product-container .product-detail-container #productManufacturer {}
#body .ds-select-product-container .product-detail-container #productManufacturerSku {}
#body .ds-select-product-container .product-detail-container .product-image-container {}
#body .ds-select-product-container .product-detail-container #designNowBtn {}
#body .ds-select-product-container .product-detail-container #descriptionLabel {}
#body .ds-select-product-container .product-detail-container #productLongDescription {}13. SHOPPING CART
store-cart .store-page ,
store-cart .cart-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}
/* Secure Checkout Callout */
store-cart security-component {}
/* Cart Item Cards */
#body .cart-items {}
#body .cart-items .card {}14. CHECKOUT
#body .checkout-wrap {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}
#body #checkout-progress-nav {}
#body #checkout-progress-nav ul.breadcrumb {}
#body #checkout-progress-nav li {}
#body #checkout-progress-nav a {}
#body #checkout-progress-nav li.active a {
/*
background: #3491c8;
*/
}
#body #checkout-progress-nav li.active a:after {
/*
border-left-color: #3491c8;
*/
}Please take a moment to visit our Developer Settings guide. This will give you a brief introduction to Developer Settings where your CSS code will live in the store.
Comments
0 comments
Article is closed for comments.