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

Shopify template

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

shopify section

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

<!-- change the block width according to your theme-->
<!-- include product/collection/image file name according to your theme-->

<div class="page-width container">

  <div class="custom-content row product-grid" style="padding:50px 20xp;">
   <!-- change the block width according to your theme-->
    {% 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

0 Comments

Leave a Comment