joe-dempsey

{% comment %} this is a barebones menu with submenu items for Shopify {% endcomment %}
{% comment %} see shopify docu for creating submenu items: https://help.shopify.com/manual/sell-online/online-store/menus-and-links#create-a-drop-down-menu {% endcomment %}


{% comment %} first assign the menu - this is the only thing you need to change {% endcomment %}

{% assign linklist = settings.collections_nav %}

{% comment %} in the above line change the collections_nav to the handle of your main naivgation  {% endcomment %}
{% comment %} the code below will do the rest  {% endcomment %}

joe-dempsey

/* ADD CLASS .flexbox-container TO PARENT - JOB DONE */


.flexbox-container {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

joe-dempsey

{% comment %}
use the following to create a menu in Shopify
in this case we are assigning the menu with handle mobi_nav
{% endcomment %}



<ul class="nav">
          {% for link in linklists.mobi_nav.links %}
          <li><a href="{{ link.url }}">{{ link.title }}</a></li>

joe-dempsey

{% comment %} there's instances were we need to use categories and subcategories in Shopify and we get pissed with hacking around {% endcomment%}
{% comment %} Here's an example where we're using menu's of categories to create sub cats - no need for tags {% endcomment%}
{% comment%} pay atention to the assign/escape assign {% endcomment%}
{% comment%} categories without a product will not be displayed {% endcomment%}


<!-- example 1 ================================================== -->
<!-- basic cat menu with product count (e.g. in sidebar) ================================================== -->

  <!-- grab the collection as we'll need to reassign that later ================================================== -->

joe-dempsey

{% comment %}let's build a list of collections based on a menu of collections.{% endcomment %}   
{% comment %}this can be added to a page or collection - I'm assuming collection.{% endcomment %}   

{% comment %}to start you need a menu which contains a list of links to collections.{% endcomment %}
{% comment %}this is a barebones version - which is supposed to be pulled into a theme so edit grid/loop etc as required{% endcomment %}   
{% comment %}for custom shopify theme development email design at liquid dot gallery {% endcomment %}   

{% comment %} our menu of collections has the handle "in-wild" {% endcomment %}   

{% assign mastercollection = collection %}    {% comment %}don't need this if using a page - use it to escape the for loop and reassign original collection.{% endcomment %}

joe-dempsey

{% comment %}Here we send a user straight to the checkout after adding a product to the cart - bypassing the cart - useful where we don't want to set up ajax or streamline the experience{% endcomment %}



<form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-form">

            {% comment %} nest this within the form{% endcomment %}
            <input type="hidden" name="return_to" value="/checkout" />

// product form fields

joe-dempsey

<!-- here there's a simple example wwith a radio with field id features_website - 2 options -->

<?php $var = get_field('features_website'); ?>
	
	    <?php if( $var == 'web' ){ ?>
	    <p>It's a website...</p>
	    
	    
	    <?php } else if( $var  == 'ecommerce' ){ ?>

joe-dempsey

<!-- here we're going to add a % discount which is a calculation of the sale and product price -->
<!-- quite simple - capture the value and then display it -->
<!-- see newer version at end -->


<!-- capture the % discount -->

{% capture discount %} 
{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}% <!-- percentage maths -->
{% endcapture %}

joe-dempsey

<!-- here we're going to add a blog loop to the homepage of a shopfy store -->
<!-- quite simple - this is raw output -->
<!-- here i'm setting limit to 2 posts and it's from the default "news" blog -->
<!-- if there's a featured image we'll use that - else we'll use the first image of the post -->
<!-- you'll need to add additional markup for display based on your theme. -->


{% for article in blogs.news.articles limit:2 %}

joe-dempsey

<!-- crazy egg --> 

<script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName("script")[0];
a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/0037/6196.js?"+Math.floor(new Date().getTime()/3600000);
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script>