Customize CSS
If you know CSS, you can customize the themes by following this link. You can override theme classes and ids with custom CSS there.
You can also email us at support@buildateam.io email and request a free quote for custom development.
- Go to your admin panel and go to the store setup
- Go to Edit Code and find ‘customproductbuilder.css’ file there
Examples of Custom CSS (Kanevas store custom template)
/* Please use this file to customize the syles of the custom product builder */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
#product-builder {
width: 100%;
min-height: 600px;
position: relative;
border: none;
margin-top: 0;
font-family: 'Roboto', sans-serif ;
margin-bottom: 55px;
z-index: 1;
}
#product-builder
{noscroll}
#product-builder .cpb-product-builder{
margin-top: 0 !important;
}
/*TABS*/
.cpb-panels-tabs .react-tabs__tab-list{
margin: 20px 0 0;
padding: 0;
}
.cpb-panels-tabs {
position: relative;
top: 50px;
}
.sc-cmthru {
top: 0;
z-index: 1;
background: rgba(255, 255, 255, 0.9);
}
.onboardingMode .sc-cmthru {
position: relative!important;
margin-left: 8px!important;
top: -100px!important;
}
.cpb-panels-tabs li{
font-family: 'Roboto', sans-serif;
font-weight: normal !important;
font-size: 12px !important;
text-transform: uppercase;
color: #000 !important;
letter-spacing: 0px;
padding-bottom: 8px;
opacity: 0.8 !important;
}
.cpb-panels-tabs li.cpb-active{
opacity:1 !important;
}
.cpb-panels-tabs li.cpb-active::after{
content: none !important;
}
#product-builder .cpb-preview-arrows{
z-index: 9999 !important;
}
#product-builder .cpb-theme-provider.alpine-white .cpb-layout .cpb-panels-container .cpb-panels-tabs li {
border-bottom: 1px solid #D9D9D9;
margin: 0;
padding: 10px 11px;
}
.cpb-panels-container .cpb-panels-tabs li.cpb-active {
border-bottom: none!important;
border-left: 1px solid #D9D9D9;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
color: #595858!important;
}
/*Panels- Texte qui se trouve sous les tabs*/
.cpb-panels-container .cpb-product-panel{
padding: 0 8px;
margin-top: 10px;
font-size: 12px !important;
}
/*Categories
*/
.cpb-category-title{
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
line-height: 1.5;
color: #000;
margin: 5px 0 10px;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*Options dans les carrés*/
#product-builder .cpb-option.cpb-option-type-text{
border: 1px solid #D9D9D9;
border-radius: 0px;
padding: 2px 5px;
font-size: 11px;
color: #000;
}
#product-builder .cpb-option.cpb-option-type-text.cpb-active{
background: #000;
border: none;
color: #fff;
opacity: 1;
}
#product-builder .cpb-theme-provider.alpine-white .cpb-option.cpb-option-type-text:hover {
border-color: #000!important;
}
#product-builder .cpb-option.cpb-option-type-img{
border-radius: 4px !important;
}
#product-builder .cpb-option.cpb-option-type-img.cpb-active{
border-color: #555555 !important;
}
#product-builder .cpb-option.cpb-option-type-img{
width: 75px !important;
height: 75px !important;
}
#product-builder .cpb-option.cpb-option-type-img img{
height: 40px !important;
width: 40px !important;
border-radius: 4px !important;
}
/*Preview*/
.cpb-preview-container .sticky{
margin-top: 10px;
}
/*SUBMIT Buttons - Pour mettre en gras les boutons de soumission:
font-weight: bold;*/
.cpb-product-actions-container button{
background: #636060;
color: #faf5f5;
border: 0;
padding: 5px 5px;
text-align: center;
cursor: pointer;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
-webkit-transition: all 200ms ease 0s;
-moz-transition: all 200ms ease 0s;
-ms-transition: all 200ms ease 0s;
-o-transition: all 200ms ease 0s;
transition: all 200ms ease 0s;
-webkit-appearance: none;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 -3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 -3px rgba(0,0,0,0.1);
box-shadow: inset 0 -3px rgba(0,0,0,0.1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 38px !important;
margin: 5px !important;
}
.cpb-product-actions-container button:hover,
.cpb-product-actions-container button:active{
background: #cecece;
-webkit-transition: all 200ms ease 0s;
-moz-transition: all 200ms ease 0s;
-ms-transition: all 200ms ease 0s;
-o-transition: all 200ms ease 0s;
transition: all 200ms ease 0s;
}
.cpb-product-price{
position: relative;
font-family: Josefin Sans;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
line-height: 1.5;
color: #555555;
margin: 5px;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*Summary panel*/
.cpb-selection-summary{
padding: 10px 0;
}
.cpb-selection-summary-list{
margin: 5px 0 !important;
}
.cpb-selection-summary-list-item-panel{
font-size: 12px !important;
}
.cpb-selection-summary-list-item-categories{
margin: 5px 0 !important;
}
.cpb-selection-summary-list-item-categories li{
margin: 4px 7px !important;
}
.cpb-selection-summary-list-item-categories li .row{
margin-bottom: 0 !important;
}
.cpb-selection-summary-list-item-category-title{
font-size: 12px !important;
margin: 2px 0 !important;
}
.cpb-selection-summary-list-item-category-value{
font-size: 12px !important;
line-height: 1em !important;
text-transform: capitalize !important;
opacity: 0.8 !important;
margin: 5px 0 !important;
}
.cpb-selection-summary-list-item-category-price{
font-size: 12px !important;
}
.cpb-selection-summary-total{
list-style: none !important;
}
.cpb-selection-summary-total ul{
margin: 0;
}
.cpb-selection-summary-total-label,
.cpb-selection-summary-total-price{
font-size: 18px !important;
}
.cpb-product-actions {
margin-top: 70px;
}
.cpb-product-actions-container button:last-child {
margin-right: 15px!important;
}
/*Grosseur des carrés*/
#product-builder .cpb-option.cpb-option-type-img {
width: 40px !important;
height:40px !important;
}
@media(max-width: 1023px) {
.sc-cmthru {
position: static;
transform: translateY(0%);
}
#product-builder .cpb-theme-provider.alpine-white .cpb-layout .cpb-preview-container {
padding: 20px 0!important;
}
.exbodR {
right: 0!important;
}
}
#product-builder .cpb-preview-arrows .Polaris-Button__Content {
font-size: 3rem !important;
}
.cpb-preview-arrows-buttons .Polaris-Button {
border: none!important;
background: none!important;
box-shadow: none!important;
}
.cpb-preview-arrows-buttons .Polaris-Button__Content i {
color: #A5A5A5;
}
.cpb-preview-arrows-buttons .Polaris-Button__Content i:hover {
color: #000;
}
.cpb-preview-arrows-buttons .Polaris-ButtonGroup__Item:first-child,
.cpb-preview-arrows-buttons .Polaris-ButtonGroup__Item:last-child{
transform: rotate(-90deg)!important;
}
.cpb-preview-arrows-buttons .Polaris-ButtonGroup__Item:first-child {
left: -25px!important;
}
.cpb-preview-arrows-buttons .Polaris-ButtonGroup__Item:last-child {
right: -25px!important;
}
.cpb-preview-arrows-buttons .Polaris-ButtonGroup--segmented {
width: 100%!important;
justify-content: space-between!important;
position: absolute!important;
top: 200px!important;
}
/* if you should hide cpb-preview-arrows*/
/*
.cpb-preview-arrows-left,
.cpb-preview-arrows-right {
display: none !important;
}
*/
#product-builder div.cpb-preview-arrows-buttons {
/* display: none !important; */
left: 0;
transform: none;
}
.switch-tab-btn {
margin-left: 120px!important;
}
.cpb-category-options-container {
padding-top: 1px!important;
padding-left: 1px!important;
}
.margin-tab-btn {
margin-left: 50px!important;
}
/* add to cart button only on summary panel*/
/*
.cpb-panels-container .cpb-add-to-cart-button{
display: none !important;
}
.cpb-panels-container.cpb-summary-panel .cpb-add-to-cart-button{
display: inline !important;
}
.cpb-panels-container.cpb-summary-panel .cpb-next-tab-button {
display: none !important;
}
*/
/*Loading*/
/*hide loader*/
/*#product-builder .cpb-loader {
display: none;
} */
/*hide loader version*/
#product-builder .cpb-loader-version {
display: none;
}
/* change circle color*/
#product-builder .cpb-loader-center svg .cpb-svg-stroke {
stroke: #6d5cae;
}
/*insert your image loader*/
/*
#product-builder .cpb-loader-center svg {
display: none;
}
#product-builder .cpb-loader-center:before {
content: '';
display: block;
width: 120px;
height: 120px;
background-image: url(//YOUR_SHOPIFY_LOGO_URL);
background-size: contain;
background-repeat: no-repeat;
}
*/
Comments
0 comments
Please sign in to leave a comment.