API tools faq
paste
Advertisement
stevenchu

Shopify Custom Sections DEMO - *custom_section*.liquid

stevenchu
Oct 13th, 2017
3,732
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.01 KB | None | 0 0
raw download clone embed print report
  1. {% comment %}
  2. HOW TO ACTIVATE CUSTOM DRAG AND DROP MODULES IN SHOPIFY on any page you want
  3. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  4. 1. IN SHOPIFY CODE EDITOR, CREATE A NEW **SECTION** and give it a name (i call mine 'business-home') hence why in my theme.liquid i include {% section 'business-home' %}, makes sense?
  5.  
  6. *The section file you create must be named the same as what you are calling in the {% __tag__ %}.
  7.  
  8. 2. Then, I set this IF condition: if we are currently viewing page handle (the URL), then show this page content.
  9. Otherwise it doesn't render the HTML, but the customize settings can still be set.
  10.  
  11. 3. To set your presets in Shopify THEME > CUSTOMIZE THEME.. you must navigate first to your page in the theme editor.. click your way there, and you will see your left panel now shows the section settings you set up.
  12.  
  13. VIDEO DEMO OF WHAT I'M TALKING ABOUT HERE:
  14. https://www.youtube.com/watch?v=GbRn_T5wAFc
  15. {% endcomment %}
  16.  
  17. {% if page.handle  == 'business-home' %}
  18. <div class="page-width">
  19.   <div class="section-block section-block--padding">
  20.     <div class="flex flex--grid flex--no-gutter">
  21.       {% for block in section.blocks %}
  22.           {% case block.type %}
  23.             {% when 'image_block' %}
  24.             <div class="flex__item flex flex--center-vertical" {{ block.shopify_attributes }}>
  25.             {% if block.settings.align-img == 'left' %}
  26.               <div class="flex__item small--one-whole medium-up--one-half">
  27.                 {% if block.settings.image != blank %}
  28.                   {% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
  29.                     <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt }}" class="image-content__image">
  30.                   {% if block.settings.link != blank %}</a>{% endif %}
  31.                 {% else %}
  32.                   <div class="image-content__image">
  33.                     {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
  34.                   </div>
  35.                 {% endif %}
  36.               </div>
  37.               <div class="flex__item small--one-whole medium-up--one-third image-content__text text-{{ block.settings.align }}">
  38.                 <p class="h2">{{ block.settings.title }}</p>
  39.                 <div class="rte-setting">{{ block.settings.text }}</div>
  40.                 {% if block.settings.link != blank %}<a href="{{ block.settings.link }}" class="h6">{{ block.settings.cta_label }} →</a>{% endif %}
  41.               </div>
  42.             {% elsif block.settings.align-img == 'center' %}
  43.               <div class="flex__item small--one-whole image-content__text text-{{ block.settings.align }}">
  44.                 <p class="h2">{{ block.settings.title }}</p>
  45.                 <div class="rte-setting">{{ block.settings.text }}</div>
  46.               </div>
  47.               <div class="flex__item small--one-whole">
  48.                 {% if block.settings.image != blank %}
  49.                   <img src="{{ block.settings.image | img_url: '600x' }}" alt="{{ block.settings.image.alt }}" class="image-content__image">
  50.                 {% else %}
  51.                   <div class="image-content__image">
  52.                     {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
  53.                   </div>
  54.                 {% endif %}
  55.               </div>
  56.             {% elsif block.settings.align-img == 'right' %}
  57.               <div class="flex__item small--one-whole medium-up--one-third image-content__text text-{{ block.settings.align }}">
  58.                 <p class="h2">{{ block.settings.title }}</p>
  59.                 <div class="rte-setting">{{ block.settings.text }}</div>
  60.                 {% if block.settings.link != blank %}<a href="{{ block.settings.link }}" class="h6">{{ block.settings.cta_label }} →</a>{% endif %}
  61.               </div>
  62.               <div class="flex__item small--one-whole medium-up--one-half">
  63.                 {% if block.settings.image != blank %}
  64.                   {% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
  65.                     <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt }}" class="image-content__image">
  66.                   {% if block.settings.link != blank %}</a>{% endif %}
  67.                 {% else %}
  68.                   <div class="image-content__image">
  69.                     {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
  70.                   </div>
  71.                 {% endif %}
  72.               </div>
  73.             {% endif %}
  74.           </div>
  75.           {% when 'text_block' %}
  76.           <div class="flex__item flex flex--center-vertical small--one-whole medium-up--one-whole" {{ block.shopify_attributes }}>
  77.               <div class="flex__item text-content__text text-{{ block.settings.align }}">
  78.                 <p class="hero__title hero__title--has-link rainbow">{{ block.settings.title }}</p>
  79.                 <hr>
  80.                 <div class="rte-setting">{{ block.settings.text }}</div>
  81.               </div>
  82.           </div>
  83.           {% endcase %}
  84.  
  85.       {% endfor %}
  86.     </div>
  87.  
  88.     {% if section.blocks.size == 0 %}
  89.       {% include 'no-blocks' %}
  90.     {% endif %}
  91.   </div>
  92. </div>
  93.  
  94.  
  95. {% endif %}
  96.  
  97. {% schema %}
  98.   {
  99.     "name": "Business Home",
  100.     "max_blocks": 10,
  101.     "blocks": [
  102.       {
  103.         "type": "image_block",
  104.         "name": "Image Block",
  105.         "settings": [
  106.           {
  107.             "type": "image_picker",
  108.             "id": "image",
  109.             "label": "Image"
  110.           },
  111.           {
  112.             "type": "radio",
  113.             "id": "align-img",
  114.             "label": "Image alignment",
  115.             "options": [
  116.               { "value": "left", "label": "Left" },
  117.               { "value": "right", "label": "Right" }
  118.             ],
  119.             "default": "left"
  120.           },
  121.           {
  122.             "type": "text",
  123.             "id": "title",
  124.             "label": "Heading",
  125.             "default": "Image with text"
  126.           },
  127.           {
  128.             "type": "richtext",
  129.             "id": "text",
  130.             "label": "Text",
  131.             "default": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
  132.           },
  133.           {
  134.             "type": "url",
  135.             "id": "link",
  136.             "label": "Link"
  137.           },
  138.           {
  139.             "type": "text",
  140.             "id": "cta_label",
  141.             "label": "Link label",
  142.             "default": "Link label"
  143.           },
  144.           {
  145.             "type": "radio",
  146.             "id": "align",
  147.             "label": "Text alignment",
  148.             "options": [
  149.               { "value": "left", "label": "Left" },
  150.               { "value": "center", "label": "Center" },
  151.               { "value": "right", "label": "Right" }
  152.             ],
  153.             "default": "left"
  154.           }
  155.         ]
  156.       },
  157.       {
  158.         "type": "text_block",
  159.         "name": "Text Block",
  160.         "settings": [
  161.           {
  162.             "type": "text",
  163.             "id": "title",
  164.             "label": "Heading",
  165.             "default": "Image with text"
  166.           },
  167.           {
  168.             "type": "richtext",
  169.             "id": "text",
  170.             "label": "Text",
  171.             "default": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
  172.           },
  173.           {
  174.             "type": "radio",
  175.             "id": "align",
  176.             "label": "Text alignment",
  177.             "options": [
  178.               { "value": "left", "label": "Left" },
  179.               { "value": "center", "label": "Center" },
  180.               { "value": "right", "label": "Right" }
  181.             ],
  182.             "default": "left"
  183.           }
  184.         ]
  185.       }
  186.     ],
  187.     "presets": [
  188.       {
  189.         "name": "Image with text",
  190.         "category": "Image",
  191.         "blocks": [
  192.           {
  193.             "type": "image_block"
  194.           }
  195.         ]
  196.       }
  197.     ]
  198.   }
  199. {% endschema %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!