Using Bootstrap to make themes in your Shopify store beautiful

ByAdam

Using Bootstrap to make themes in your Shopify store beautiful

Bootstrap is an awesome and available framework which allows you to create websites that fits on every device while the proper columns and spacing are still maintained. Adding Bootstrap to your Shopify theme is quite simple so you totally do it by yourself.

There are 3 ways for you to add Bootstrap to a theme in your Shopify store.

  1. Integrate in 1 step

  • Go to Admin> Themes> Template Editor> theme.liquid
  • Add following code:
  1. Integrate CDN

With this method, you don’t need to download any files because you just rely on Google and Bootstrap CND’s to deliver these files to your web pages.

  • Load jQuery

Loading jQuery helps you enable some functions such as responsive menus, transitions and dropdowns. Do as follows:

  • Go to Admin> Themes> Template Editor> theme.liquid
  • Add following code:

*Note: This code is for 1.11 version and you can modify to pull the other versions

  • Load Bootstrap CSS
  • Go to Admin> Themes> Template Editor> theme.liquid
  • Use code below:

*Note: This code is for version 3.1.1 and you can modify to pull the other versions

  • Load Bootstrap JS: Add following code below your Bootstrap CSS code:
  1. Integrate Local server

When using this way, you need to download some files and rely on your own server to deliver these files to your web pages.

  • Download and upload jQuery
  • Go to Admin> Themes> Template Editor> Assets> Add New Asset (.js)
  • Load jQuery
  • Go to Admin> Themes> Template Editor> theme.liquid
  • Add following code:
  • Download and upload Bootstrap
  • Go to Admin> Themes> Template Editor> Assets> Add New Assets
  • Upload min.css and bootstrap.min.js as the new assets
  • Load Bootstrap
  • Go to Admin> Themes> Template Editor> theme.liquid
  • Add following code underneath the jQuery code:

That’s all. Hope that these tutorials may help you have great theme for your Shopify store.

Thanks for reading!

About the author

Adam administrator

Leave a Reply