What's the best practice for designing a schema for sliders in Liquid?

Store Design
1

Hey, guys! New to Shopify and Liquid here. I’m trying to build a new theme and just want to ask what’s the best way of designing a schema for slider with images, texts, and links. Basically per slide it will have an Image, a text, and a link.

I have this code


  {% assign image_blocks = section.blocks | where: 'type', 'category_image' %}
  {% assign title_blocks = section.blocks | where: 'type', 'category_title' %}

  {% for block in image_blocks %}
    
    
  {% endfor %}
  
  {% for block in title_blocks %}
    ### {{ block.settings.category_title }}
  {% endfor %}

which outputs the images and texts like this..





What I would like is an output like this using my schema(down below) I have. Is my design for this schema correct or best practice?


 
 ## {{ the_title }}

 
 ## {{ the_title }}

 
 ## {{ the_title }}

My schema

{% schema %} 
{
  "name":"Categories",
  "tag":"section",
  "class":"categories",
  "blocks":[
     {
        "name":"Category Image",
        "type":"category_image",
        "settings":[
           {
              "type":"image_picker",
              "id":"image",
              "label":"Image"
           }
        ]
     },
     {
      "name":"Category Title",
      "type":"category_title",
      "settings":[
         {
            "type":"text",
            "id":"category_title",
            "label":"Category Title"
         }
      ]
    },
    {
      "name":"Category Link",
      "type":"category_link",
      "settings":[
         {
            "type":"url",
            "id":"category_link",
            "label":"Category Link"
         }
      ]
    }
  ]
}
{% endschema %}
2

Okay! I solved it using this code, but the question remains. Schema-wise is this the best way of doing it?

{% assign image_blocks = section.blocks | where: 'type', 'category_image' %}
  {% assign title_blocks = section.blocks | where: 'type', 'category_title' %}
  {% assign link_blocks = section.blocks | where: 'type', 'category_link' %}

  {% for block in image_blocks %}
    
      
      ### {{ title_blocks[forloop.index0].settings.category_title }}
    
  {% endfor %}
3

In your case it makes sense to combine them in one block:

{% schema %} 
{
 ...
  "blocks":[
     {
        "name":"Category",
        "type":"category",
        "settings":[
           {
              "type":"image_picker",
              "id":"image",
              "label":"Image"
           },
           {
              "type":"text",
              "id":"title",
              "label":"Title"
           },
           {
              "type":"url",
              "id":"link",
              "label":"Link"
           }
        ]
     },
 ]
 ...
}
{% endschema %}

and then

{% for block in section.blocks %}
  {% if block.type == 'category' %}
	
	  
	    ### {{ block.settings.title }} 
	    {{ block.settings.image | image_url: width: 2000 | image_tag }}
	  
	

  {% endif %}
{% endfor %}
1 Like
4

Thank you so much! This is what I’m looking for! Although can I ask you another question please? Why is that whenever I stop the ‘shopify theme serve’ the values of the fields are being cleared? Is there a way that it won’t do that?

5

Not sure what is the sequence of your commands.

Are you doing shopify theme push after stopping serve? As far as I remember, serve creates a “hidden” development theme and when you stop serve it’s no longer visible in admin.

Also, to get changes from customiser to your local copy you need to do shopify theme pull after these changes were made and saved in customizer

Check discussion here https://github.com/Shopify/shopify-cli/issues/1434