ADD NEW SECTION FILE NAME AND LINK NAME SAME 8️⃣

 

-------------------------------------------------------------------------------------------------------------------

ADD CUSTOM CONTENT SECTION CODE

0) SECTION FOLDER> CREATE AddSection

1) CREATE  SECTION LINK IN THEME LIQUID

  {% section 'AddSection'%}

-------------------------------------------------------------------------------------------------------------------

<div class="page-width">

{% if section.settings.title != blank %}

<div class="section-header text-center">

<h4 class="h2">{{ section.settings.title | escape }}</h4>

</div>

{% endif %}

<div class="custom-content">

{% for block in section.blocks %}

{% case block.settings.width %}

{% when '15%' %}

<style>

.custom__item--{{block.id}} .custom__image {

max-height: 150px;

}

</style>

{% when '25%' %}

<style>

.custom__item--{{block.id}} .custom__image {

max-height: 250px;

}

</style>

{%- assign block_width = 'small--one-half medium-up--one-quarter' -%}

{%- assign image_size = '250x250' -%}

{% when '33%' %}

<style>

.custom__item--{{block.id}} .custom__image {

max-height: 345px;

}

</style>

{%- assign block_width = 'small--one-half medium-up--one-third' -%}

{%- assign image_size = '345x345' -%}

{% when '50%' %}

<style>

.custom__item--{{block.id}} .custom__image {

max-height: 530px;

}

</style>

{%- assign block_width = 'small--one-half medium-up--one-half' -%}

{%- assign image_size = '530x530' -%}

{% when '66%' %}

<style>

.custom__item--{{block.id}} .custom__image {

max-height: 720px;

}

</style>

{%- assign block_width = 'medium-up--two-thirds' -%}

{%- assign image_size = '720x720' -%}

{% when '75%' %}

<style>

.custom__item--{{block.id}} .custom__image {

max-height: 810px;

}

</style>

{%- assign block_width = 'medium-up--three-quarters' -%}

{%- assign image_size = '810x810' -%}

{% when '100%' %}

<style>

.custom__item--{{block.id}} .custom__image {

max-height: 1090px;

}

</style>

{%- assign block_width = 'one-whole' -%}

{%- assign image_size = '1090x1090' -%}

{% endcase %}

<div class="custom__item custom__item--{{block.id}} {{ block_width }} {% if block.settings.alignment %}align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>

<div class="custom__item-inner custom__item-inner--{{ block.type }}">

{% case block.type %}

{% when 'image' %}

{% if block.settings.image != blank %}

{%- assign image_alt = block.settings.image.alt -%}

{{ block.settings.image | img_url: image_size, scale: 2, crop: 'top' | img_tag: image_alt, 'custom__image' }}

{% 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">{{ block.settings.title | escape }}</h4>

{% endif %}

{% if block.settings.text != blank %}

<div class="rte-setting">{{ block.settings.text }}</div>

{% endif %}

</div>

{% when 'video' %}

<div class="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-card-grid', grid_image_width: image_size %}

{% 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-grid-item', collection_image_size: image_size %}

{% when 'html' %}

{% if block.settings.code != blank %}

{{ block.settings.code }}

{% endif %}

{% endcase %}

</div>

</div>

{% endfor %}

</div>

</div>

{% schema %}

{

"name": "My Custom Page",

"settings": [

{

"type": "text",

"id": "title",

"label": "Heading",

"default": "Custom content"

}

],

"blocks": [

{

"type": "text",

"name": "Text",

"settings": [

{

"type": "text",

"id": "title",

"label": "Heading",

"default": "Talk about your brand"

},

{

"type": "richtext",

"id": "text",

"label": "Text",

"default": "<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>"

},

{

"type": "select",

"id": "width",

"label": "Container width",

"default": "50%",

"options": [

{

"value": "25%",

"label": "25%"

},

{

"value": "33%",

"label": "33%"

},

{

"value": "50%",

"label": "50%"

},

{

"value": "66%",

"label": "66%"

},

{

"value": "75%",

"label": "75%"

},

{

"value": "100%",

"label": "100%"

}

]

},

{

"type": "select",

"id": "alignment",

"label": "Vertical alignment",

"default": "center",

"options": [

{"value": "top-middle", "label": "Top"},

{"value": "center", "label": "Middle"},

{"value": "bottom-middle", "label": "Bottom"}

]

},

{

"type": "select",

"id": "align_text",

"label": "Horizontal alignment",

"default": "left",

"options": [

{"value": "left", "label": "Left"},

{"value": "center", "label": "Centered"},

{"value": "right", "label": "Right"}

]

}

]

},

{

"type": "image",

"name": "Image",

"settings": [

{

"type": "image_picker",

"id": "image",

"label": "Image"

},

{

"type": "select",

"id": "width",

"label": "Container width",

"default": "50%",

"options": [

{

"value": "15%",

"label": "15%"

},

{

"value": "25%",

"label": "25%"

},

{

"value": "33%",

"label": "33%"

},

{

"value": "50%",

"label": "50%"

},

{

"value": "66%",

"label": "66%"

},

{

"value": "75%",

"label": "75%"

},

{

"value": "100%",

"label": "100%"

}

]

},

{

"type": "select",

"id": "alignment",

"label": "Vertical alignment",

"default": "center",

"options": [

{

"value": "top-left",

"label": "Top left"

},

{

"value": "top-middle",

"label": "Top middle"

},

{

"value": "top-right",

"label": "Top right"

},

{

"value": "middle-left",

"label": "Middle left"

},

{

"value": "center",

"label": "Middle"

},

{

"value": "middle-right",

"label": "Middle right"

},

{

"value": "bottom-left",

"label": "Bottom left"

},

{

"value": "bottom-middle",

"label": "Bottom middle"

},

{

"value": "bottom-right",

"label": "Bottom right"

}

]

}

]

},

{

"type": "video",

"name": "Video",

"settings": [

{

"type": "video_url",

"id": "video_url",

"label": "YouTube or Vimeo link",

"accept": ["youtube", "vimeo"]

},

{

"type": "select",

"id": "width",

"label": "Container width",

"default": "100%",

"options": [

{

"value": "15%",

"label": "15%"

},

{

"value": "25%",

"label": "25%"

},

{

"value": "33%",

"label": "33%"

},

{

"value": "50%",

"label": "50%"

},

{

"value": "66%",

"label": "66%"

},

{

"value": "75%",

"label": "75%"

},

{

"value": "100%",

"label": "100%"

}

]

},

{

"type": "select",

"id": "alignment",

"label": "Vertical alignment",

"default": "top-middle",

"options": [

{

"value": "top-middle",

"label": "Top"

},

{

"value": "center",

"label": "Middle"

},

{

"value": "bottom-middle",

"label": "Bottom"

}

]

}

]

},

{

"type": "product",

"name": "Product",

"settings": [

{

"type": "product",

"id": "product",

"label": "Product"

},

{

"type": "select",

"id": "width",

"label": "Container width",

"default": "50%",

"options": [

{

"value": "15%",

"label": "15%"

},

{

"value": "25%",

"label": "25%"

},

{

"value": "33%",

"label": "33%"

},

{

"value": "50%",

"label": "50%"

},

{

"value": "66%",

"label": "66%"

},

{

"value": "75%",

"label": "75%"

},

{

"value": "100%",

"label": "100%"

}

]

},

{

"type": "select",

"id": "alignment",

"label": "Vertical alignment",

"default": "center",

"options": [

{

"value": "top-left",

"label": "Top left"

},

{

"value": "top-middle",

"label": "Top middle"

},

{

"value": "top-right",

"label": "Top right"

},

{

"value": "middle-left",

"label": "Middle left"

},

{

"value": "center",

"label": "Middle"

},

{

"value": "middle-right",

"label": "Middle right"

},

{

"value": "bottom-left",

"label": "Bottom left"

},

{

"value": "bottom-middle",

"label": "Bottom middle"

},

{

"value": "bottom-right",

"label": "Bottom right"

}

]

}

]

},

{

"type": "collection",

"name": "Collection",

"settings": [

{

"type": "collection",

"id": "collection",

"label": "Collection"

},

{

"type": "select",

"id": "width",

"label": "Container width",

"default": "50%",

"options": [

{

"value": "15%",

"label": "15%"

},

{

"value": "25%",

"label": "25%"

},

{

"value": "33%",

"label": "33%"

},

{

"value": "50%",

"label": "50%"

},

{

"value": "66%",

"label": "66%"

},

{

"value": "75%",

"label": "75%"

},

{

"value": "100%",

"label": "100%"

}

]

}

]

},

{

"type": "html",

"name": "Custom HTML",

"settings": [

{

"type": "html",

"id": "code",

"label": "HTML"

},

{

"type": "select",

"id": "width",

"label": "Container width",

"default": "50%",

"options": [

{

"value": "15%",

"label": "15%"

},

{

"value": "25%",

"label": "25%"

},

{

"value": "33%",

"label": "33%"

},

{

"value": "50%",

"label": "50%"

},

{

"value": "66%",

"label": "66%"

},

{

"value": "75%",

"label": "75%"

},

{

"value": "100%",

"label": "100%"

}

]

}

]

}

]

}

{% endschema %} 

---------------------------------------------------------------------------------------------------------------

announcement-bar.liquid  code

---------------------------------------------------------------------------------------------------------------

{% if section.settings.message %} {% if section.settings.home_page_only == false or template.name == 'index' %} <style> .announcement-bar { background-color: {{ section.settings.color_bg }}; text-align:center; {% if section.settings.header_padding > 0 %} position:absolute; top: -{{ section.settings.header_padding }}px !important; left:0; width:100%; z-index:9; {% endif %} } .announcement-bar p { padding:10px 0; font-size: {{ section.settings.font_size }}px; margin:0 !important; } .announcement-bar__message, .announcement-bar--link { color: {{ section.settings.color_text }}; } .announcement-bar--link:hover, .announcement-bar--link:hover .announcement-bar__message { color: {{ section.settings.color_text_hover }} !important; } body { position:relative; top: {{ section.settings.header_padding }}px !important; } </style> {% if section.settings.message_link == blank %} <div class="announcement-bar"> {% else %} <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link"> {% endif %} {% capture shipping_value %}{{ section.settings.free_shipping_threshold | times: 100 }}{% endcapture %} {% assign cart_total = cart.total_price %} {% assign shipping_value_left = shipping_value | minus: cart_total %} {% assign shipping_value_left_money = shipping_value_left | money %} {% capture free_shipping_notqualified %} {{ section.settings.free_shipping_notqualified | replace: '[price]', shipping_value_left_money }} {% endcapture %} {% assign free_shipping_qualified = section.settings.free_shipping_qualified %} {% assign announcement_message = section.settings.message_text %} {% if section.settings.free_shipping_countdown %} {% if cart.total_price > 0 %} {% assign announcement_message = free_shipping_notqualified %} {% endif %} {% if shipping_value_left <= 0 %} {% assign announcement_message = free_shipping_qualified %} {% endif %} {% endif %} <p class="announcement-bar__message">{{ announcement_message }}</p> {% if section.settings.message_link == blank %} </div> {% else %} </a> {% endif %} {% endif %} {% endif %} <style> </style>

{% schema %} { "name": "Announcement bar", "settings": [ { "type": "header", "content": "General" }, { "type": "checkbox", "id": "message", "label": "Show announcement", "default": false }, { "type": "checkbox", "id": "home_page_only", "label": "Home page only", "default": false }, { "type": "range", "id": "header_padding", "min": 0, "max": 100, "step": 1, "unit": "px", "label": "Header padding", "default": 0, "info": "Pushes page content down below announcement bar (only needed on some themes)" }, { "type": "header", "content": "Content" }, { "type": "text", "id": "message_text", "label": "Text", "default": "Announce something here" }, { "type": "checkbox", "id": "free_shipping_countdown", "label": "Show free shipping countdown", "info": "Tells the customer how much they need to add to their cart to receive free shipping (only appears when at least one item is in the cart).", "default": false }, { "type": "range", "id": "free_shipping_threshold", "min": 5, "max": 100, "step": 1, "unit": "$", "label": "Free shipping threshold", "default": 25, "info": "The amount at which customers receive free shipping (must match your shipping settings)." }, { "type": "textarea", "id": "free_shipping_notqualified", "label": "Free shipping (not qualified) message", "default": "Add just [price] to your cart to receive free shipping!" }, { "type": "textarea", "id": "free_shipping_qualified", "label": "Free shipping (qualified) message", "default": "Your order qualifies for free shipping!" }, { "type": "url", "id": "message_link", "label": "Link", "info": "Optional" }, { "type": "header", "content": "Fonts and colors" }, { "type": "color", "id": "color_bg", "label": "Background color", "default": "#333333" }, { "type": "color", "id": "color_text", "label": "Text color", "default": "#ffffff" }, { "type": "color", "id": "color_text_hover", "label": "Link hover color", "default": "#eeeeee" }, { "type": "range", "id": "font_size", "min": 8, "max": 36, "step": 1, "unit": "px", "label": "Font size", "default": 14 } ] } {% endschema %}