Add a size guide to Shopify Brooklyn Theme

shopify-brooklyn-theme-size-guide.md

Add Size Guide to Shopify Brooklyn Theme

This is what you get:

1- A link to below the variant selector which will open the size guide:

2- The size selector modal:

Step by Step Guide:

1- Open Sections/product-template.liquid and around line 198, below the variant selector, paste the following:

{% if product.options contains 'Size' %}
    <a class="size-guide__link" data-action="open-size-guide" href="#size-guide">
        Size guide
    </a>
{% endif %}

2- Still in Sections/product-template.liquid aftr rest of html, around line 261, paste this:

<div id="size-guide" class="size-guide__modal mfp-hide">
  {{ pages.size-guide.content }}
</div>

3- Open theme.js.liquid and search for this line:

    this._initShopifyXrLaunch();

(Should be around line 2829:)

And just below it paste the following line:

    this._initProductSizeChart(); 

Result should be this:

4- Still in theme.js.liquid, search for this:

    _initShopifyXrLaunch: function() {
      $(document).on(
        'shopify_xr_launch',
        function() {
          var $currentMedia = $(
            this.selectors.productMediaWrapper +
              ':not(.' +
              this.classes.hide +
              ')',
            this.$container
          );
          $currentMedia.trigger('xrLaunch');
        }.bind(this)
      );
    },

(around line 2912)

And just below paste this:

    _initProductSizeChart: function() {
  		$('[data-action="open-size-guide"]').magnificPopup({
      		type:'inline',
      		midClick: true
    	});
    },

Result should be this:

5- Open theme.scss.liquid and at the end of the file, paste this:

.size-guide__modal {
	background-color: #ffffff;
  	text-align: center;
  	padding: 20px;
  	max-width: 800px;
  	margin-left: auto;
  	margin-right: auto;
  	-webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.41); 
  	box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.41);
}

.size-guide__link {
	text-decoration: underline;
}

6- Create a page with handle size-guide and add the size chart in the page's content

Make sure the handle is "size-guide"

7- Enjoy your new size guide!