CODEWITHSUNDEEP
cssthemesbigcommerce
user1971419
user1971419

Reputation:

How to develop custom theme CSS in Stencil for BigCommerce

For my latest project here at work, I was told to develop custom (Stencil) themes for BigCommerce so we can distribute them via the BigCommerce theme marketplace. I come from a Wordpress background, so making this leap is making my head spin a little bit, but I think I understand how their platform is put together for the most part. There are components which are called by Handlebars expressions, and these may be rearranged in the template files while any default styles can be applied through config.json and the client can make basic changes through the theme editor GUI.

Here's where I'm still lost, though. Some of the design requirements call for heavy CSS changes, not just a JSON variable. I have a fully developed HTML/CSS theme I would like to use by converting it into a format that BigCommerce will accept, but I can't find any documentation on how to go about doing this. I could tediously modify each of the existing SCSS files, or I could override them as if I was developing a child theme. I'm tempted to scrap the SCSS altogether and start over, but then I would need to recreate the SASS functions used to pull in the JSON where needed.

I work much better when I begin with a blank canvas (or at most a rough sketch) and build upon it, rather than morphing a complete product into what I need. Is there any way to do this with BigCommerce?

Upvotes: 2

Views: 1447

Answers (2)

user1971419
user1971419

Reputation:

It's been a little while since I posted this question, and since then I have learned a bit more about Stencil development.

The short answer here is, add on, don't delete. BigCommerce's Cornerstone theme is not a blank theme like _underscores for wordpress. It's a fully developed, yet very basic theme. It's best to avoid editing its default files where possible, because it may be updated in the future and could potentially overwrite your changes. Instead, add folders with your custom theme's name within it. For example, you would normally see:

/scss/layouts/body/_body.scss

So you could add your own styles while leaving the above structure intact:

/scss/layouts/customtheme/body/_body.scss

We do not have to override the styles defined in the former _body.scss, because we'll also need to import your newly created styles into

/scss/layouts/_layouts.scss

In this file, you'll see this snippet at the top:

// =============================================================================
// LAYOUTS
// =============================================================================


// Global layouts
// -----------------------------------------------------------------------------

// Header
@import "header/header";

// Page
@import "body/body";

Since an underscore defines an SCSS partial, we know that just creating _body.scss doesn't do anything. We have to find the main SCSS file and add @import "body", or in this case, we must add it to another partial which gets imported into the main file. So simply delete or comment out the default

//@import "body/body";

and replace it with

@import "customtheme/body/body";

And there you go. You are not overriding or competing with any existing styles, and you've customized the look of the body. You can also add your own components, but that's another topic for another time. Suffice to say, there are more SCSS files in

/scss/components/

and they follow the same principles.

Upvotes: 1

Gayan Hewa
Gayan Hewa

Reputation: 2397

Did you try using the stencil resources provided by BigCommerce youtube channel?

Also, the forums would be a great place to start having a chat for best practice questions.

Upvotes: 0

Related Questions