BigCommerce

Customizing a theme

I know what you're thinking. Customizing a theme's JavaScript shouldn't require you to connect to a CLI. Well, with BigCommerce it does. So have fun.

You do have the ability to make small tweaks with the customize theme editor. However, that takes away any ability you have of modifying JavaScript or the theme's JSON files. That (and better version control) is why we connect to the Stencil CLI.

!> You're gonna be tempted to just add JS as inline scripts within the html templates. These script tags won't get cached so please don't do that.

Assets Directory

Each Stencil theme’s <theme-name>/assets/ directory contains CSS, JavaScript, and image assets that help create the design of storefront pages. A minimal <theme-name>/assets/ directory contains the files and subdirectories that you can view on the Cornerstone Github Repo.

CDN Subdirectory

The /cdn/ subdirectory is designed to contain large static assets that you will upload to a content delivery network, separately from the rest of your theme. For this reason – and by design – the contents of this directory (only) are excluded from theme bundling. For details, see Staging a Theme for CDN Delivery.

Fonts Subdirectory

The /fonts/ subdirectory contains local versions of theme-specific fonts.

Icons Subdirectory

The /icons/ subdirectory contains .svg files for icons used within a theme.

Img Subdirectory

The /img/ subdirectory contains images used in the theme’s display – background images, sprites, and other images not related to store content.

You would typically reference these image assets using Stencil’s cdn Handlebars helper. For example, generically:

<img src="{{cdn 'assets/img/image.jpg'}}">

Or, with a realistic file name:

<img src="{{cdn 'assets/img/size-chart.png'}}">

?> Akamai Image Manager - images that use the default zoom library pass through Akamai Image Manager. This chooses the best image to serve based on device. To bypass the image optimization, include imbypass=on as a query parameter in the image url. This will serve un-optimized images

<img src="{{cdn 'webdav:img/image.jpg?imbypass=on'}}">

<img src="{{getImage settings.store_logo.image 'logo_size'}}?imbypass=on">

<img src="{{cdn 'assets/img/image.jpg?imbypass=on'}}">

JS Subdirectory

The /js/ subdirectory contains general JavaScript files used in the theme.

SCSS Subdirectory

The /scss/ subdirectory contains theme-specific CSS resources.