Customization Surfaces

Every customization sits somewhere on a low-level (code) to high-level (no-code) spectrum. Lower surfaces give more power and require a developer; higher surfaces are safer and put control in a merchant’s hands. Pick the highest surface that can do the job cleanly.

The deepest surface is the theme code itself, edited locally and pushed with the Stencil CLI (the Stencil Core & Advanced courses in the Guided Coursework cover this hands-on). This is the only way to change theme JavaScript and the right place for structural redesigns, new components, and anything that should live in version control. Custom templates sit just above it: alternate layouts a merchant can assign without touching code.

Page Builder is the merchant’s visual editor. As a developer you extend it by building widgets: reusable blocks with a schema that exposes merchant-editable settings, placed into theme regions (the {{{region}}} areas) via the Widgets API. The Widget Builder tool helps you author and preview them. This is how you give merchants safe, branded, no-code control over content you designed - the best of both ends of the spectrum.

WebDAV (Web Distributed Authoring and Versioning) is an HTTP extension that lets you browse and manage a store’s files like a network drive. On BigCommerce it exposes the store’s file system - separate from the theme - so you can upload, download, and organise assets that aren’t handled through the catalog or Page Builder.

What actually lives there:

• content/ - files you reference on the storefront: PDFs, custom fonts, self-hosted CSS/JS, favicons, and site-verification files.
• product_images/ and image_manager/ - product and content images.
• Downloadable-product files, and large media you serve through the {{cdn}} helper’s webdav: prefix - kept out of the 50 MB theme bundle.

To connect: in the control panel go to Settings → Storage / File access (WebDAV), copy the WebDAV URL and generate credentials, then open it in a WebDAV client - Cyberduck, WinSCP, or your operating system’s built-in “connect to server” / “map network drive”.

Resources: File Access (WebDAV) - setup and directory reference · Stencil theme assets - using the cdn / webdav: prefix.

Code Editor (control panel) - browser-based editing of a theme’s HTML/CSS for quick fixes. JavaScript still requires the Stencil CLI. Always Make a Copy of the theme before editing so you don’t change a live theme in place.

Script Manager lets you add third-party <script> tags and HTML snippets to the storefront without touching theme code - analytics (Google Analytics / GTM), marketing and tracking pixels, chat and support widgets, A/B testing, and the like. Each entry is configured with:

• Location - Head or Footer.
• Pages - all pages, or specific ones (storefront, checkout, order confirmation).
• Category - Essential / Functional / Analytics / Targeting, which drives cookie-consent behaviour.
• Type - a hosted script URL or an inline HTML / script snippet.

Scripts injected by installed apps also appear here (read-only). Keep the list lean - every tag runs in the shopper’s browser, so too many hurt performance, and the checkout page only accepts certain categories and locations for PCI reasons. Developers can manage the same scripts programmatically through the Scripts API.

Resources: Script Manager - merchant guide · Scripts API - manage scripts programmatically.

Default to the highest surface that does the job cleanly: a content change is a Page Builder job, not a code change; a reusable branded block is a widget; a structural redesign or new behaviour is theme code. Reserve the Code Editor for genuine quick fixes, and keep anything that matters in version control via the CLI so it’s reviewable and reversible.

• Page Builder overview and widgets in themes.
• Widgets & Scripts (Admin) overview - the Widgets API and Widget Builder.
• Custom templates.