Keith Greer Web Development

Setting up a multipurpose CMSed liquid homepage section for Shopify.

The below schema includes two sets of data

1. A YouTube Video display
2. A list of testimonials (max 5)

{% schema %}
  {
    "name": "Video & Testimonial",
    "max_blocks": 5,
  	"settings": [
		{
          "id": "video_title",
          "type": "text",
          "label": "Heading",
          "default": "Learn 'How to' with our video"
		},
		{
          "id": "video_sub",
          "type": "text",
          "label": "Heading",
          "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
		},
		{
          "id": "video_code",
          "type": "text",
          "label": "YouTube Code",
          "default": "GF60Iuh643I"
		},
		{
          "id": "video_image",
          "type": "image_picker",
          "label": "Background Image"
		}
  	],
  	"blocks": [
      {
        "type": "testimonial",
        "name": "Testimonial Option",
        "settings": [
          {
            "id": "testimonial_subject",
            "type": "text",
            "label": "Testimonial Subject"
      	  },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "id": "testimonial_desc",
            "type": "textarea",
            "label": "Testimonial Description"
          },
          {
            "id": "testimonial_author",
            "type": "text",
            "label": "Testimonial Author"
          }
        ]
      }
      
    ],
    "presets": [
      {
        "name": "Video and Testimonial",
        "category": "Testimonial",
		    "settings": {}
      }
    ]
  }
{% endschema %}

First we grab and display the variables from the Settings section of the JSON

<div class="medium-6 columns">
	<div class="content-wrap">
		<h3><span class="subheading">Learn 'How to' with our</span>{{ section.settings.video_title }}</h3>
		<p>{{ section.settings.video_sub }}</p>
		<a data-fancybox href="https://www.youtube.com/watch?v={{ section.settings.video_code }}" class="button">View Video</a>
	</div>
</div>
<div class="medium-6 columns">
	<a data-fancybox class="image-wrap" href="https://www.youtube.com/watch?v={{ section.settings.video_code }}">
		<img class="play-button" src="//cdn.shopify.com/s/files/1/2602/4064/t/2/assets/play-button.png">
		<img src="{{ section.settings.video_image | img_url }}">
	</a>
</div>

Then we grab the repeating testimonial blocks

{% if section.blocks.size > 0 %}
<section class="testimonial1 angle-bigarrow">
	<div class="row">
		<div class="small-12 column">
			<ul class="grid-1 wow fadeInUp">
				{% for block in section.blocks %}
				<li {{ block.shopify_attributes }}>
					<div class="testimonial-inner">
						<img src="{{ block.settings.image | img_url: '150x150' }}" alt="slider" />
						<h5>{{ block.settings.testimonial_author }}</h5>
						<p>{{ block.settings.testimonial_desc }}</p>
					</div>
				</li>
				{% endfor %}
			</ul>
		</div>
	</div>
</section>
{% endif %}

The code below will allow you to display a set of product variations on a Shopify product collection pages.

Set this code in the collections page product loop, or within the liquid snippet that controls the display of products. On line three I’ve specified “Weight” as the option I want to display so on the list page the customer can see that I have 25ml, 50ml, and 100ml product sizes available.

{% for option in product.options %}
  {% if option == 'Weight' %}
    {% assign index = forloop.index0 %}
      {% for variant in product.variants %}
        {{ variant.options[index] }}
      {% endfor %}
    {% endif %}
{% endfor %}