Shopify: Setting up a multipurpose CMSed liquid homepage section

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 %}

 

Published by

Keith Greer

Senior PHP and Magento Web Developer in Belfast, Northern Ireland.