shopifyliquidshopify-template

Shopify section schema: different content for each present block


I'm just starting out with Shopify development, and I'm creating a custom section called USP Banner which has a single block type called column that can be added up to 4 times; and that column just has one text and one richtext field within it. The content of each column is identical on every page, but the section can appear in different places depending on the page itself.

I've given the column default values for the text & richtext and added the 4 columns that will be used into the presets definition of the schema; however because it's just the same column x 4, each column has the same content 4 times. What I'm aiming for is that when you add the section to any page, it prefills each column with different content.

I read through the Shopify docs and all I found was some vague allusion to having a settings object within the block presets, but I can't find any examples of that anywhere. I also found an old SO answer stating that presets can't contain default content.

Is there an easy way to add default content to repeating blocks within a section?


Solution

  • Although it's not made clear in the official docs, you can set default values for repeated blocks in the presets; but whereas the settings when defining the blocks are arrays of objects, the settings within the preset blocks are objects where each pre-determined field value uses the field's unique ID as its key. For example, a typical section schema might look like:

    {% schema %}
        {
            "name": "USP Banner",
            "blocks": [
                {
                    "type": "column",
                    "name": "Column",
                    "limit": 4,
                    "settings": [
                        {
                            "type": "text",
                            "id": "heading",
                            "label": "Heading",
                        },
                        {
                            "type": "richtext",
                            "id": "text",
                            "label": "Text",
                        }
                    ]
                }
            ],
            "presets": [
                {
                    "name": "USP Banner",
                    "blocks": [
                        {
                            "type": "column"
                        },
                        {
                            "type": "column"
                        }
                    ]
                }
            ]
        }
    {% endschema %}
    

    ...so to create preset values for each block, we simply add settings to the preset definition like so:

    "presets": [
        {
            "name": "USP Banner",
            "blocks": [
                {
                    "type": "column",
                    "settings": {
                        "heading": "Remarkable Value",
                        "text": "<p>Never knowingly undersold</p>"
                    }
                },
                {
                    "type": "column",
                    "settings": {
                        "heading": "5-Year Warranty",
                        "text": "<p>We're that confident in our products</p>"
                    }
                }
            ]
        }
    ]
    

    ...where the key for each field (heading & text in this case) is the ID of the defined fields in the blocks section at the top of the schema.