Image result for bootstrap
Image Source

                               

Bootstrap is one of the best responsive web design frameworks available to the public. It allows developers to create websites that fit on every device, while maintaining proper columns and spacing. Bringing Bootstrap to your Shopify Theme is a fairly simple task that you can complete in just a few steps.

Track 1: One Step Integration

If you just want to load everything so it works, add this code in the head of Admin > Themes > Template Editor > theme.liquid:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}

{{ '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' | stylesheet_tag }}

{{ '//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js' | script_tag }}

That’s it, you’re done. You can now use Bootstrap to make your Shopify Theme awesome!

Track 2: CDN Integration

Use this method if you don’t want to download any files and just rely on Google and Bootstrap CDN’s to deliver these files to your web pages. If you want to load Bootstrap with it’s cool javascript functions, follow the optional steps below. If you only want to load the responsive classes, just load the CSS file.

Step 1 – Load jQuery (optional)

If you want to enable fancy functions like responsive menus, dropdowns, and transitions, you’ll need to pull the jQuery library in order to activate the Bootstrap scripts. Just add this code to the head of your theme by opening the Admin > Themes > Template Editor > theme.liquid :

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}

This will load version 1.11, but you can modify this source to pull another version.

Step 2 – Load Bootstrap CSS

To enable Bootstrap CSS in your theme, simply add this code in the head of Admin > Themes > Template Editor > theme.liquid

{{ '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' | stylesheet_tag }}

This will load version 3.1.1, but you can modify this source to pull another version.

Step 3 – Load Bootstrap JS (optional)

If you want to add those fancy scripts, just add this code below your Bootstrap CSS code:

{{ '//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js' | script_tag }}

That’s it, you’re done. You can now use Bootstrap (and jQuery) for your Shopify Theme!

Track 3: Local Server Integration

Use this method if you’d prefer to download the files and rely on your own server to deliver these files to your web pages. If you want to load Bootstrap with it’s cool javascript functions, follow the optional steps below. If you only want to load the responsive classes, just load the CSS file.

Step 1 – Download & Upload jQuery (optional)

If you want to enable fancy functions like responsive menus, dropdowns, and transitions, you’ll need to pull the jQuery library in order to activate the Bootstrap scripts. Download the latest version and upload it as a new asset in your theme. Open Admin > Themes > Template Editor > Assets > Add New Asset (.js) to do so. Then you’ll be ready to load it in your theme.

Step 2 – Load jQuery (optional)

Just add this code to the head of your theme by opening the Admin > Themes > Template Editor > theme.liquid :

{{ 'jquery-1.11.0.min.js' | asset_url | script_tag }}

Make sure to replace the filename with an exact match for the file you uploaded, otherwise it won’t load.

Step 3 – Download & Upload Bootstrap

Download the latest version of Bootstrap and then upload only Bootstrap > CSS > bootstrap.min.css and Bootstrap > JS > bootstrap.min.js (optional) as new assets. Open Admin > Themes > Template Editor > Assets > Add New Asset to do so. Then you’ll be ready to load Bootstrap in your theme.

See Video Below

Step 4 – Load Bootstrap

Just add this code to the head of your theme by opening the Admin > Themes > Template Editor > theme.liquid :

{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
{{ 'bootstrap.min.js' | asset_url | script_tag }} (optional)

Make sure to add this code underneath your jQuery code, otherwise your Bootstrap javascript functions will not load. That’s it, you’re done. You can now use Bootstrap (and jQuery) for your Shopify Theme!

Also Read: How to Link Javascript file in Html

Adding Other Files

You can use the same syntax above to load any other javascript and CSS files you need. Bootstrap does come with additional files, but these are not essential to adding Bootstrap to your theme. If you need to, just upload the files as Assets, then use the script_tag and stylesheet_tag for javascript and CSS files respectively.

In Addition 

By David Li  {‘bootstrap.min.css’ | asset_url | stylesheet_tag} and {‘bootstrap.min,js’ | asset_url | script_tag} – you need to actually assign custom classes – etc
What are you building with Shopify and Bootstrap
Is this article Helpful ?

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.