Shopify Slate theme with Bootstrap 4

[neckerson]

Recently I've been building a custom Shopify theme using the Slate toolkit & Bootstrap 4 for layout and styles. The initial setup took some time to perfect, and I wanted to share what I've learned with the community.

https://github.com/neckerson/slate-bootstrap

Today I uploaded the repo above to Github. It's a simple implementation of the Shopify Starter Theme with Bootstrap 4 and all dependancies built into the Slate environment. If you have Slate already set up, you should be able to open your terminal and run:

yarn create slate-theme my-new-theme neckerson/slate-bootstrap

cd into "/my-new-theme", set up your .env variables per the Slate docs, and run "yarn start". From here, you can start adding Bootstrap classes to theme.liquid and other files.

Let me know if you have any questions! I have responsive images & image zoom working well with this setup and would be happy to help others.

[topsub]

So i am confused did you do a layout or just include the css and JS of bootstrap in this?

[neckerson]

Hey @topsub! The repo is basically the Starter theme with all Shopify styles stripped out and the CSS / JS needed to use Bootstrap & lazyload responsive images properly. I have an entire Bootstrap theme layout, which I am considering making available as a separate repo (needs some cleanup first). Would you be interested in this?

[topsub]

I have it running but no bootstrap css is pulled in that i can tell. So when i add bootstrap styles nothing happens.. Not sure if i missed a step or what.

But if you have a stripped theme with basic bootstrap layouts that would be awesome. That is what i was assuming this was.

[topsub]

to be honest i would take what ever you have as long as nothing is missing, i can take that and run with it.

[neckerson]

Hey @topsub, I realized the Bootstrap wasn't being pulled into theme.scss properly. It should be working now. Can you pull the changes down from the Github repo and see if the fix is working for you?

There is some proprietary stuff in my theme files that needs to be removed, but I'll work on it. For now, you should be able to easily add bootstrap styles to the barebones theme.

[topsub]

Okay, Cool let me do a pull and check it out.   Let me know when you get your stuff stripped i would love to check it out. 

[topsub]

@neckerson  wish there was a way to email or something besides here, would like to work together to get a good bootstrap 4 version of shopify.

[neckerson]

@topsub It would be great to have your input! Do you have a Github account? The simplest way to collaborate would be via creating GH issues (i.e. New Issue > 'add navbar styles') and submitting pull requests with your changes. I'm sure many people would find this project useful

[topsub]

I do, I can do a pull request for the nav i got working, Its only 1 layer deep as my project only requires that. But it fully works!