How to insert CSS to your stylesheet in Shopify
Drive 20-40% of your revenue with Avada
CSS means Cascading Style Sheets, it is a language used on style sheets. People use it to describe the presentation of a document written in a markup language such as HTML (Hypertext Markup Language). By using CSS, you can easily style your site, make your site easier to manage and create many more wonderful things, one of them is adding color swatches. In order to do insert CSS for your color swatches, here is a tutorial on How to insert CSS to your stylesheet.
Please kindly note that, for these following themes, the guide might not work:
- Venture
- Boundless
Please follow all the instructions below carefully to make your website better!
How to insert CSS to your stylesheet
- Step 1: Select the Assets folder
- Step 2: Find files with the
.css.liquidextension - Step 3: Copy and paste the CSS into your files
Step 1: Select the Assets folder
Firstly, you need to open the Edit HTML/CSS page and then find the folder named Assets. Finally, select the Assets folder and all the content in that folder will be shown to you.
Step 2: Find files with the .css.liquid extension
After opening the folder, you need to find all the files with the .css.liquid extension except for the file with the checkout.css.liquid extension. Please kindly note that there should be only one other file with that extension. The other file can be the file that has one of these following names: styles.css.liquid, style.css.liquid or shop.css.liquid.
Step 3: Copy and paste the CSS into your files
As soon as you have found the file in step 2, you need to open it with the online code editor. Once the file is opened, you only need to copy this following CSS at the bottom of that file. Please remember that the CSS must be at the bottom of your stylesheet. Here is the CSS:
/*
Swatches Styles
*/
{% assign width = '50px' %}
{% assign height = '35px' %}
.swatch {
margin:1em 0;
}
/* Label */
.swatch .header {
margin: 0.5em 0;
}
/* Hide radio buttons.*/
.swatch input {
display:none;
}
.swatch label {
/* Rounded corners */
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
/* To give width and height */
float:left;
/* Color swatches contain no text so they need to have a width. */
min-width:{{ width }} !important;
height:{{ height }} !important;
/* No extra spacing between them */
margin:0;
/* The border when the button is not selected */
border:#ccc 1px solid;
/* Background color */
background-color:#ddd;
/* Styling text */
font-size:13px;
text-align:center;
line-height:{{ height }};
white-space:nowrap;
text-transform:uppercase;
}
.swatch-element label { padding:0 10px; }
.color.swatch-element label { padding:0; }
/* Styling selected swatch */
/* Slightly raised */
.swatch input:checked + label {
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
box-shadow:0px 1px 2px rgba(0,0,0,0.8);
border-color:transparent;
}
.swatch .swatch-element {
float:left;
-webkit-transform:translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing:antialiased; /* webkit text rendering fix */
/* Spacing between buttons */
margin:0px 10px 10px 0;
/* To position the sold out graphic and tooltip */
position:relative;
}
/* Image with the cross in it */
.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
.swatch .swatch-element .crossed-out { display:none; }
.swatch .swatch-element.soldout .crossed-out { display:block; }
.swatch .swatch-element.soldout label {
filter: alpha(opacity=60); /* internet explorer */
-khtml-opacity: 0.6; /* khtml, old safari */
-moz-opacity: 0.6; /* mozilla, netscape */
opacity: 0.6; /* fx, safari, opera */
}
/* Tooltips */
.swatch .tooltip {
text-align:center;
background:gray;
color:#fff;
bottom:100%;
padding: 10px;
display:block;
position:absolute;
width:100px;
left:{{ width | remove: 'px' | to_number | divided_by: 2 | minus: 50 | plus: 2 }}px;
margin-bottom:15px;
/* Make it invisible by default */
filter:alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity:0;
visibility:hidden;
/* Animations */
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
z-index: 10000;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.swatch .tooltip:before {
bottom:-20px;
content:" ";
display:block;
height:20px;
left:0;
position:absolute;
width:100%;
}
/* CSS triangle */
.swatch .tooltip:after {
border-left:solid transparent 10px;
border-right:solid transparent 10px;
border-top:solid gray 10px;
bottom:-10px;
content:" ";
height:0;
left:50%;
margin-left:-13px;
position:absolute;
width:0;
}
.swatch .swatch-element:hover .tooltip {
filter:alpha(opacity=100);
-khtml-opacity:1;
-moz-opacity:1;
opacity:1;
visibility:visible;
-webkit-transform:translateY(0px);
-moz-transform:translateY(0px);
-ms-transform:translateY(0px);
-o-transform:translateY(0px);
transform:translateY(0px);
}
.swatch.error {
background-color:#E8D2D2!important;
color:#333!important;
padding:1em;
border-radius:5px;
}
.swatch.error p {
margin:0.7em 0;
}
.swatch.error p:first-child {
margin-top:0;
}
.swatch.error p:last-child {
margin-bottom:0;
}
.swatch.error code {
font-family:monospace;
}
If you have problems of not being able to find the theme’s stylesheet, you need to copy and paste the CSS above into a style element. Once you are done, please do not forget to insert that style element at the bottom of the product.liquid file.
Conclusion
Above is an instructional writing on How to insert CSS to your stylesheet when adding color swatches to your site. We hope that you will find this guide helpful and have all your problem related to this topic solved.
Product Pages
