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 'mycustom-section' %}
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
{% 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 %}
{% when 'image' %}
{% if block.settings.image != blank %}
{%- assign img_url = block.settings.image | img_url: '1024x' -%}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
{{ block.settings.title | escape }}
{% endif %}
{% if block.settings.text != blank %}
{% endif %}
{% when 'video' %}
{% else %}
{% if block.settings.video_url.type == "youtube" %}
{% endif %}
{% if block.settings.video_url.type == "vimeo" %}
{% endif %}
{% endif %}
{% 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 %}
{% 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 %}
{% endfor %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% 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": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
",
"es": "
Usa este texto para compartir información sobre tu marca con tus clientes. Describe un producto, comparte anuncios o recibe clientes en tu tienda.
",
"pt-BR": "
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.
"
}
},
{
"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