Add Custom Sections on a pages in Shopify

Add custom section on a regular pages in shopify through page template. follow the following steps to create a new page template with custom shopify sections

1. Click on “Add a new Template” from Edit Code section in shopify admin panel.
Ex. template name like – pages.mytemplate.liquid

2. Paste the following line at the top the the page in pages.mytemplate file.

{% section <strong>'mycustom-section</strong>' %}

3. Click on “Add a new Section” from Sections Panel.
Ex. section name like ‘mycustom-section‘

4. paste the following code into mycustom-section.liquid file

<div class="page-width container">

<div class="custom-content row product-grid" style="padding:50px 20xp;">

{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
{%- assign max_height = 250 -%}
{%- assign block_width = 'item col-12 col-md-3 col-lg-3' -%}
{% when '33%' %}
{%- assign max_height = 345 -%}
{%- assign block_width = 'item col-12 col-md-4 col-lg-4' -%}
{% when '50%' %}
{%- assign max_height = 530 -%}
{%- assign block_width = 'item col-12 col-md-6 col-lg-6' -%}
{% when '66%' %}
{%- assign max_height = 720 -%}
{%- assign block_width = 'item col-12 col-md-8 col-lg-8' -%}
{% when '75%' %}
{%- assign max_height = 810 -%}
{%- assign block_width = 'item col-12 col-md-10 col-lg-10' -%}
{% when '100%' %}
{%- assign max_height = 1090 -%}
{%- assign block_width = 'item col-12 col-md-12 col-lg-12' -%}
{% endcase %}

{% comment %}
{% if block.type == 'image' %}
{% capture img_id %}CustomImage--{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}
{% capture img_wrapper_id %}CustomImageWrapper--{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}

{% unless block.settings.image == blank %}
{% include 'image-style' with image: block.settings.image, small_style: false, width: max_height, height: max_height, wrapper_id: img_wrapper_id, img_id: img_id %}
{% endunless %}
{% endif %}
{% endcomment %}

<div class="grid-item custom__item custom__item--{{block.id}} {{ block_width }} {% if block.settings.alignment %}align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }} style="padding:30px 20px;">
<div class="inner product-item custom__item-inner custom__item-inner--{{ block.type }}"{% if block.type == 'image' %} id="{{ img_wrapper_id }}"{% endif %}>
{% case block.type %}

{% when 'image' %}
{% if block.settings.image != blank %}
{%- assign img_url = block.settings.image | img_url: '1024x' -%}
<div>
<a href="{{ block.settings.image | img_url: '' }}">
<img
class="custom__image lazyload js"
src="{{ block.settings.image}}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}"> </a>
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{% endcapture %}
{{ block.settings.image | img_url: image_size, scale: 2, crop: 'top' | img_tag: block.settings.image.alt, 'custom__image' }}
</noscript>
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

{% when 'text' %}
<div class="medium-up--text-{{ block.settings.align_text }}">
{% if block.settings.title != blank %}
<h4 class="h3" style="font-size: 2.50rem;">{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="textpara rte-setting rte">{{ block.settings.text }}</div>
{% endif %}
</div>

{% when 'video' %}
<div class="rte__video-wrapper">
{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% if block.settings.video_url.type == "vimeo" %}
<iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?byline=0&portrait=0&badge=0" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>

{% when 'product' %}
{%- assign product = all_products[block.settings.product] -%}
{% if product.title.size > 0 %}
{% include 'product-grid-item', max_height: max_height %}
{% else %}
{% comment %}
No product yet. Show onboarding one.
{% endcomment %}
<div class="grid-view-item">
<a class="grid-view-item__link" href="#">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
{{ 1999 | money }}
</div>
</a>
</div>
{% endif %}

{% when 'collection' %}
{%- assign collection = collections[block.settings.collection] -%}
{% include 'collection-deals-grid' %}

{% when 'html' %}
{% if block.settings.code != blank %}
{{ block.settings.code }}
{% endif %}

{% endcase %}
</div>
</div>

{% endfor %}
</div>

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>

<style>
.textpara p{
font-size:15px;
line-height: 24px;
}
</style>

{% schema %}
{
"name": {
"en": "Custom Page Template",
"es": "Contenido personalizado",
"pt-BR": "Conteúdo personalizado"
},
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Heading",
"es": "Título",
"pt-BR": "Título"
},
"default": {
"en": "Custom Page Template",
"es": "Contenido personalizado",
"pt-BR": "Conteúdo personalizado"
}
}
],
"blocks": [
{
"type": "text",
"name": {
"en": "Text",
"es": "Texto",
"pt-BR": "Texto"
},
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Heading",
"es": "Título",
"pt-BR": "Título"
},
"default": {
"en": "Talk about your brand",
"es": "Habla de tu marca",
"pt-BR": "Fale sobre a sua marca"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Text",
"es": "Texto",
"pt-BR": "Texto"
},
"default": {
"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>",
"es": "<p>Usa este texto para compartir información sobre tu marca con tus clientes. Describe un producto, comparte anuncios o recibe clientes en tu tienda.</p>",
"pt-BR": "<p>Use este texto para compartilhar informações sobre sua marca com seus clientes. Descreva um produto, compartilhe anúncios ou receba os clientes em sua loja.</p>"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width",
"es": "Ancho del contenedor",
"pt-BR": "Largura do recipiente"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%",
"es": "25%",
"pt-BR": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%",
"es": "33%",
"pt-BR": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%",
"es": "50%",
"pt-BR": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%",
"es": "66%",
"pt-BR": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%",
"es": "75%",
"pt-BR": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%",
"es": "100%",
"pt-BR": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment",
"es": "Alineación vertical",
"pt-BR": "Alinhamento vertical"
},
"default": "center",
"options": [
{
"value": "top-middle",
"label": {
"en": "Top",
"es": "Superior",
"pt-BR": "Acima"
}
},
{
"value": "center",
"label": {
"en": "Middle",
"es": "Al medio",
"pt-BR": "Meio"
}
},
{
"value": "bottom-middle",
"label": {
"en": "Bottom",
"es": "Inferior",
"pt-BR": "Abaixo"
}
}
]
},
{
"type": "select",
"id": "align_text",
"label": {
"en": "Horizontal alignment",
"es": "Alineación horizontal",
"pt-BR": "Alinhamento horizontal"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"en": "Left",
"es": "Izquierda",
"pt-BR": "Esquerda"
}
},
{
"value": "center",
"label": {
"en": "Centered",
"es": "Centrada",
"pt-BR": "Centralizado"
}
},
{
"value": "right",
"label": {
"en": "Right",
"es": "Derecha",
"pt-BR": "Direita"
}
}
]
}
]
},
{
"type": "image",
"name": {
"en": "Image",
"es": "Imagen",
"pt-BR": "Imagem"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"en": "Image",
"es": "Imagen",
"pt-BR": "Imagem"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width",
"es": "Ancho del contenedor",
"pt-BR": "Largura do recipiente"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%",
"es": "25%",
"pt-BR": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%",
"es": "33%",
"pt-BR": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%",
"es": "50%",
"pt-BR": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%",
"es": "66%",
"pt-BR": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%",
"es": "75%",
"pt-BR": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%",
"es": "100%",
"pt-BR": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment",
"es": "Alineación vertical",
"pt-BR": "Alinhamento vertical"
},
"default": "center",
"options": [
{
"value": "top-left",
"label": {
"en": "Top left",
"es": "Superior izquierda",
"pt-BR": "Superior esquerdo"
}
},
{
"value": "top-middle",
"label": {
"en": "Top middle",
"es": "Superior al medio",
"pt-BR": "Centro da parte superior"
}
},
{
"value": "top-right",
"label": {
"en": "Top right",
"es": "Superior derecha",
"pt-BR": "Superior direito"
}
},
{
"value": "middle-left",
"label": {
"en": "Middle left",
"es": "Al medio a la izquierda",
"pt-BR": "Meio esquerdo"
}
},
{
"value": "center",
"label": {
"en": "Middle",
"es": "Al medio",
"pt-BR": "Meio"
}
},
{
"value": "middle-right",
"label": {
"en": "Middle right",
"es": "Al medio a la derecha",
"pt-BR": "Meio direito"
}
},
{
"value": "bottom-left",
"label": {
"en": "Bottom left",
"es": "Inferior izquierda",
"pt-BR": "Inferior esquerdo"
}
},
{
"value": "bottom-middle",
"label": {
"en": "Bottom middle",
"es": "Inferior al medio",
"pt-BR": "Centro da parte inferior"
}
},
{
"value": "bottom-right",
"label": {
"en": "Bottom right",
"es": "Inferior derecha",
"pt-BR": "Inferior direito"
}
}
]
}
]
},
{
"type": "video",
"name": {
"en": "Video",
"es": "Video",
"pt-BR": "Vídeo"
},
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": {
"en": "YouTube or Vimeo link",
"es": "Enlace de YouTube o Vimeo",
"pt-BR": "Link do YouTube ou do Vimeo"
},
"accept": [
"youtube",
"vimeo"
]
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width",
"es": "Ancho del contenedor",
"pt-BR": "Largura do recipiente"
},
"default": "100%",
"options": [
{
"value": "25%",
"label": {
"en": "25%",
"es": "25%",
"pt-BR": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%",
"es": "33%",
"pt-BR": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%",
"es": "50%",
"pt-BR": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%",
"es": "66%",
"pt-BR": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%",
"es": "75%",
"pt-BR": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%",
"es": "100%",
"pt-BR": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment",
"es": "Alineación vertical",
"pt-BR": "Alinhamento vertical"
},
"default": "top-middle",
"options": [
{
"value": "top-middle",
"label": {
"en": "Top",
"es": "Superior",
"pt-BR": "Acima"
}
},
{
"value": "center",
"label": {
"en": "Middle",
"es": "Al medio",
"pt-BR": "Meio"
}
},
{
"value": "bottom-middle",
"label": {
"en": "Bottom",
"es": "Inferior",
"pt-BR": "Abaixo"
}
}
]
}
]
},
{
"type": "product",
"name": {
"en": "Product",
"es": "Producto",
"pt-BR": "Produto"
},
"settings": [
{
"type": "product",
"id": "product",
"label": {
"en": "Product",
"es": "Producto",
"pt-BR": "Produto"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width",
"es": "Ancho del contenedor",
"pt-BR": "Largura do recipiente"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%",
"es": "25%",
"pt-BR": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%",
"es": "33%",
"pt-BR": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%",
"es": "50%",
"pt-BR": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%",
"es": "66%",
"pt-BR": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%",
"es": "75%",
"pt-BR": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%",
"es": "100%",
"pt-BR": "100%"
}
}
]
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Vertical alignment",
"es": "Alineación vertical",
"pt-BR": "Alinhamento vertical"
},
"default": "center",
"options": [
{
"value": "top-left",
"label": {
"en": "Top left",
"es": "Superior izquierda",
"pt-BR": "Superior esquerdo"
}
},
{
"value": "top-middle",
"label": {
"en": "Top middle",
"es": "Superior al medio",
"pt-BR": "Centro da parte superior"
}
},
{
"value": "top-right",
"label": {
"en": "Top right",
"es": "Superior derecha",
"pt-BR": "Superior direito"
}
},
{
"value": "middle-left",
"label": {
"en": "Middle left",
"es": "Al medio a la izquierda",
"pt-BR": "Meio esquerdo"
}
},
{
"value": "center",
"label": {
"en": "Middle",
"es": "Al medio",
"pt-BR": "Meio"
}
},
{
"value": "middle-right",
"label": {
"en": "Middle right",
"es": "Al medio a la derecha",
"pt-BR": "Meio direito"
}
},
{
"value": "bottom-left",
"label": {
"en": "Bottom left",
"es": "Inferior izquierda",
"pt-BR": "Inferior esquerdo"
}
},
{
"value": "bottom-middle",
"label": {
"en": "Bottom middle",
"es": "Inferior al medio",
"pt-BR": "Centro da parte inferior"
}
},
{
"value": "bottom-right",
"label": {
"en": "Bottom right",
"es": "Inferior derecha",
"pt-BR": "Inferior direito"
}
}
]
}
]
},
{
"type": "collection",
"name": {
"en": "Collection",
"es": "Colección",
"pt-BR": "Coleção"
},
"settings": [
{
"type": "collection",
"id": "collection",
"label": {
"en": "Collection",
"es": "Colección",
"pt-BR": "Coleção"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width",
"es": "Ancho del contenedor",
"pt-BR": "Largura do recipiente"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%",
"es": "25%",
"pt-BR": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%",
"es": "33%",
"pt-BR": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%",
"es": "50%",
"pt-BR": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%",
"es": "66%",
"pt-BR": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%",
"es": "75%",
"pt-BR": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%",
"es": "100%",
"pt-BR": "100%"
}
}
]
}
]
},
{
"type": "html",
"name": {
"en": "Custom HTML",
"es": "HTML personalizado",
"pt-BR": "HTML personalizado"
},
"settings": [
{
"type": "html",
"id": "code",
"label": {
"en": "HTML",
"es": "HTML",
"pt-BR": "HTML"
}
},
{
"type": "select",
"id": "width",
"label": {
"en": "Container width",
"es": "Ancho del contenedor",
"pt-BR": "Largura do recipiente"
},
"default": "50%",
"options": [
{
"value": "25%",
"label": {
"en": "25%",
"es": "25%",
"pt-BR": "25%"
}
},
{
"value": "33%",
"label": {
"en": "33%",
"es": "33%",
"pt-BR": "33%"
}
},
{
"value": "50%",
"label": {
"en": "50%",
"es": "50%",
"pt-BR": "50%"
}
},
{
"value": "66%",
"label": {
"en": "66%",
"es": "66%",
"pt-BR": "66%"
}
},
{
"value": "75%",
"label": {
"en": "75%",
"es": "75%",
"pt-BR": "75%"
}
},
{
"value": "100%",
"label": {
"en": "100%",
"es": "100%",
"pt-BR": "100%"
}
}
]
}
]
}

],
"presets": [
{
"name": {
"en": "Custom Page Template",
"es": "Contenido personalizado",
"pt-BR": "Conteúdo personalizado"
},
"category": {
"en": "Advanced layout",
"es": "Diseño avanzado",
"pt-BR": "Layout avançado"
},
"blocks": [
{
"type": "text"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}

5. Finally, select the page template you created and check the theme customize section panel