Is It Possible To Load Bootstrap Via Script Tag In Shopify

- 1 answer

I want to add a progress bar to my product.liquid file.

I am doing it via script tag using inline style for my progress bar.

var append='';
append +='<div style="'+divStyle+'"><center><p><span style="color: #000000;"><strong>HURRY! ONLY </strong>';
append +='<strong style="color: #ff0000;" id="left-item" class="left-item">'+ userVisit +'</strong><strong> LEFT IN STOCK.</strong></span></p><center>';
append +='<div style="background-color:#f5f5f5;border-radius:4px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset;height:20px;margin-bottom:20px;overflow:hidden;" id="style1" class="progress">';
append +='<div style="width: '+ barWidth+'%;animation: 2s linear 0s normal none infinite running progress-bar-stripes;background-color: #D9534F;background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size: 40px 40px;box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;color: #fff;float: left;font-size: 12px;height: 100%;line-height: 20px;text-align: center;transition: width 0.6s ease 0s;" aria-valuemax="'+ data['max_count']+'" aria-valuemin="'+ data['min_count']+'" aria-valuenow="'+ userVisit+'" role="progressbar" class="progress-bar progress-bar-danger progress-bar-striped active">';
append +='<span style="border: 0 none;clip: rect(0px, 0px, 0px, 0px);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;" class="sr-only">80% Complete (danger)</span></div></div></div>';


I want to load bootstrap to give more style to my progress bar. Is there any solution for this.



Your question is kind of confusing. However, you can naturally add bootstrap (both, the CSS file and the JavaScript file) to your Shopify Theme.

You can either add the files to your theme, or directly link the files through Bootstrap's MaxCDN.

For the later:

  1. Locate your theme.liquid inside Layout when editing your theme
  2. Between the <head></head> tags make sure to paste in the code snippet from Bootstrap Getting Started below Bootstrap CDN.
  3. Save, and that's it.

Depending on your theme, you may have most CSS and JavaScript files on different snippets (usually head-css, head-styles, head-js, head-scripts, but they can be anything). Feel free to follow along with that scaffolding and put your bootstrap CSS and your bootstrap JS where they should be.