Main issue: A product page collapsible row in the Spotlight theme can’t see a file-type metafield as a Dynamic source.
Status: Partially resolved (images). The video approach remains unanswered/open.
Hello guys.
I a trying to setup a file type metafield and it cannot be detected by the dynamic sources in the collapsable row. All other metafields I have set up as a dynamic collapsable row on my product page is working fine, it’s just the file metafield option that is not showing up in my list of dynamic sources (see pic). Does anyone know how to fix this?
https://mastorascy.myshopify.com/
Thanks in advance. Using spotlight theme.
The file metafield will only be displayed on the image dynamic field or video dynamic field.
Alright, and what type of field is that? Is collapsible row not compatible with file metafields?
It’s not that the collapsible row is incompatible with the file meta field.
It’s that the existing fillable content of your collapsible row can only be text and pages. You can’t insert pictures. If you want to add a file meta field, you need to modify the code and add an image upload box.
Find ‘collapsible-content.liquid’, overwrite the original code with the following code.
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'collapsible-content.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if section.settings.caption != blank -%}
{{ section.settings.caption | escape }}
{% endif %}
{%- if section.settings.heading != blank -%}
##
{{ section.settings.heading }}
{%- else -%}
## {{ 'accessibility.collapsible_content_title' | t }}
{% endif %}
{%- if section.settings.image != blank -%}
{%- liquid
assign padding_multiplier = 1
if section.settings.layout == 'section'
assign padding_multiplier = 2
endif
assign desktop_tablet_padding = 100 | times: padding_multiplier | append: 'px'
assign mobile_padding = 30 | times: padding_multiplier | append: 'px'
-%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ desktop_tablet_padding }}) / 2),
(min-width: 750px) calc((100vw - {{ desktop_tablet_padding }}) / 2),
calc(100vw - {{ mobile_padding }})
{%- endcapture -%}
{{
section.settings.image
| image_url: width: 3200
| image_tag:
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
{% endif %}
{%- for block in section.blocks -%}
{%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
(min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
{%- endcapture -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.collapsible_content.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "text",
"id": "caption",
"label": "t:sections.collapsible_content.settings.caption.label"
},
{
"type": "inline_richtext",
"id": "heading",
"label": "t:sections.collapsible_content.settings.heading.label",
"default": "t:sections.collapsible_content.settings.heading.default"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "heading_alignment",
"label": "t:sections.collapsible_content.settings.heading_alignment.label",
"options": [
{
"value": "left",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__3.label"
}
],
"default": "center"
},
{
"type": "select",
"id": "layout",
"label": "t:sections.collapsible_content.settings.layout.label",
"options": [
{
"value": "none",
"label": "t:sections.collapsible_content.settings.layout.options__1.label"
},
{
"value": "row",
"label": "t:sections.collapsible_content.settings.layout.options__2.label"
},
{
"value": "section",
"label": "t:sections.collapsible_content.settings.layout.options__3.label"
}
],
"default": "none"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "color_scheme",
"id": "container_color_scheme",
"label": "t:sections.collapsible_content.settings.container_color_scheme.label",
"info": "t:sections.collapsible_content.settings.container_color_scheme.info",
"default": "scheme-2"
},
{
"type": "checkbox",
"id": "open_first_collapsible_row",
"default": false,
"label": "t:sections.collapsible_content.settings.open_first_collapsible_row.label"
},
{
"type": "header",
"content": "t:sections.collapsible_content.settings.header.content"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.collapsible_content.settings.image.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collapsible_content.settings.image_ratio.options__1.label"
},
{
"value": "small",
"label": "t:sections.collapsible_content.settings.image_ratio.options__2.label"
},
{
"value": "large",
"label": "t:sections.collapsible_content.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.collapsible_content.settings.image_ratio.label"
},
{
"type": "select",
"id": "desktop_layout",
"options": [
{
"value": "image_first",
"label": "t:sections.collapsible_content.settings.desktop_layout.options__1.label"
},
{
"value": "image_second",
"label": "t:sections.collapsible_content.settings.desktop_layout.options__2.label"
}
],
"default": "image_second",
"label": "t:sections.collapsible_content.settings.desktop_layout.label",
"info": "t:sections.collapsible_content.settings.desktop_layout.info"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "collapsible_row",
"name": "t:sections.collapsible_content.blocks.collapsible_row.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.default",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label",
"info": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.info"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label"
}
],
"default": "check_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.label"
},
{
"type": "richtext",
"id": "row_content",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.row_content.label"
},
{
"type": "page",
"id": "page",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.page.label"
},
{
"type": "image_picker",
"id": "image",
"label": "image"
}
]
}
],
"presets": [
{
"name": "t:sections.collapsible_content.presets.name",
"blocks": [
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
}
]
}
]
}
{% endschema %}
Alright, that helped a bit I adjusted the code because it broke the styling, but I managed to adjust it a bit! What if I want to add a video instead of an image. Do you know how that is done?
Thanks!