I need to add sections to a page. Hear me out. I know that this topic has been beat to death, but I feel like I have the answer, I just don't know entirely how to understand it.
I have been working hard to understand and implement the following tutorial in my client's store...... https://oak.works/blog/technical/2017/03/23/shopify-sections-editor/
I am brand new to Stack Overflow, not brand new to Shopify or the theme code, but I'm very green. So PLEASE take it easy on me... So far, after much painful research, I've determined (guessed) that the following steps are the most likely route that will lead to success:
- making a new alternate page template, mine:
page.portfolio.liquid- creating a snippet of the original section's code, just the top part (sans schema), mine:
snippet-collection-callout.liquid- creating a new section, using the code (from the article) to render blocks into the section and calling the snippet for settings as shown in the tutorial I think? (BELOW, called
section-portfolio-page.liquid)- defining the schema (copy and paste) from the original section
collection-callout.liquidto the new section (BELOW, calledsection-portfolio-page.liquid)- calling the section into the new page template
page.portfolio.liquidwith{% section 'section-portfolio-page' %}- creating a new page in Shopify admin, "Portfolio Page"
- assigning the new alternate page template to
page.portfolioand ensuring navigation is there- navigate to the new page through theme editor, which should show a static section that I can enter and customize via blocks.
But I'm stuck on step 4, because it is kicking back this error:
Error: Invalid JSON in tag 'schema'
I KNOW that sections on pages is possible. But I want to cry. Could anybody just take a look at the article, my steps, and the code below and nudge me in the right direction? Let me know after reading this if one of my steps is wrong somehow, or even just explain where the JSON error is?
I'm about 173 hours into trying to figure this out and my kids aren't amused. Not joking. Any help would be greatly appreciated...
Here is the original section I am trying to recreate and piece together, for use on a page:
{%- assign collection = collections[section.settings.collection] -%}
{%- assign isEmpty = false -%}
{% if section.settings.collection == blank %}
{%- assign isEmpty = true -%}
{% endif %}
{% if section.settings.divider %}<div class="section--divider">{% endif %}
<div class="page-width">
<div class="feature-row feature-row--small-none">
<div class="feature-row__item feature-row__callout-image">
<div class="callout-images {% if isEmpty %}blank-state{% endif %}" data-aos="collection-callout">
{% if isEmpty %}
{% for i in (1..5) %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
<div class="callout-image">{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}</div>
{% endfor %}
{% else %}
{% for product in collection.products limit: 5 %}
<img src="{{ product | img_url: '300x' }}" alt="{{ product.title }}" class="callout-image">
{% endfor %}
{% endif %}
</div>
</div>
<div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }} feature-row__callout-text larger-text">
{% if section.settings.subtitle %}
<p class="subtitle">{{ section.settings.subtitle }}</p>
{% endif %}
{% if section.settings.title != blank %}
<h2 class="h3">{{ section.settings.title }}</h3>
{% endif %}
<div class="rte">
{% if section.settings.text != blank %}
<p>{{ section.settings.text }}</p>
{% endif %}
</div>
{% if section.settings.cta_text1 != blank %}
<a href="{{ section.settings.cta_link1 }}" class="btn">
{{ section.settings.cta_text1 }}
</a>
{% endif %}
{% if section.settings.cta_text2 != blank %}
<a href="{{ section.settings.cta_link2 }}" class="btn">
{{ section.settings.cta_text2 }}
</a>
{% endif %}
</div>
</div>
</div>
{% if section.settings.divider %}</div>{% endif %}
{% schema %}
{
"name": "Collection callout",
"class": "index-section",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Brand new"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Collection callout"
},
{
"type": "textarea",
"id": "text",
"label": "Text",
"default": "Use this section to easily call attention to one of your collections. We'll show photos of the first 5 products."
},
{
"type": "text",
"id": "cta_text1",
"label": "Button #1 text",
"default": "Shop Jackets"
},
{
"type": "url",
"id": "cta_link1",
"label": "Button #1 link"
},
{
"type": "text",
"id": "cta_text2",
"label": "Button #2 text",
"default": "Shop All Mens"
},
{
"type": "url",
"id": "cta_link2",
"label": "Button #2 link"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "right",
"options": [
{
"value": "left",
"label": "Text on left"
},
{
"value": "right",
"label": "Text on right"
}
]
},
{
"type": "checkbox",
"id": "divider",
"label": "Show section divider",
"default": false
}
],
"presets": [{
"name": "Collection callout",
"category": "Collection"
}]
}
{% endschema %}
Here is the code for the new
section-portfolio-page.liquidI am trying to save, but getting an error for:
<div>
{% for block in section.blocks %}
<div class="grid-item" {{ block.shopify_attributes }}>
{% case block.type %}
{% when 'callout' %}
{% include 'snippet-collection-callout' %}
{% endcase %}
</div>
{% endfor %}
</div>
{% schema %}
{
"blocks": [
{
"name": "Collection callout",
"class": "index-section",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Brand new"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Collection callout"
},
{
"type": "textarea",
"id": "text",
"label": "Text",
"default": "Use this section to easily call attention to one of your collections. We'll show photos of the first 5 products."
},
{
"type": "text",
"id": "cta_text1",
"label": "Button #1 text",
"default": "Shop Jackets"
},
{
"type": "url",
"id": "cta_link1",
"label": "Button #1 link"
},
{
"type": "text",
"id": "cta_text2",
"label": "Button #2 text",
"default": "Shop All Mens"
},
{
"type": "url",
"id": "cta_link2",
"label": "Button #2 link"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "right",
"options": [
{
"value": "left",
"label": "Text on left"
},
{
"value": "right",
"label": "Text on right"
}
]
},
{
"type": "checkbox",
"id": "divider",
"label": "Show section divider",
"default": false
}
],
"presets": [{
"name": "Collection callout",
"category": "Collection"
}]
}
{% endschema %}
