Process for Updating Big Machine to New Theme

General Styling

1. Copy settings_data.json from existing theme to the new theme.
2. Copy custom.scss from existing theme to new theme.
3. Locate the fonts that are defined in custom.scss and upload to the new theme. You can find these fonts in dropbox or by downloading the Big Machine site with the Shopify Desktop Editor and locating the fonts within the assets folder.

1. Create a snippet called label-nav.liquid and copy the code from the existing theme.
2. Create a snippet called artists.liquid and copy the code from the existing theme.
3. create a new asset called jquery.simplyscroll.min.js and copy the code from the existing theme.
4. Create jquery.jcarousel.min.js and copy the code from the existing theme
5. on theme.liquid locate the <div id="wrap"> (Around line 63) and add the following line of code:  {% include  'label-nav' %} 
6. On theme.liquid after {% if has_main_menu %}{% endif %} and before {% if settings.slider-width =="window-width" %}(around line 73) and paste the following line of code: {% include 'artists' %}
7. On theme.liquid locate the section where all of the javascrip assets are being pulled in. Add  {{ 'jquery.simplyscroll.min.js' | asset_url | script_tag }} {{ 'jquery.jcarousel.min.js' | asset_url | script_tag }}  below the instagram include (around link 122).
8. On theme.liquid locate <script type="text/javascript"> and include the following line of code:

       
       $("#scroller").simplyScroll({
         /*customClass: 'custom',
               direction: 'backwards',*/
         pauseOnHover: true,
         frameRate: 20,
         speed: 2
       });
   

   9. Also add the following code inside the <script type="text/javascript"> on theme.liquid.

               {% if settings.ajax-cart %}
               $(document).ajaxCart();
               {% endif %}
    
               var jcarousel = $('.jcarousel');
    
               jcarousel
               .on('jcarousel:reload jcarousel:create', function () {
                 var carousel = $(this),
                     width = carousel.innerWidth();
                 
                if(width < 480) {
                   width = width;
                 }
                 else if(width < 768) {
                   width = width / 2;
                   carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
                 }
                 else {
                   width = width / 4;
                   carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
                 }
               })
               .jcarousel({
                 wrap: 'circular'
               });
    
               $('.jcarousel-control-prev')
               .jcarouselControl({
                 target: '-=1'
               });
    
               $('.jcarousel-control-next')
               .jcarouselControl({
                 target: '+=1'
               });

    

1. Add the following code to index.liquid and update the collection names with the collections that should show.

2. <div class="container">
     {% assign product_collection = collections[settings.homepage-products-collection] %}
     {% include 'bmlg-carousel' with product_collection %}
    
     {% assign product_collection = collections['featured-releases'] %}
     {% include 'bmlg-carousel' with product_collection %}
    
     {% assign product_collection = collections['on-sale'] %}
     {% include 'bmlg-carousel' with product_collection %}
    
     {% assign product_collection = collections['music-has-value'] %}
     {% include 'bmlg-carousel' with product_collection %}
    
     <!-- Featured Products from Collection -->
     {% unless settings.homepage-products-collections-linklist == blank %}
       {% for l in linklists[settings.homepage-products-collections-linklist].links %}
         {% if l.type == 'collection_link' and l.object.all_products_count > 0 %}
           {% assign homepage_collection = l.object %}
           {% assign homepage_collection_products_count = homepage_collection.all_products_count | times: 1 %}
           {% if homepage_collection_products_count > 0 %}
           <section id="product-list" class="section-wrap">
             {% include '__containers-open' %}
             <h2 class="page-header" id="products-title">{% if homepage_collection_products_count > homepage_products_limit %}<a href="{{ homepage_collection.url }}">{{ homepage_collection.title }}</a> <a class="small" href="{{ homepage_collection.url }}">{% include '__localize' with 'View all' %}</a>{% else %}{{ homepage_collection.title }}{% endif %}</h2>
             {% include 'products-list' with homepage_collection %}
             {% include '__containers-close' %}
           </section>
           {% endif %}
         {% endif %}
       {% endfor %}
     {% endunless %}
   </div>

    
3. Comment out any existing "Featured Products" code:

1. Create a bmlg-carousel.liquid snippet and copy the code from the existing theme.
2. Create a navbar-account snippet and copy the code from the existing theme.
3. Create a navbar-account-menu.liquid snippet and copy the code from the existing theme.
4. Copy the existing code from navbar.liquid and paste into the navbar.liquid file on the new theme.
5. Copy the existing code from navbar-main.liquid and paste into the navbar-main.liquid file on the new theme.