Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>bigcommerce-snippetsNew to Visual Studio Code? Get it now.
bigcommerce-snippets

bigcommerce-snippets

intuitsolutions

|
1,161 installs
| (0) | Free
Snippets for BigCommerce development - By IntuitSolutions
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

bigcommerce-snippets README

IntuitSolutions snippet library for development on BigCommerce's Cornerstone theme. IntuitSolutions offers a wide range of BigCommerce Design services, including site design and redesign, banner and on-site ad creation, improved design on existing BigCommerce templates, SEO and Digital Marketing, and more. Visit us on the web.

Features

Includes helpful snippets for Handlebars and SCSS.

HTML

icon:

<span class="icon icon--">
    <svg><use xlink:href="#icon-"></use></svg>
</span>

davimg:

<img class="lazyload" data-src="{{cdn 'webdav:'}}" src="{{cdn 'img/loading.svg'}}">

cdnimg:

<img class="lazyload" data-src="{{cdn '/img/'}}" src="{{cdn 'img/loading.svg'}}">

each-its:

{{#each }}
{{/each}}

if-its:

{{#if }}
{{/if}}

or-its:

{{#or }}
{{/or}}

all-its:

{{#all
    (if (toLowerCase ) '===' '')
    (if (toLowerCase ) '===' '')
}}
    <!-- this renders if 'all' conditions above are true -->
{{else}}
    <!-- otherwise, I render -->
{{/all}}

component:

{{> components/custom/ }}

lang:

{{{lang ''}}}

SCSS

bpxs

@include breakpoint('xsmall') {
    // 375px and up

}

bps

@include breakpoint('small') {
    // 551px and up

}

bpm

@include breakpoint('medium') {
    // 801px and up

}

bpl

@include breakpoint('large') {
    // 1261px and up

}

bpxl

@include breakpoint('xlarge') {
    // 1441px and up

}

between

@media (max-width: ) and (min-width: ) {

}

above

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

}

below

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

}

cmh

/* ==========================================================
 * ## ,
 * ========================================================== */

z-index (zi)

z-index: zIndex('');

screensize

screenSize('')

.stencil

assign:

" .html": ""

Release Notes

  • Version 0.0.1 - Initial Release, only HTML
  • Version 0.0.2 - Addition on SCSS Snippets
  • Version 0.0.3 - Logo Added
  • Version 0.0.4 - Setup Public repo for project
  • Version 0.0.5 - Test ci
  • Version 0.0.6 - Add many snippets
  • Version 1.0.0 - Add all snippet fix, the img
  • Version 1.1.0 - Add z-index and screensize snippets, remove grid snippets, fix scope

Enjoy!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft