nickmealey

/* 
  Meteor fix for older Responsive theme 
  Copy and paste the below code within Meteor App > Settings > CSS Editor
*/

#mobile_nav .meteor-menu[data-meteor-template=vertical] .m-nav a {
  display: none !important;
}

#mobile_nav .meteor-menu[data-meteor-template=vertical] .m-nav[data-active="true"] > a {

nickmealey

/* Relatable styles */
[data-relatable] {
  margin: 15px auto;
  text-align: left;
}

[data-relatable] h3 {
  text-align: center;
}

nickmealey

{% for field in customer.metafields.customr %}
  <p>{{ field[0] | humanize }}: <strong>{{ field[1] }}</strong></p>
{% endfor %}

nickmealey

<div data-relatable="page.pages" data-relatable-id="{{page.id}}">
  {% raw %}
    {{#pages}}
      <div>{{body_html}}</div>
    {{/pages}}
  {% endraw %}
</div>

nickmealey

<div data-relatable="page.collections" data-relatable-id="{{page.id}}">
  {% raw %}
    {{#collections}}
      <a href="/collections/{{handle}}" class="relatable-item">
        <img src="{{#img_url.medium}}{{image.src}}{{/img_url.medium}}">
        <div class="title">{{title}}</div>
      </a>
    {{/collections}}
  {% endraw %}
</div>

nickmealey

<div data-relatable="page.articles" data-relatable-id="{{page.id}}">
  {% raw %}
    {{#articles}}
      <article class="relatable-item">
        <img src="{{#img_url.medium}}{{image.src}}{{/img_url.medium}}">
        <p>{{summary_html}}</p>
        <p>{{author}}</p>
        <a href="/blogs/{{blog.handle}}/{{id}}-{{handle}}">Read more...</a>
      </article>
    {{/articles}}

nickmealey

<div data-relatable="page.products" data-relatable-id="{{page.id}}">
  {% raw %}
    {{#products.length}}<h3>Related Products</h3>{{/products.length}}
    {{#products}}
      <a href="/products/{{handle}}" class="relatable-item">
        <img src="{{#img_url.medium}}{{image.src}}{{/img_url.medium}}">
        <div class="title">{{title}}</div>
      </a>
    {{/products}}
  {% endraw %}

nickmealey

<div data-relatable="collection.pages" data-relatable-id="{{collection.id}}">
  {% raw %}
    {{#pages}}
      <div>{{body_html}}</div>
    {{/pages}}
  {% endraw %}
</div>

nickmealey

<div data-relatable="collection.collections" data-relatable-id="{{collection.id}}">
  {% raw %}
    {{#collections}}
      <a href="/collections/{{handle}}" class="relatable-item">
        <img src="{{#img_url.medium}}{{image.src}}{{/img_url.medium}}">
        <div class="title">{{title}}</div>
      </a>
    {{/collections}}
  {% endraw %}
</div>

nickmealey

<div data-relatable="collection.articles" data-relatable-id="{{collection.id}}">
  {% raw %}
    {{#articles}}
      <article class="relatable-item">
        <img src="{{#img_url.medium}}{{image.src}}{{/img_url.medium}}">
        <p>{{summary_html}}</p>
        <p>{{author}}</p>
        <a href="/blogs/{{blog.handle}}/{{id}}-{{handle}}">Read more...</a>
      </article>
    {{/articles}}