Hi there,
I have inherited a bespoke Shopify theme and trying to make sense of the code. Any help would be most gratefully received as I have gone round in circles for hours and cannot work out why it wont work!
The intended result of this code is out output two columns/boxes with text and background images.
I have got the Schema working ok, and the first column/box is outputting as expected. The two issues are occuring in the second, for unknown reasons (to me!) it is not outputting the correct image or colour. Despite the ID’s matching.
For example for the first Column I have set “id”: “image” in the Schema and for the second I have set “id”: “image_2”.
If I could get a second brain on this that would be amazing as I am stumped!
Many thanks,
Duncan.
{%- if section.settings.image -%}
{%- assign img_object = section.settings.image -%}
{%- assign img_api = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{% schema %}
{
"name": "Two Column Content",
"settings": [
{
"type": "header",
"content": "Column One"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Header"
},
{
"type": "richtext",
"id": "content",
"label": "Content",
"default": "
Enter you text here...
"
},
{
"type": "color",
"id": "color",
"label": "Text Colour",
"default": "#000"
},
{
"type": "header",
"content": "Background Image"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-one-half",
"options": [
{ "value": "screen-height-full", "label": "Full screen height"},
{ "value": "screen-height-three-quarters", "label": "3/4 of screen"},
{ "value": "screen-height-two-thirds", "label": "2/3 of screen"},
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "seven-fifty-height-hero", "label": "750px" },
{ "value": "sixty-fifty-height-hero", "label": "650px" },
{ "value": "five-fifty-height-hero", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"unit": "%",
"min": 0,
"max": 90,
"step": 5,
"default":15
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
},
{
"type": "header",
"content": "Column Two"
},
{
"type": "text",
"id": "title_2",
"label": "Heading",
"default": "Header"
},
{
"type": "richtext",
"id": "content_2",
"label": "Content",
"default": "
Enter you text here...
"
},
{
"type": "color",
"id": "color_2",
"label": "Text Colour",
"default": "#000"
},
{
"type": "header",
"content": "Background Image"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image"
},
{
"type": "select",
"id": "height_2",
"label": "Section height",
"default": "screen-height-one-half",
"options": [
{ "value": "screen-height-full", "label": "Full screen height"},
{ "value": "screen-height-three-quarters", "label": "3/4 of screen"},
{ "value": "screen-height-two-thirds", "label": "2/3 of screen"},
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "seven-fifty-height-hero", "label": "750px" },
{ "value": "sixty-fifty-height-hero", "label": "650px" },
{ "value": "five-fifty-height-hero", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "range",
"id": "overlay_opacity_2",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"unit": "%",
"min": 0,
"max": 90,
"step": 5,
"default":15
},
{
"type": "color",
"id": "overlay_color_2",
"label": "Overlay color",
"default": "#fff"
}
],
"presets": [
{
"name": "Two Column Content",
"category": "Image"
}
]
}
{% endschema %}