Shopify Impulse theme code documentation

Impulse is a modern Shopify theme that empowers your brand with custom promotions tiles, collection sidebar filters, sub-listings in collections, the ability to create custom promotional content on collection pages, video, and animations. Minimal design and mobile optimized. 

You can use those codes in the theme if you know HTML and CSS, and have a basic understanding of Liquid. 

Shopify Impulse theme code documentation are written below:

 

 Responsive Code:

@media only screen and (min-width:769px)
@media only screen and (min-width:1050px)
@media only screen and (max-width:768px)
@media only screen and (max-width:959px)


@media only screen and (min-width:769px){
.class{
display:table;
}
}

@media only screen and (max-width:768px){
.class{
margin-left:-2px
}
}

Grid:

.grid:after{content:"";display:table;clear:both;}

.grid{
list-style:none;
margin:0;
padding:0;
margin-left:-22px
}

@media only screen and (max-width:768px){

.grid{
margin-left:-17px
}
}

.grid--small{
margin-left:-10px
}

.grid--small .grid__item{
padding-left:10px;
}

.grid__item{
float:left;
padding-left:22px;
width:100%;
min-height:1px
}



@media only screen and (max-width:768px){

.grid__item{
padding-left:17px
}
}

.grid__item[class*="--push"]{
position:relative;
}

.grid--no-gutters{
margin-left:0
}

.grid--no-gutters .grid__item{
padding-left:0;
}

.grid--small-gutters{
margin-left:-10px;
margin-bottom:-10px
}

.grid--small-gutters .grid__item{
padding-left:10px;
padding-bottom:10px;
}

.grid--flush-bottom{
margin-bottom:-22px;
overflow:auto
}

.grid--flush-bottom>.grid__item{
margin-bottom:22px;
}

.grid--center{
text-align:center
}

.grid--center .grid__item{
float:none;
display:inline-block;
vertical-align:top;
text-align:left;
}

.grid--full{
margin-left:0
}

.grid--full>.grid__item{
padding-left:0;
}

Class:

.show{display:block !important;}

.hide{display:none !important;}

.text-left{text-align:left !important;}

.text-right{text-align:right !important;}

.text-center{text-align:center !important;}


Grid Percentage:

.one-whole{width:100%;}

.one-half{width:50%;}

.one-third{width:33.33333%;}

.two-thirds{width:66.66667%;}

.one-quarter{width:25%;}

.two-quarters{width:50%;}

.three-quarters{width:75%;}

.one-fifth{width:20%;}

.two-fifths{width:40%;}

.three-fifths{width:60%;}

.four-fifths{width:80%;}

.one-sixth{width:16.66667%;}

.two-sixths{width:33.33333%;}

.three-sixths{width:50%;}

.four-sixths{width:66.66667%;}

.five-sixths{width:83.33333%;}

.one-eighth{width:12.5%;}

.two-eighths{width:25%;}

.three-eighths{width:37.5%;}

.four-eighths{width:50%;}

.five-eighths{width:62.5%;}

.six-eighths{width:75%;}

.seven-eighths{width:87.5%;}

.one-tenth{width:10%;}

.two-tenths{width:20%;}

.three-tenths{width:30%;}

.four-tenths{width:40%;}

.five-tenths{width:50%;}

.six-tenths{width:60%;}

.seven-tenths{width:70%;}

.eight-tenths{width:80%;}

.nine-tenths{width:90%;}

.one-twelfth{width:8.33333%;}

.two-twelfths{width:16.66667%;}

.three-twelfths{width:25%;}

.four-twelfths{width:33.33333%;}

.five-twelfths{width:41.66667%;}

.six-twelfths{width:50%;}

.seven-twelfths{width:58.33333%;}

.eight-twelfths{width:66.66667%;}

.nine-twelfths{width:75%;}

.ten-twelfths{width:83.33333%;}

.eleven-twelfths{width:91.66667%;}




@media only screen and (max-width:768px){
.small--one-whole{width:100%;}
.small--one-half{width:50%;}
.small--one-third{width:33.33333%;}
.small--two-thirds{width:66.66667%;}
.small--one-quarter{width:25%;}
.small--two-quarters{width:50%;}
.small--three-quarters{width:75%;}
.small--one-fifth{width:20%;}
.small--two-fifths{width:40%;}
.small--three-fifths{width:60%;}
.small--four-fifths{width:80%;}
.small--one-sixth{width:16.66667%;}
.small--two-sixths{width:33.33333%;}
.small--three-sixths{width:50%;}
.small--four-sixths{width:66.66667%;}
.small--five-sixths{width:83.33333%;}
.small--one-eighth{width:12.5%;}
.small--two-eighths{width:25%;}
.small--three-eighths{width:37.5%;}
.small--four-eighths{width:50%;}
.small--five-eighths{width:62.5%;}
.small--six-eighths{width:75%;}
.small--seven-eighths{width:87.5%;}
.small--one-tenth{width:10%;}
.small--two-tenths{width:20%;}
.small--three-tenths{width:30%;}
.small--four-tenths{width:40%;}
.small--five-tenths{width:50%;}
.small--six-tenths{width:60%;}
.small--seven-tenths{width:70%;}
.small--eight-tenths{width:80%;}
.small--nine-tenths{width:90%;}
.small--one-twelfth{width:8.33333%;}
.small--two-twelfths{width:16.66667%;}
.small--three-twelfths{width:25%;}
.small--four-twelfths{width:33.33333%;}
.small--five-twelfths{width:41.66667%;}
.small--six-twelfths{width:50%;}
.small--seven-twelfths{width:58.33333%;}
.small--eight-twelfths{width:66.66667%;}
.small--nine-twelfths{width:75%;}
.small--ten-twelfths{width:83.33333%;}
.small--eleven-twelfths{width:91.66667%;}
.grid--uniform .small--five-tenths:nth-of-type(odd),
.grid--uniform .small--four-eighths:nth-of-type(odd),
.grid--uniform .small--four-twelfths:nth-of-type(3n+1),
.grid--uniform .small--one-eighth:nth-of-type(8n+1),
.grid--uniform .small--one-fifth:nth-of-type(5n+1),
.grid--uniform .small--one-half:nth-of-type(odd),
.grid--uniform .small--one-quarter:nth-of-type(4n+1),
.grid--uniform .small--one-sixth:nth-of-type(6n+1),
.grid--uniform .small--one-third:nth-of-type(3n+1),
.grid--uniform .small--one-twelfth:nth-of-type(12n+1),
.grid--uniform .small--six-twelfths:nth-of-type(odd),
.grid--uniform .small--three-sixths:nth-of-type(odd),
.grid--uniform .small--three-twelfths:nth-of-type(4n+1),
.grid--uniform .small--two-eighths:nth-of-type(4n+1),
.grid--uniform .small--two-sixths:nth-of-type(3n+1),
.grid--uniform .small--two-twelfths:nth-of-type(6n+1){clear:both;}}





@media only screen and (min-width:769px){

.medium-up--one-whole{width:100%;}
.medium-up--one-half{width:50%;}
.medium-up--one-third{width:33.33333%;}
.medium-up--two-thirds{width:66.66667%;}
.medium-up--one-quarter{width:25%;}
.medium-up--two-quarters{width:50%;}
.medium-up--three-quarters{width:75%;}
.medium-up--one-fifth{width:20%;}
.medium-up--two-fifths{width:40%;}
.medium-up--three-fifths{width:60%;}
.medium-up--four-fifths{width:80%;}
.medium-up--one-sixth{width:16.66667%;}
.medium-up--two-sixths{width:33.33333%;}
.medium-up--three-sixths{width:50%;}
.medium-up--four-sixths{width:66.66667%;}
.medium-up--five-sixths{width:83.33333%;}
.medium-up--one-eighth{width:12.5%;}
.medium-up--two-eighths{width:25%;}
.medium-up--three-eighths{width:37.5%;}
.medium-up--four-eighths{width:50%;}
.medium-up--five-eighths{width:62.5%;}
.medium-up--six-eighths{width:75%;}
.medium-up--seven-eighths{width:87.5%;}
.medium-up--one-tenth{width:10%;}
.medium-up--two-tenths{width:20%;}
.medium-up--three-tenths{width:30%;}
.medium-up--four-tenths{width:40%;}
.medium-up--five-tenths{width:50%;}
.medium-up--six-tenths{width:60%;}
.medium-up--seven-tenths{width:70%;}
.medium-up--eight-tenths{width:80%;}
.medium-up--nine-tenths{width:90%;}
.medium-up--one-twelfth{width:8.33333%;}
.medium-up--two-twelfths{width:16.66667%;}
.medium-up--three-twelfths{width:25%;}
.medium-up--four-twelfths{width:33.33333%;}
.medium-up--five-twelfths{width:41.66667%;}
.medium-up--six-twelfths{width:50%;}
.medium-up--seven-twelfths{width:58.33333%;}
.medium-up--eight-twelfths{width:66.66667%;}
.medium-up--nine-twelfths{width:75%;}
.medium-up--ten-twelfths{width:83.33333%;}
.medium-up--eleven-twelfths{width:91.66667%;}
.grid--uniform .medium-up--five-tenths:nth-of-type(odd),
.grid--uniform .medium-up--four-eighths:nth-of-type(odd),
.grid--uniform .medium-up--four-twelfths:nth-of-type(3n+1),
.grid--uniform .medium-up--one-eighth:nth-of-type(8n+1),
.grid--uniform .medium-up--one-fifth:nth-of-type(5n+1),
.grid--uniform .medium-up--one-half:nth-of-type(odd),
.grid--uniform .medium-up--one-quarter:nth-of-type(4n+1),
.grid--uniform .medium-up--one-sixth:nth-of-type(6n+1),
.grid--uniform .medium-up--one-third:nth-of-type(3n+1),
.grid--uniform .medium-up--one-twelfth:nth-of-type(12n+1),
.grid--uniform .medium-up--six-twelfths:nth-of-type(odd),
.grid--uniform .medium-up--three-sixths:nth-of-type(odd),
.grid--uniform .medium-up--three-twelfths:nth-of-type(4n+1),
.grid--uniform .medium-up--two-eighths:nth-of-type(4n+1),
.grid--uniform .medium-up--two-sixths:nth-of-type(3n+1),
.grid--uniform .medium-up--two-twelfths:nth-of-type(6n+1){clear:both;}}




@media only screen and (min-width:1050px){

.widescreen--one-whole{width:100%;}
.widescreen--one-half{width:50%;}
.widescreen--one-third{width:33.33333%;}
.widescreen--two-thirds{width:66.66667%;}
.widescreen--one-quarter{width:25%;}
.widescreen--two-quarters{width:50%;}
.widescreen--three-quarters{width:75%;}
.widescreen--one-fifth{width:20%;}
.widescreen--two-fifths{width:40%;}
.widescreen--three-fifths{width:60%;}
.widescreen--four-fifths{width:80%;}
.widescreen--one-sixth{width:16.66667%;}
.widescreen--two-sixths{width:33.33333%;}
.widescreen--three-sixths{width:50%;}
.widescreen--four-sixths{width:66.66667%;}
.widescreen--five-sixths{width:83.33333%;}
.widescreen--one-eighth{width:12.5%;}
.widescreen--two-eighths{width:25%;}
.widescreen--three-eighths{width:37.5%;}
.widescreen--four-eighths{width:50%;}
.widescreen--five-eighths{width:62.5%;}
.widescreen--six-eighths{width:75%;}
.widescreen--seven-eighths{width:87.5%;}
.widescreen--one-tenth{width:10%;}
.widescreen--two-tenths{width:20%;}
.widescreen--three-tenths{width:30%;}
.widescreen--four-tenths{width:40%;}
.widescreen--five-tenths{width:50%;}
.widescreen--six-tenths{width:60%;}
.widescreen--seven-tenths{width:70%;}
.widescreen--eight-tenths{width:80%;}
.widescreen--nine-tenths{width:90%;}
.widescreen--one-twelfth{width:8.33333%;}
.widescreen--two-twelfths{width:16.66667%;}
.widescreen--three-twelfths{width:25%;}
.widescreen--four-twelfths{width:33.33333%;}
.widescreen--five-twelfths{width:41.66667%;}
.widescreen--six-twelfths{width:50%;}
.widescreen--seven-twelfths{width:58.33333%;}
.widescreen--eight-twelfths{width:66.66667%;}
.widescreen--nine-twelfths{width:75%;}
.widescreen--ten-twelfths{width:83.33333%;}
.widescreen--eleven-twelfths{width:91.66667%;}
.grid--uniform .widescreen--five-tenths:nth-of-type(odd),
.grid--uniform .widescreen--four-eighths:nth-of-type(odd),
.grid--uniform .widescreen--four-twelfths:nth-of-type(3n+1),
.grid--uniform .widescreen--one-eighth:nth-of-type(8n+1),
.grid--uniform .widescreen--one-fifth:nth-of-type(5n+1),
.grid--uniform .widescreen--one-half:nth-of-type(odd),
.grid--uniform .widescreen--one-quarter:nth-of-type(4n+1),
.grid--uniform .widescreen--one-sixth:nth-of-type(6n+1),
.grid--uniform .widescreen--one-third:nth-of-type(3n+1),
.grid--uniform .widescreen--one-twelfth:nth-of-type(12n+1),
.grid--uniform .widescreen--six-twelfths:nth-of-type(odd),
.grid--uniform .widescreen--three-sixths:nth-of-type(odd),
.grid--uniform .widescreen--three-twelfths:nth-of-type(4n+1),
.grid--uniform .widescreen--two-eighths:nth-of-type(4n+1),
.grid--uniform .widescreen--two-sixths:nth-of-type(3n+1),
.grid--uniform .widescreen--two-twelfths:nth-of-type(6n+1){clear:both;}}

@media only screen and (min-width:769px){
.medium-up--push-one-half{left:50%;}
.medium-up--push-one-third{left:33.33333%;}
.medium-up--push-two-thirds{left:66.66667%;}
.medium-up--push-one-quarter{left:25%;}
.medium-up--push-two-quarters{left:50%;}
.medium-up--push-three-quarters{left:75%;}
.medium-up--push-one-fifth{left:20%;}
.medium-up--push-two-fifths{left:40%;}
.medium-up--push-three-fifths{left:60%;}
.medium-up--push-four-fifths{left:80%;}
.medium-up--push-one-sixth{left:16.66667%;}
.medium-up--push-two-sixths{left:33.33333%;}
.medium-up--push-three-sixths{left:50%;}
.medium-up--push-four-sixths{left:66.66667%;}
.medium-up--push-five-sixths{left:83.33333%;}
.medium-up--push-one-eighth{left:12.5%;}
.medium-up--push-two-eighths{left:25%;}
.medium-up--push-three-eighths{left:37.5%;}
.medium-up--push-four-eighths{left:50%;}
.medium-up--push-five-eighths{left:62.5%;}
.medium-up--push-six-eighths{left:75%;}
.medium-up--push-seven-eighths{left:87.5%;}
.medium-up--push-one-tenth{left:10%;}
.medium-up--push-two-tenths{left:20%;}
.medium-up--push-three-tenths{left:30%;}
.medium-up--push-four-tenths{left:40%;}
.medium-up--push-five-tenths{left:50%;}
.medium-up--push-six-tenths{left:60%;}
.medium-up--push-seven-tenths{left:70%;}
.medium-up--push-eight-tenths{left:80%;}
.medium-up--push-nine-tenths{left:90%;}
.medium-up--push-one-twelfth{left:8.33333%;}
.medium-up--push-two-twelfths{left:16.66667%;}
.medium-up--push-three-twelfths{left:25%;}
.medium-up--push-four-twelfths{left:33.33333%;}
.medium-up--push-five-twelfths{left:41.66667%;}
.medium-up--push-six-twelfths{left:50%;}
.medium-up--push-seven-twelfths{left:58.33333%;}
.medium-up--push-eight-twelfths{left:66.66667%;}
.medium-up--push-nine-twelfths{left:75%;}
.medium-up--push-ten-twelfths{left:83.33333%;}
.medium-up--push-eleven-twelfths{left:91.66667%;}}

@media only screen and (min-width:1050px){
.widescreen--push-one-half{left:50%;}
.widescreen--push-one-third{left:33.33333%;}
.widescreen--push-two-thirds{left:66.66667%;}
.widescreen--push-one-quarter{left:25%;}
.widescreen--push-two-quarters{left:50%;}
.widescreen--push-three-quarters{left:75%;}
.widescreen--push-one-fifth{left:20%;}
.widescreen--push-two-fifths{left:40%;}
.widescreen--push-three-fifths{left:60%;}
.widescreen--push-four-fifths{left:80%;}
.widescreen--push-one-sixth{left:16.66667%;}
.widescreen--push-two-sixths{left:33.33333%;}
.widescreen--push-three-sixths{left:50%;}
.widescreen--push-four-sixths{left:66.66667%;}
.widescreen--push-five-sixths{left:83.33333%;}
.widescreen--push-one-eighth{left:12.5%;}
.widescreen--push-two-eighths{left:25%;}
.widescreen--push-three-eighths{left:37.5%;}
.widescreen--push-four-eighths{left:50%;}
.widescreen--push-five-eighths{left:62.5%;}
.widescreen--push-six-eighths{left:75%;}
.widescreen--push-seven-eighths{left:87.5%;}
.widescreen--push-one-tenth{left:10%;}
.widescreen--push-two-tenths{left:20%;}
.widescreen--push-three-tenths{left:30%;}
.widescreen--push-four-tenths{left:40%;}
.widescreen--push-five-tenths{left:50%;}
.widescreen--push-six-tenths{left:60%;}
.widescreen--push-seven-tenths{left:70%;}
.widescreen--push-eight-tenths{left:80%;}
.widescreen--push-nine-tenths{left:90%;}
.widescreen--push-one-twelfth{left:8.33333%;}
.widescreen--push-two-twelfths{left:16.66667%;}
.widescreen--push-three-twelfths{left:25%;}
.widescreen--push-four-twelfths{left:33.33333%;}
.widescreen--push-five-twelfths{left:41.66667%;}
.widescreen--push-six-twelfths{left:50%;}
.widescreen--push-seven-twelfths{left:58.33333%;}
.widescreen--push-eight-twelfths{left:66.66667%;}
.widescreen--push-nine-twelfths{left:75%;}
.widescreen--push-ten-twelfths{left:83.33333%;}
.widescreen--push-eleven-twelfths{left:91.66667%;}}



@media only screen and (max-width:768px){
.small--show{display:block !important;}
.small--hide{display:none !important;}
.small--text-left{text-align:left !important;}
.small--text-right{text-align:right !important;}
.small--text-center{text-align:center !important;}}

@media only screen and (max-width:959px){
.medium-down--show{display:block !important;}
.medium-down--hide{display:none !important;}
.medium-down--text-left{text-align:left !important;}
.medium-down--text-right{text-align:right !important;}
.medium-down--text-center{text-align:center !important;}}

@media only screen and (min-width:769px){
.medium-up--show{display:block !important;}
.medium-up--hide{display:none !important;}
.medium-up--text-left{text-align:left !important;}
.medium-up--text-right{text-align:right !important;}
.medium-up--text-center{text-align:center !important;}}

@media only screen and (min-width:1050px){
.widescreen--show{display:block !important;}
.widescreen--hide{display:none !important;}
.widescreen--text-left{text-align:left !important;}
.widescreen--text-right{text-align:right !important;}
.widescreen--text-center{text-align:center !important;}}

out of sandbox theme
pixel union shopify theme
themeforest free shopify theme
bold shopify apps

Leave a comment