Shopify Documentation

Schema Structure for any Section Dynamic:

Example:

{% schema %} { "name": "Product Section", "class": "banner", "settings": [ { "type": "text", "id": "title", "label": "Headline" }, { "type": "image_picker", "id": "prdimg", "label": "ImagePic" }, { "type": "html", "id": "desc", "label": "Description" }, { "type": "text", "id": "btn_txt", "label": "Button Text" }, { "type": "url", "id": "link", "label": "Link" } ], "blocks": [ { "type": "text", "name": "Column", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "text", "id": "button_link_text", "label": "Button Text" }, { "type": "url", "id": "button_link", "label": "Button link" } ] } ], "presets": [ { "name": "Product Section", "category": "Image" } ] } {% endschema %} <div> {%- if section.settings.title != blank -%} <h1>{{ section.settings.title }}</h1> {%- endif -%} {%- if section.settings.prdimg != blank -%} <img src="{{ section.settings.prdimg | img_url: '' }}" > {%- endif -%} {%- if section.settings.desc != blank -%} <p> {{ section.settings.desc }}</p> {%- endif -%} {%- if section.settings.btn_txt != blank -%} <a href="{{ section.settings.link }}">{{ section.settings.btn_txt }}</a> {%- endif -%} </div> <ul> {% for block in section.blocks %} {%- if block.settings.image != blank -%} <li><img src="{{ block.settings.image | img_url: '' }}"> <a class="button" href="{{ block.settings.button_link }}">{{ block.settings.button_link_text }}</a> </li> {%- endif -%} {% endfor %} </ul>

If Client Wants to Delete any Columns Dynamically

=============================================================

Example

<section id="hero" class="hero"> {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'image' -%} {%- if block.settings.banner_image != blank -%} <div class="hero-image"> <img srcset="{{ block.settings.banner_image | image_url: width: block.settings.image_width }}, {{ block.settings.banner_image | image_url: width: image_size_2x }} 2x" src="{{ block.settings.banner_image | image_url: width: 760 }}" alt="{{ block.settings.banner_image.alt | escape }}" loading="lazy" width="{{ block.settings.banner_image.width }}" height="{{ block.settings.banner_image.height }}" > </div> {%- endif -%} {%- when 'text' -%} <div class="container py-4 text-center"> {%- if block.settings.banner_subheading != blank -%} <h5 class="wrapper-subtitle"> {{ block.settings.banner_subheading }} </h5> {%- endif -%} {%- if block.settings.banner_heading != blank -%} <h1 class="wrapper-details"> {{ block.settings.banner_heading }} </h1> {%- endif -%} </div> {%- when 'link_list' -%} <div class="container py-4 text-center"> {%- if block.settings.btn_text != blank -%} <a href="{{ block.settings.btn_link }}" class="shop-btn">{{ block.settings.btn_text }}</a> {%- endif -%} </div> {%- endcase -%} {%- endfor -%} </section> {% schema %} { "name": "Banner Section", "blocks": [ { "type": "image", "name": "Banner Image", "settings": [ { "type": "image_picker", "id": "banner_image", "label": "Banner Image" }, { "type": "range", "id": "image_width", "min": 50, "max": 550, "step": 5, "unit": "px", "label": "Image width", "default": 100 } ] }, { "type": "text", "name": "Banner Text", "settings": [ { "type": "text", "id": "banner_heading", "label": "Banner Heading" }, { "type": "text", "id": "banner_subheading", "label": "Banner Sub Heading" } ] }, { "type": "link_list", "name": "Link", "settings": [ { "type": "text", "id": "btn_text", "label": "Button Text" }, { "type": "url", "id": "btn_link", "label": "Button Link" } ] } ], "settings": [ ], "presets": [ { "name": "Banner Section", "category": "Image" } ] } {% endschema %}

All Types of Shopify

===================================

https://shopify.dev/docs/themes/architecture/settings/input-settings

Nav Dynamic Header With Subnav and Footer Nav:

Header Schema:

{% schema %} { "name": "Header", "class": "shopify-section--header", "settings": [ { "type": "image_picker", "id": "logo", "label": "Logo image" }, { "type": "link_list", "id": "navigation_menu", "label": "Menu", "default": "main-menu" } ], "blocks": [ { "type": "text", "name": "Row", "settings": [ { "type": "text", "id": "title", "label": "Heading" } ] } ] } {% endschema %}

Example:

<!-- menu starts here --> <nav class="navbar navbar-expand-lg menu-area custom_navbar"> <div class="container-fluid"> <a class="navbar-brand" href="/"> <img src="{{ section.settings.logo | img_url: '' }}" alt=""></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> {%- assign main_menu_handle = section.settings.navigation_menu | default: 'main-menu' -%} {%- assign main_menu = linklists[main_menu_handle] -%} {%- for link in main_menu.links -%} <li class="nav-item dropdown-submenu{% if link.active %} active{% endif %}"> <a class="nav-link dropdown-item" tabindex="-1" href="{{ link.url }}">{{ link.title }}</a> {% comment %} {% if link.links != blank %} <ul class="dropdown-menu"> {% for child_link in link.links %} <li><a tabindex="-1" href= "{{ child_link.url }}">{{ child_link.title }}</a> {% if child_link.links != blank %} <ul class="grandchild"> {% for grandchild_link in child_link.links %} <li><a href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li> {% endfor %} </ul> {% endif %} </li> {% endfor %} </ul> {% endif %} {% endcomment %} </li> {% endfor %} </ul> </div> </div> </nav> <!-- menu end here -->

---

Footer Nav Schema:

{% schema %} { "name": "Footer", "class": "shopify-section--footer", "settings": [ { "type": "link_list", "id": "navigation_menu_footer_one", "label": "Menu" }, { "type": "link_list", "id": "navigation_menu_footer_two", "label": "Menu Second Column" }, { "type": "text", "id": "title", "label": "Heading" } ], "blocks": [ { "type": "text", "name": "footer Brand", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" } ] } ] } {% endschema %}

Example:

<ul class="footernav"> {%- assign main_menu_handle_footer_one = section.settings.navigation_menu_footer_one -%} {%- assign main_menu_footer_one = linklists[main_menu_handle_footer_one] -%} {%- for link in main_menu_footer_one.links -%} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> <ul class="footernav"> {%- assign main_menu_handle_footer_two = section.settings.navigation_menu_footer_two -%} {%- assign main_menu_footer_two = linklists[main_menu_handle_footer_two] -%} {%- for link in main_menu_footer_two.links -%} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul>

Reference Link for schema tags:

https://help.shopify.com/en/themes/development/sections#using-section-schema-tags https://help.shopify.com/en/themes/development/theme-editor/settings-schema

Category Type for Presets:

Blog Image Custom Content Collection Social Product Store Information

Defined preset name and category type will reflect like below:

"presets": [ { "name": "Custom Banner", "category": "Image" // type of your section } ]

Css/JS/Image path Attribute:

{{ 'style.scss.css' | asset_url | stylesheet_tag }} {{ 'custom.js' | asset_url | script_tag }}

Asset Image Path

{{ 'logo.png' | asset_img_url: '' }}

Dynamic Image path

{{ section.settings.product_image | img_url: '' }} {{ section.settings.product_image | img_url: '' }} {{ section.settings.product_image | img_url: '' }}

Dynamic Image Blog image path

{{ block.settings.image | img_url: '' }}

Dynamic Section path

{{ section.settings.hide_variants }}

Block Loop

Example:

<ul> {% for block in section.blocks %} <li><img src="{{ block.settings.image | img_url: '' }}"> <a class="button" href="{{ block.settings.button_link }}">Shop Now</a> </li> {% endfor %} </ul>

Block Loop in 2 section (left and right) with Schema

{% schema %} { "name": "Allurica Care", "class": "index-section carearea", "settings": [ { "type": "text", "id": "content", "label": "Desription" }, { "type": "text", "id": "author", "label": "Author" } ], "blocks": [ { "type": "image", "name": "Allurica Care Bottle", "settings": [ { "type": "text", "id": "title", "label": "Heading" }, { "type": "html", "id": "description_ser", "label": "Description" }, { "type": "select", "id": "select_panel", "options": [ { "value": "Left", "label": "Left"}, { "value": "Right", "label": "Right"} ], "label": "Select Panel" } ] } ], "presets": [{ "name": "Allurica Care", "category": "Promotional" }] } {% endschema %}

Example:

<div class="the-perfect-bottle-created-content"> <!-- left --> <div class="the-perfect-bottle-created-content-left hidden_mobile"> <ul> {% for block in section.blocks %} {% if block.settings.select_panel == "Left" %} <li> <div class="perfect-bottle-effect"> <h4>{{ block.settings.title }}</h4> <p>{{ block.settings.description_ser }}</p> </div> <div class="plus-icon"> <img src='{{ 'ccv.png' | asset_img_url: '' }}' alt=""> </div> </li> {% endif %} {% endfor %} </ul> </div> <!-- right --> <div class="the-perfect-bottle-created-content-right hidden_mobile"> <ul> {% for block in section.blocks %} {% if block.settings.select_panel == "Right" %} <li> <div class="perfect-bottle-effect"> <h4>{{ block.settings.title }}</h4> <p>{{ block.settings.description_ser }}</p> </div> <div class="plus-icon"> <img src='{{ 'ccv.png' | asset_img_url: '' }}' alt=""> </div> </li> {% endif %} {% endfor %} </ul> </div> <div style="clear: both;"></div> <!-- end --> </div>

URL Filter Link:

https://help.shopify.com/en/themes/liquid/filters/url-filters

Conditional Tags

{% if collection_sidebar %} //your content {% endif %}

Conditional Tags

{% if pages == 'about-us' %} <link rel="stylesheet" href="{{ 'about-new.css' | asset_url }}"> {% endif %}

Conditional Tags

{%- if template.name == 'index' -%} <style> .shopify-section--header {top: 40px;} </style> {%- endif -%}

Conditional Tags

{%- if template.name == 'collection' or template.name == 'product' -%} {%- assign collection__header_color = 'collection__header_color' -%} {%- endif -%}

Shopify Condition meta tag or other conditions

{%- if template.name == 'blog' -%} <meta name="description" content="Blogs"> {% endif %} {%- if canonical_url == 'https://www.demo.com/apps/shop' -%} <meta name="description" content="All Products"> {% endif %}

Add any condition like add any css or add any div tag add for specific product page or collection page:

----------------------------------------------------- if link is: // for Product ============== https://coderssupport.com/shopify-documentation/kit-cbo-1 // for collection ================== https://coderssupport.com/shopify-documentation/protein-bucket https://coderssupport.com/shopify-documentation/combo-buckets -------------------------------------------------------------- -------------------------------------------------------------- {% if product.url contains 'kit-cbo-1' %} <div class="find_out_btn"><a href="/">Find out more about Lorem Ipsum</a></div> {% endif %} {% if collection.url contains 'protein-bucket' or collection.url contains "combo-buckets" or collection.url contains "breakfast-bucket" or collection.url contains "fruits-vegetables" %} <div class="find_out_btn"><a href="/">Find out more about Lorem Ipsum</a></div> {% endif %}

How to add comment in Shopify?

{% comment %} //your content {% endcomment %}