How To Add Lookbook section in Shopify without app [Dawn V14]

Step1: Create a new section named lookbook-section.liquid and paste the following code

{% comment %} Images: responsive image widths {% endcomment %}
{%- assign widths = '180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1950, 2100, 2260, 2450, 2700, 3000, 3350, 3750, 4100' -%}

{%- comment -%} Text: custom font_picker values {%- endcomment -%}
{%- capture font_settings_list -%}
{{ section.settings.main_font | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{%- endcapture -%}
{%- assign font_array = font_settings_list | split: '~' -%}

{%- capture minify -%}
{%- comment -%} CSS {%- endcomment -%}
<style>
.wbs-pck__image img {
width: -webkit-fill-available;
}
@media screen and (max-width: 768px){
 .wbs-pck__image img {
    display: block !important;
    height: 45vh !important;
}

 .wbs-pck__product-pin--active .wbs-pck__product-info-tab {
    visibility: visible;
    opacity: 1;
    transform: translateY(-47%) scale(0.6) !important;
    pointer-events: all;
}

  .wbs-pck__product-info-tab--left {
        left: 0px !important;
    }

  .wbs-pck__product-info-tab--right {
        right: 0px !important;
    }
}
  
{%- if section.settings.override_theme_font != blank -%}
  {%- for font in font_array -%}
    {%- unless font contains 'error' -%}{{ font }}{%- endunless -%}
  {%- endfor -%}
  #WP--{{ section.id }} {
    --main-font: {{ section.settings.main_font.family }}, {{ section.settings.main_font.fallback_families }};
    --main-font-weight: {{ section.settings.main_font.weight }};
    --main-font-style: {{ section.settings.main_font.style }};
    --heading-font: {{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }};
    --heading-font-weight: {{ section.settings.heading_font.weight }};
    --heading-font-style: {{ section.settings.heading_font.style }};
  }
{%- endif -%}

/*** Width ***/

#shopify-section-{{ section.id }}.WP__widths {
  {%- if section.settings.section_width == 'half' -%}
    width: 50%;
  {%- else -%}
    width: 100%
  {%- endif -%}
}

#WP--{{ section.id }} {
  --pin-size: 18px;
  margin-bottom: {{ section.settings.outer_margin }}px;
  margin-top: {{ section.settings.outer_margin }}px;
}


#WP--{{ section.id }} a {
  text-decoration: none;
}

#WP--{{ section.id }}.wbs-pck__width--half {
  font-size: 16px;
}

#WP--{{ section.id }}.wbs-pck__width--full {
  font-size: 18px;
}

#WP--{{ section.id }} .wbs-pck__image img {
  display: block;
  height: auto;
}

/* Product pins */

#WP--{{ section.id }} .wbs-pck__product-pin {
  position: absolute;
  width: var(--pin-size);
  height: var(--pin-size);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  transition: transform 0.5s cubic-bezier(0.15,0.99,0.18,0.99);
  box-shadow: 2px 2px 15px {{ section.settings.pin_highlight_color | color_darken: 100 }};
  background: {{ section.settings.pin_highlight_color }};
}

#WP--{{ section.id }} .wbs-pck__product-pin::after {
  position: absolute;
  top: -55%;
  left: -55%;
  width: 211%;
  height: 211%;
  content: "";
  border: thin solid {{ section.settings.pin_highlight_color | color_modify: 'alpha', 0.5 }};
  border-radius: 50%;
  transform-origin: 50% 50%;
  transition: background .5s linear,transform .5s cubic-bezier(.15,.99,.18,.99),border-color .2s linear;
}

#WP--{{ section.id }} .wbs-pck__product-pin.wbs-pck__product-pin--active::after {
  background: {{ section.settings.pin_highlight_color | color_modify: 'alpha', 0.35 }};
  border-color: transparent;
}

#WP--{{ section.id }} .wbs-pck__product-pin:hover:after {
  border-color: hsla(0,0%,97.6%,0);
  background: {{ section.settings.pin_highlight_color | color_modify: 'alpha', 0.35 }};
}

#WP--{{ section.id }} .wbs-pck__product-info-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  width: max-content;
  max-width: 15em;
  padding: 0.4em 0.8em;
  box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
  background: {{ section.settings.text_background_color }};
}

#WP--{{ section.id }} .wbs-pck__product-pin--active .wbs-pck__product-info-tab {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: all;
}



#WP--{{ section.id }} .wbs-pck__product-info-tab a,
#WP--{{ section.id }} .wbs-pck__product-info-tab p {
  margin-bottom: 0;
  color: {{ section.settings.text_color }};
}

#WP--{{ section.id }} .wbs-pck__product-info-tab--left {
  left: 35px;
}

#WP--{{ section.id }} .wbs-pck__product-info-tab--right {
  right: 35px;
}

#WP--{{ section.id }} .wbs-pck__title {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  font-size: calc({{ section.settings.text_size | times: 0.01 }} * 1em);
  {%- if section.settings.override_theme_font != blank -%}
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  {%- endif -%}
}

#WP--{{ section.id }} .wbs-pck__arrow {
  transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}

#WP--{{ section.id }} .wbs-pck__product-info-tab:hover .wbs-pck__arrow {
  transform: translateX(3px);
}

#WP--{{ section.id }} .wbs-pck__description {
  margin: 3px 0 0;
  font-size: calc({{ section.settings.text_size | times: 0.01 }} * 0.8em);
  {%- if section.settings.override_theme_font != blank -%}
  font-family: var(--main-font);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-style);
  {%- endif -%}
}

#WP--{{ section.id }} .wbs-pck__title span:first-of-type {
  margin-right: 10px;
}

#WP--{{ section.id }} .wbs-pck__dot-area {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 30px;
  bottom: 30px;
}

.wbs-pck__sizer{
  position: relative;
}

#WP--{{ section.id }} .wbs-pck__placeholder {
  background-color: {{ section.settings.text_background_color | color_darken: 10 }};
  fill: {{ section.settings.text_background_color | color_lighten: 10 }};
}

{%- if section.settings.custom_css != blank -%}
  {%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
  {%- for declaration in custom_section_declarations -%}
    {%- if declaration contains '{' -%}
      #WP--{{ section.id }} {{ declaration }} }
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  #WP--{{ section.id }}.wbs-pck__width--half,
  #WP--{{ section.id }}.wbs-pck__width--full {
    font-size: 14px;
  }

  #WP--{{ section.id }} .wbs-pck__product-info-tab {
    max-width: 45vw;
  }

  #WP--{{ section.id }} .wbs-pck__product-info-tab--left {
    left: 20px;
  }

  #WP--{{ section.id }} .wbs-pck__product-info-tab--right {
    right: 20px;
  }
}

/* Landscape phones and down */
@media (max-width: 480px) {
  #WP--{{ section.id }} {
    margin-top: {{ section.settings.outer_margin | divided_by: 2 }}px;
    margin-bottom: {{ section.settings.outer_margin | divided_by: 2 }}px;
  }

  {%- if section.settings.mobile_custom_css != blank -%}
    {%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
    {%- for declaration in mobile_custom_declarations -%}
      {%- if declaration contains '{' -%}
        #WP--{{ section.id }} {{ declaration }} }
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
}
</style>

{%- comment -%} HTML {%- endcomment -%}
<section id="WP--{{ section.id }}" class="WP--{{ section.id }} wbs-pck__shop-the-collection wbs-pck__section wbs-pck__width--{{ section.settings.section_width }}">
  <div class="wbs-pck__sizer">
    <div class="wbs-pck__image">
        {%- if section.settings.image != blank -%}
          {%- capture sizes -%}
            {%- if section.settings.section_width == 'full' -%}
              100vw
            {%- else -%}
              50vw
            {%- endif -%}
          {%- endcapture -%}
          {{ section.settings.image | image_url: width: 5000 | image_tag:  widths: widths, sizes: sizes }}
        {%- else -%}
          {{ 'collection-1' | placeholder_svg_tag: 'wbs-pck__placeholder' }}
        {%- endif -%}
        <div class="wbs-pck__dot-area">
          {%- for block in section.blocks -%}
            {%- capture product_tab_location -%}
              wbs-pck__product-info-tab--{%- if block.settings.horizontal > 50 -%}right{%- else -%}left{%- endif -%}
            {%- endcapture -%}
            <div id="wbs-pck__product-pin-id-{{ block.id }}"
                  class="wbs-pck__product-pin {% if forloop.first %}wbs-pck__product-pin--active{% endif %}"
                  data-wbs-pck-product-pin="{{ block.settings.product }}"
                  style="top:{{ block.settings.vertical }}% !important; left:{{ block.settings.horizontal }}%; display: flex; justify-content: center; align-items: center;"
                  {{ block.shopify_attributes }}
                  >
              {% if section.settings.show_toggle_element %}
              <svg role="presentation" focusable="false" stroke-width="2" width="8" height="8" class="icon icon-plus" viewBox="0 0 12 12" style="color: {{ section.settings.Icon-color }};">
        <path d="M6 0V12" fill="none" stroke="currentColor"></path>
        <path d="M0 6L12 6" fill="none" stroke="currentColor"></path>
      </svg>
                {% endif %}
              <div class="wbs-pck__product-info-tab {{ product_tab_location }} {% if forloop.first %}
                    wbs-pck__product-info--active{% endif %}"
                    data-wbs-pck-product-info="{{ block.settings.product }}"
                    >
                <a href="{{ block.settings.product.url }}">
                  <p class="wbs-pck__title">
                    <span class="wbs-pck__heading">{{ block.settings.product.title | default: 'Product title' }}</span>
                    <span class="wbs-pck__arrow">&rarr;</span>
                  </p>
                  {%- if block.settings.description != blank -%}
                    <div class="wbs-pck__description">{{ block.settings.description }}</div>
                  {%- endif -%}
                </a>
              </div>
            </div>
          {% endfor %}
        </div>
    </div>
  </div>
</section>
{%- endcapture -%}
{{ minify | strip_newlines }}

{% schema %}
{
  "name": "Lookbook section",
  "class": "WP__shop-the-collection WP__widths",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "header",
      "content": "Text appearance"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text size",
      "min": 80,
      "max": 120,
      "step": 5,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "Design"
    },
    {
      "type": "checkbox",
      "id": "show_toggle_element",
      "label": "Icon Show/Hide"
    },
     {
      "type": "color",
      "id": "Icon-color",
      "label": "Icon color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "pin_highlight_color",
      "label": "Pin highlight",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#102225"
    },
    {
      "type": "color",
      "id": "text_background_color",
      "label": "Text background",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "Size",
      "default": "full",
      "info": "Allows two sections to sit side-by-side.",
      "options": [
        {
          "value": "full",
          "label": "Full"
        },
        {
          "value": "half",
          "label": "Half"
        }
      ]
    },
    {
      "type": "range",
      "id": "inner_padding",
      "label": "Inner padding",
      "info": "Only applies to top and bottom.",
      "min": 10,
      "max": 100,
      "default": 40,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "outer_margin",
      "label": "Outer margin",
      "info": "Only applies to top and bottom.",
      "min": 0,
      "max": 100,
      "default": 0,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Advanced"
    },
    {
      "type": "liquid",
      "id": "custom_css",
      "label": "CSS"
    },
    {
      "type": "liquid",
      "id": "mobile_custom_css",
      "label": "Mobile CSS",
      "info": "Applied on screens less than 480px."
    },
    {
      "type": "checkbox",
      "id": "override_theme_font",
      "label": "Override default theme font",
      "default": true
    },
    {
      "type": "font_picker",
      "id": "heading_font",
      "label": "Product title",
      "default": "serif"
    },
    {
      "type": "font_picker",
      "id": "main_font",
      "label": "Description",
      "default": "sans-serif"
    }
  ],
  "blocks": [
    {
      "type": "product",
      "name": "Product",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        },
        {
          "type": "text",
          "id": "description",
          "label": "Description"
        },
        {
          "type": "range",
          "id": "horizontal",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Horizontal position",
          "default": 50
        },
        {
          "type": "range",
          "id": "vertical",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Vertical position",
          "default": 50
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lookbook section",
      "settings": {
      },
      "blocks": [
        {
          "type": "product",
          "settings": {
            "horizontal": 22,
            "vertical": 39
          }
        }
      ]
    }
  ]
}
{% endschema %}

<script type="application/json" data-wbs-pck="{{ section.id }}">
  {
    "id": {{ section.id | json }},
    "section_width": {{ section.settings.section_width | json }}
  }
</script>
{%- comment -%} JavaScript {%- endcomment -%}
<script
  data-wbs-pck-js="{{ section.id }}"
  type="module"
  defer
>
(function(){

  const wbsPack = {
    settings: {},
    selectProduct: function(product_handle, product_dots, section){

      const active_product = section.querySelector(`[data-wbs-pck-product-info="${product_handle}"]`);
      const active_dot = section.querySelector(`[data-wbs-pck-product-pin="${product_handle}"]`);
      const product_infos = section.querySelectorAll(`[data-wbs-pck-product-info]`)

      // Remove all dot classes and add active selection
      product_dots.forEach((product_dot) => {
        product_dot.classList.remove('wbs-pck__product-pin--active');
      })
      active_dot.classList.add('wbs-pck__product-pin--active');

      // Remove previous active product class and add active selection
      product_infos.forEach((product_info) => {
        product_info.classList.remove('wbs-pck__product-info--active');
      })
      active_product.classList.add('wbs-pck__product-info--active');

    },
    load: function(section){

      // Grab all the product dots
      const product_dots = section.querySelectorAll('[data-wbs-pck-product-pin]');
      // Setup Dot Event Listener
      product_dots.forEach((product_dot) => {
        product_dot.addEventListener('click', (e) => {
          const product_handle = e.target.dataset.wbsPckProductPin;
          this.selectProduct(product_handle, product_dots, section);
        });
      });

      // Add extra class for width setting
      const widthSection = section.closest('.WP__widths');
      if (typeof widthSection !== 'undefined' && widthSection !== null) {
        section.closest('.WP__widths').classList.add(`WP__width--${this.settings.section_width}`);
      }
    },
    unload: function(section){
      // Grab all the product dots
      const product_dots = section.querySelectorAll('[data-wbs-pck-product-pin]');
      // Remove Dot Event Listener
      product_dots.forEach((product_dot) => {
        const product_handle = product_dot.dataset.wbsPckProductDot;
        product_dot.removeEventListener('click', (e) => wbsPack.selectProduct(product_handle, product_dots, section));
      });
    }
  }

  window.addEventListener('shopify:section:unload', function (e) {
    const settings = document.querySelector(`[data-wbs-pck="${e.detail.sectionId}"]`);
    const sectionId = e.detail.sectionId;
    const section = document.querySelector(`#WP--${e.detail.sectionId}`);
    if (sectionId == wbsPack.settings.id){
      wbsPack.unload(section);
    }
  });

  window.addEventListener('shopify:block:select', function (e) {
    const section = document.querySelector(`#WP--${e.detail.sectionId}`);
    const product_dots = section.querySelectorAll('[data-wbs-pck-product-pin]');
    const product_handle = e.target.dataset.wbsPckProductPin;
    wbsPack.selectProduct(product_handle, product_dots, section);
  });

  wbsPack.settings = JSON.parse(document.querySelector('[data-wbs-pck="{{ section.id }}"]').innerHTML);
  const sectionId = {{ section.id | json }};
  const section = document.querySelector(`#WP--${sectionId}`);

  if (sectionId == wbsPack.settings.id){
    wbsPack.load(section);
  }
})()
</script>
5/5 - (5 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *