Hi,
I want to create a 3 column layout on the Narrative theme that has an icon, a heading then a description for the how it works page. I have resorted to setting up a custom-content.liquid in the sections area for this but can’t add an image to the text heading section. Any help would be appreciated. Or code for
a different way to do this.
It looks like this at the moment and I wanted to add an icon above each section:
Hi @tenillegore
can you please share code file of your section?
So I can check
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
How do I share the code? Everytime I try to paste it in here it freezes the page 
This is the only way I thought to share it…
can you share store url
https://leslie-pomana.myshopify.com/pages/all-you-need-to-know
password: eceask
are you sure that code full? bcz i can see that section allow image upload option alreayd
yes it does but it is a separate block. I want it so the image is with the text heading block
so it sits above the text and heading instead of beside
try this code
it’s coming up with this error
Line 113 — Liquid syntax error: Expected end_of_string but found id in “block.settings.video_url.type == ““youtube”””
oh sorry for that issue if possible to add me staff account so i will easy to check and fix
I have now cleaned up the code and have it to this point. It still isn’t right obviously as I want the image to sit above the heading and text
Hi I am still looking for a bit of help with this code. Can anyone help please?
{% if section.settings.heading_text != blank %}
## {{ section.settings.heading_text | escape }}
{% endif %}
{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
{%- assign block_width = 'medium-up--one-quarter' -%}
{% when '33%' %}
{%- assign block_width = 'medium-up--one-third' -%}
{% when '50%' %}
{%- assign block_width = 'medium-up--one-half' -%}
{% when '66%' %}
{%- assign block_width = 'medium-up--two-thirds' -%}
{% when '75%' %}
{%- assign block_width = 'medium-up--three-quarters' -%}
{% when '100%' %}
{%- assign block_width = 'one-whole' -%}
{% endcase %}
{% case block.type %}
{% when 'image' %}
{% comment %}
Custom Image Block
{% endcomment %}
{% if block.settings.image != blank %}
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
{% comment %}
Custom Text Block
{% endcomment %}
{% if block.settings.heading_text != blank %}
## {{ block.settings.heading_text | escape }}
{% endif %}
{% if block.settings.paragraph_text != blank %}
{{ block.settings.paragraph_text }}
{% endif %}
{% endcase %}
{% endfor %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% schema %}
{
"name": {
"en": "Custom content"
},
"class": "index-section index-section--custom-content",
"settings": [
{
"type": "text",
"id": "heading_text",
"label": {
"en": "Heading"
},
"default": {
"en": "Custom content"
}
},
{
"type": "color",
"id": "heading_color",
"label": {
"en": "Heading color"
},
"default": "#242424"
},
{
"type": "color",
"id": "background_color",
"label": {
"en": "Background color"
}
},
{
"type": "checkbox",
"id": "top_margin",
"label": {
"en": "Top margin"
},
"default": true
},
{
"type": "checkbox",
"id": "bottom_margin",
"label": {
"en": "Bottom margin"
},
"default": true
}
],
"blocks": [
{
"type": "text",
"name": {
"en": "Text"
},
"settings": [
{
"type": "header",
"content": {
"en": "Heading"
}
},
{
"type": "text",
"id": "heading_text",
"label": {
"en": "Text"
},
"default": {
"en": "Talk about your brand"
}
},
{
"type": "color",
"id": "heading_color",
"label": {
"en": "Color"
},
"default": "#242424"
},
{
"type": "select",
"id": "heading_style",
"label": {
"en": "Style"
},
"default": "h3",
"options": [
{
"value": "h1",
"label": {
"en": "Heading 1"
}
},
{
"value": "h2",
"label": {
"en": "Heading 2"
}
},
{
"value": "h3",
"label": {
"en": "Heading 3"
}
},
{
"value": "h4",
"label": {
"en": "Heading 4"
}
},
{
"value": "h5",
"label": {
"en": "Heading 5"
}
},
{
"value": "h6",
"label": {
"en": "Heading 6"
}
}
]
},
{
"type": "header",
"content": {
"en": "Paragraph"
}
},
{
"type": "richtext",
"id": "paragraph_text",
"label": {
"en": "Text"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "paragraph_color",
"label": {
"en": "Color"
},
"default": "#4a4a4a"
},
{
"type": "select",
"id": "paragraph_size",
"label": {
"en": "Size"
},
"default": "1",
"options": [
{
"value": "1",
"label": {
"en": "Medium"
}
},
{
"value": "1.25",
"label": {
"en": "Large"
}
},
{
"value": "1.5",
"label": {
"en": "Extra large"
}
}
]
},
{
"type": "header",
"content": {
"en": "Layout"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment"
},
"info": {
"en": "Position relative to other content blocks on the same row"
},
"default": "center",
"options": [
{
"value": "top",
"label": {
"en": "Top"
}
},
{
"value": "center",
"label": {
"en": "Middle"
}
},
{
"value": "bottom",
"label": {
"en": "Bottom"
}
}
]
},
{
"type": "select",
"id": "align_text",
"label": {
"en": "Horizontal alignment"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"en": "Left"
}
},
{
"value": "center",
"label": {
"en": "Centered"
}
},
{
"value": "right",
"label": {
"en": "Right"
}
}
]
}
]
},
{
"type": "image",
"name": {
"en": "Image"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"en": "Image"
}
},
{
"type": "header",
"content": {
"en": "Layout"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment"
},
"info": {
"en": "Position relative to other content blocks on the same row"
},
"default": "center",
"options": [
{
"value": "top",
"label": {
"en": "Top"
}
},
{
"value": "center",
"label": {
"en": "Middle"
}
},
{
"value": "bottom",
"label": {
"en": "Bottom"
}
}
]
}
]
},
{
"type": "collection",
"name": {
"en": "Collection"
},
"settings": [
{
"type": "collection",
"id": "collection",
"label": {
"en": "Collection"
}
},
{
"type": "header",
"content": {
"en": "Layout"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment"
},
"info": {
"en": "Position relative to other content blocks on the same row"
},
"default": "center",
"options": [
{
"value": "top",
"label": {
"en": "Top"
}
},
{
"value": "center",
"label": {
"en": "Middle"
}
},
{
"value": "bottom",
"label": {
"en": "Bottom"
}
}
]
}
]
}
],
"presets": [
{
"name": {
"en": "Custom content"
},
"blocks": [
{
"type": "text"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
I am wanting the image to be included in the same block as the heading and text so I can have an icon above the heading and text.
{% if section.settings.heading_text != blank %}
## {{ section.settings.heading_text | escape }}
{% endif %}
{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
{%- assign block_width = 'medium-up--one-quarter' -%}
{% when '33%' %}
{%- assign block_width = 'medium-up--one-third' -%}
{% when '50%' %}
{%- assign block_width = 'medium-up--one-half' -%}
{% when '66%' %}
{%- assign block_width = 'medium-up--two-thirds' -%}
{% when '75%' %}
{%- assign block_width = 'medium-up--three-quarters' -%}
{% when '100%' %}
{%- assign block_width = 'one-whole' -%}
{% endcase %}
{% case block.type %}
{% when 'image' %}
{% comment %}
Custom Image Block
{% endcomment %}
{% if block.settings.image != blank %}
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
{% comment %}
Custom Text Block
{% endcomment %}
{% if block.settings.heading_text != blank %}
## {{ block.settings.heading_text | escape }}
{% endif %}
{% if block.settings.paragraph_text != blank %}
{{ block.settings.paragraph_text }}
{% endif %}
{% endcase %}
{% endfor %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% schema %}
{
"name": {
"en": "Custom content"
},
"class": "index-section index-section--custom-content",
"settings": [
{
"type": "text",
"id": "heading_text",
"label": {
"en": "Heading"
},
"default": {
"en": "Custom content"
}
},
{
"type": "color",
"id": "heading_color",
"label": {
"en": "Heading color"
},
"default": "#242424"
},
{
"type": "color",
"id": "background_color",
"label": {
"en": "Background color"
}
},
{
"type": "checkbox",
"id": "top_margin",
"label": {
"en": "Top margin"
},
"default": true
},
{
"type": "checkbox",
"id": "bottom_margin",
"label": {
"en": "Bottom margin"
},
"default": true
}
],
"blocks": [
{
"type": "text",
"name": {
"en": "Text"
},
"settings": [
{
"type": "header",
"content": {
"en": "Heading"
}
},
{
"type": "text",
"id": "heading_text",
"label": {
"en": "Text"
},
"default": {
"en": "Talk about your brand"
}
},
{
"type": "color",
"id": "heading_color",
"label": {
"en": "Color"
},
"default": "#242424"
},
{
"type": "select",
"id": "heading_style",
"label": {
"en": "Style"
},
"default": "h3",
"options": [
{
"value": "h1",
"label": {
"en": "Heading 1"
}
},
{
"value": "h2",
"label": {
"en": "Heading 2"
}
},
{
"value": "h3",
"label": {
"en": "Heading 3"
}
},
{
"value": "h4",
"label": {
"en": "Heading 4"
}
},
{
"value": "h5",
"label": {
"en": "Heading 5"
}
},
{
"value": "h6",
"label": {
"en": "Heading 6"
}
}
]
},
{
"type": "header",
"content": {
"en": "Paragraph"
}
},
{
"type": "richtext",
"id": "paragraph_text",
"label": {
"en": "Text"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "paragraph_color",
"label": {
"en": "Color"
},
"default": "#4a4a4a"
},
{
"type": "select",
"id": "paragraph_size",
"label": {
"en": "Size"
},
"default": "1",
"options": [
{
"value": "1",
"label": {
"en": "Medium"
}
},
{
"value": "1.25",
"label": {
"en": "Large"
}
},
{
"value": "1.5",
"label": {
"en": "Extra large"
}
}
]
},
{
"type": "header",
"content": {
"en": "Layout"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment"
},
"info": {
"en": "Position relative to other content blocks on the same row"
},
"default": "center",
"options": [
{
"value": "top",
"label": {
"en": "Top"
}
},
{
"value": "center",
"label": {
"en": "Middle"
}
},
{
"value": "bottom",
"label": {
"en": "Bottom"
}
}
]
},
{
"type": "select",
"id": "align_text",
"label": {
"en": "Horizontal alignment"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"en": "Left"
}
},
{
"value": "center",
"label": {
"en": "Centered"
}
},
{
"value": "right",
"label": {
"en": "Right"
}
}
]
}
]
},
{
"type": "image",
"name": {
"en": "Image"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"en": "Image"
}
},
{
"type": "header",
"content": {
"en": "Layout"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment"
},
"info": {
"en": "Position relative to other content blocks on the same row"
},
"default": "center",
"options": [
{
"value": "top",
"label": {
"en": "Top"
}
},
{
"value": "center",
"label": {
"en": "Middle"
}
},
{
"value": "bottom",
"label": {
"en": "Bottom"
}
}
]
}
]
},
{
"type": "collection",
"name": {
"en": "Collection"
},
"settings": [
{
"type": "collection",
"id": "collection",
"label": {
"en": "Collection"
}
},
{
"type": "header",
"content": {
"en": "Layout"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment"
},
"info": {
"en": "Position relative to other content blocks on the same row"
},
"default": "center",
"options": [
{
"value": "top",
"label": {
"en": "Top"
}
},
{
"value": "center",
"label": {
"en": "Middle"
}
},
{
"value": "bottom",
"label": {
"en": "Bottom"
}
}
]
}
]
}
],
"presets": [
{
"name": {
"en": "Custom content"
},
"blocks": [
{
"type": "text"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
I have got it this far but now I need it to be responsive so that it is only 1 column on mobile and 3 on desktop.
## {{ section.settings.title | escape }}
{% if section.settings.heading_text != blank %}
## {{ section.settings.heading_text | escape }}
{% endif %}
{{ block.settings.paragraph_text }}
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
- {%- if block.settings.link != blank -%}
{%- endif -%}
{%- if block.settings.image != blank -%}
{{ block.settings.image | img_url: '100x100', scale: 2 | img_tag: block.settings.image.alt }}
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{% if block.settings.text %}
#### {{block.settings.title}}
{{ block.settings.text }}
{%- endif -%}
{%- if block.settings.link != blank -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{% schema %}
{
"name": "Logo List",
"max_blocks": 6,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo List"
}
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Logo image"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Section Heading"
},
{
"type": "richtext",
"id": "text",
"label": "Description",
"default": "
Add your description here
"
}
]
}
],
"presets": [
{
"name": "Logo list",
"category": "Image",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}
oh sorry but i can’t see that section on home page
It’s not on the home page. IT’s on the How It Works page
All good I have finally got it 