Shopify Partners shopifypartners

## build-an-eye-catching-non-rectangular-header-design-markup.html
<header class="header">
  <h1>Black Friday, Cyber Monday</h1>
  <h2>Discounts on all products!</h2>
</header>
<div class="separator"></div>
<section class="footer"></section>

## build-an-eye-catching-non-rectangular-header-design.css
.header{
  box-sizing: border-box;
  background: linear-gradient(to left,#ff2952,#ce1e3f);;
}

.separator{
  height: 125px;
  margin-top:calc(125px * -1);
  background-image: linear-gradient(to bottom right, transparent, transparent 50%, #f3efe4 50%, #f3efe4);
  /* Using transparent for top of the gradient allows for a background image on the header. Alternatively you can just use a solid color that matches the header color. */

## eight-development-tips-for-building-better-custom-shopify-sites-account.json.liquid
{% layout none %}
{
  "first_name": "{{customer.first_name}}",
  "last_name": "{{customer.last_name}}",
  "email": "{{customer.email}}",
  "id": {{customer.id}},
  "name": "{{customer.name}}",
  "orders_count": {{customer.orders_count}}
}

## eight-development-tips-for-building-better-custom-shopify-sites-ajax.js
$.getJSON('/search?q=shirt&view=json', function(response) {
  console.log(response)
});

## eight-development-tips-for-building-better-custom-shopify-sites-theme.liquid
{% layout none %}
{% paginate search.results by 50 %}
  {
    "results": {{ search.results | json }}
  }
{% endpaginate  %}

## eight-development-tips-for-building-better-custom-shopify-sites-theme.liquid
<html>
  <head>
    {{ content_for_header }}
    {% include 'head' %}
  </head>
  <body>
    {% include 'header' %}
    <main id="main">
      {{ content_for_layout }}
    </main>

## eight-development-tips-for-building-better-custom-shopify-sites-javascript-instead-of-liquid.liquid
<script>
  Shopify.currentProduct = {{ product | json }};
  if (Shopify.currentProduct) {
    console.log(Shopify.currentProduct.variants);
  }
</script>

## a-beginners-guide-to-sass-part-3-interpolation.liquid.scss
//  Escaping Liquid in SCSS.
//
//  Expected output:
//  a{
//    color: {{ settings.link-color }};
//  }

a{
  color: #{'{{ settings.link-color }}'};
}

## web-design-animation-no-programming-remove-open-class.html
<code>
  clicking on "ul.feature li, ul.feature li img" removes class "open" on "ul.feature li"
  clicking on "ul.feature li" adds class "open" on "target"
</code>

## web-design-animation-no-programming-code-apply-open-class.html
<code>
  clicking on "ul.feature li" adds class "open" on "target"
</code>
	{% layout none %}
	{
	"first_name": "{{customer.first_name}}",
	"last_name": "{{customer.last_name}}",
	"email": "{{customer.email}}",
	"id": {{customer.id}},
	"name": "{{customer.name}}",
	"orders_count": {{customer.orders_count}}
	}
	$.getJSON('/search?q=shirt&view=json', function(response) {
	console.log(response)
	});
	{% layout none %}
	{% paginate search.results by 50 %}
	{
	"results": {{ search.results \| json }}
	}
	{% endpaginate %}
	<html>
	<head>
	{{ content_for_header }}
	{% include 'head' %}
	</head>
	<body>
	{% include 'header' %}
	<main id="main">
	{{ content_for_layout }}
	</main>
	<script>
	Shopify.currentProduct = {{ product \| json }};
	if (Shopify.currentProduct) {
	console.log(Shopify.currentProduct.variants);
	}
	</script>
	// Escaping Liquid in SCSS.
	//
	// Expected output:
	// a{
	// color: {{ settings.link-color }};
	// }

	a{
	color: #{'{{ settings.link-color }}'};
	}
	<code>
	clicking on "ul.feature li" adds class "open" on "target"
	</code>