I have been trying to save the file but it throws an error. I need some help to fix this issue.
Here’s my code :
{% comment %}
** Heading **
{% endcomment %}
{%- assign preheading = section.settings.preheading -%}
{%- assign title = section.settings.title -%}
{%- assign subheading = section.settings.subheading -%}
{% comment %} Is the color set to transparent? {% endcomment %}
{%- assign heading_alpha = section.settings.heading_color | color_extract: 'alpha' -%}
{%- assign preheading_alpha = section.settings.preheading_color | color_extract: 'alpha' -%}
{%- assign subheading_alpha = section.settings.subheading_color | color_extract: 'alpha' -%}
{%- assign background_alpha = section.settings.background | color_extract: 'alpha' -%}
{%- assign gradient_alpha = section.settings.gradient | color_extract: 'alpha' -%}
{% comment %} Section specific CSS {% endcomment %}
{% capture section_css -%}
.section {
background-image: linear-gradient({{ section.settings.gradient_rotation }}deg, rgba(255,255,255,0), {{ section.settings.gradient }});
background-color: {%- if background_alpha != 0 -%}{{ section.settings.background }}{%- endif -%};
}
.heading-section__heading {
color: {%- if heading_alpha != 0 -%}{{ section.settings.heading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}
.heading-section__preheading {
color: {%- if preheading_alpha != 0 -%}{{ section.settings.preheading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}
.heading-section__subheading {
color: {%- if subheading_alpha != 0 -%}{{ section.settings.subheading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}
{%- endcapture -%}
{% style %}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
padding-left: {{ section.settings.padding_left }}px;
padding-right: {{ section.settings.padding_right }}px;
{% if section.settings.width == 'wide' -%}
width: 100%;
{%- elsif section.settings.width == 'half' -%}
width: 50%;
{%- endif %}
}
{% render 'css-loop',
css: section_css,
id: section.id
%}
{% render 'css-loop',
css: section.settings.custom_css,
id: section.id
%}
{% endstyle %}
{% comment %} HTML markup {% endcomment %}
{% if title != blank or subheading != blank or preheading != blank %}
{% endif %}
{% schema %}
{
"name": "Heading",
"settings": [
{
"type": "richtext",
"id": "preheading",
"label": "Preheading",
"default": "
Add a preheading
"
},
{
"type": "select",
"id": "vertical_alignment",
"label": "Text alignment",
"default": "left",
"info": "Text alignment for product descriptions",
"options": [
{
"value": "heading1",
"label": "h1"
},
{
"value": "heading2",
"label": "h2"
},
{
"value": "heading3",
"label": "h3"
}
{
"value": "heading4",
"label": "h4"
}
]
},
{
"type": "richtext",
"id": "subheading",
"label": "Subheading",
"default": "
Additional text or description of section
"
},
{
"type": "header",
"content": "Text colors"
},
{
"type": "color",
"id": "preheading_color",
"label": "Preheading",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading",
"default": "rgba(0,0,0,0)"
},
{
"type": "header",
"content": "Background"
},
{
"type": "color",
"id": "background",
"label": "Background",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "gradient",
"label": "Gradient",
"default": "rgba(0,0,0,0)"
},
{
"type": "range",
"id": "gradient_rotation",
"label": "Gradient rotation",
"min": 0,
"max": 180,
"step": 10,
"default": 0,
"unit": "deg"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Text alignment",
"default": "middle",
"info": "Text alignment for product descriptions",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "middle",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "standard",
"options": [
{
"value": "half",
"label": "Half"
},
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_left",
"label": "Left spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_right",
"label": "Right spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "paragraph",
"content": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
},
{
"type": "text",
"id": "css_class",
"label": "CSS Class"
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS"
}
],
"presets": [
{
"name": "Heading"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Please have a Look.
Thanks.