A Shopify theme with Bootstrap 4 fully integrated across all theme pages. Derived from the (now deprecated) Slate Bootstrap Theme.
This is the theme I wish had been available when I was rolling my own integration of Bootstrap 4 into a custom Shopify store. You should be able to upload and manage the theme files easily with [Theme Kit]{https://shopify.github.io/themekit/}.
I've started with the base
Shopify/skeleton-theme and brought
over most of the /src directory of
Shopify/starter-theme, and some of
src/styles. These default Shopify styles are being gradually refactored
out of the theme as I have time. PRs welcome!
For responsive image loading, use the responsive-image &
responsive-bg-image snippets. They pair well with Bootstrap's responsive
classes, and the lazyloader dependancy is built into the theme.
Body background and text color can be set via the Shopify theme editor panels, but other changes should be made with Bootstrap's built-in Sass variables, allowing global style preferences, easy theming and component changes.
In src/styles/variables.scss you will find examples of customization
already done, with the primary and secondary colors changed to different
Bootstrap 4 color variables. You could experiment with other changes, such as
adding $enable-rounded: false; to variables.scss and deploying the theme.
For more examples, see the Bootstrap 4 theming
documentation.
This theme is intended to be used with Montserrat Bold for headings and Harmonica Sans for body text. Both of these can be set using the Shopify admin theme editor. You may need to make adjustments in typography.scss if other font pairings are used.
Because Bootstrap requires jQuery, additional setup is required in
theme.js. For discussion, see Webpack issue
#4258.
To add plugins to the theme, such as
jackmoore/zoom, take a look at this
gist which
is implemented in theme.js. Image zoom is implemented in
sections/product.liquid.
For help on setting up the repository locally, building, testing, and contributing please see CONTRIBUTING.md.
All developers who wish to contribute through code or issues, take a look at the Code of Conduct.
This theme is derived from the Shopify Skeleton theme, which is Copyright © 2018 Shopify. See LICENSE for further details.