Dawn theme questions regarding section availability

Solved
iamben
Shopify Partner
11 0 4

Hey guys - 

Been playing around with Dawn this evening. It's quite exciting. However, I can't figure something out, and can't figure out where in the new docs this is covered.

Firstly, what determines sections in the new .json theme file that can't be removed in the customiser? Like on a product page, we have:

Screenshot 2021-07-02 at 23.13.10.png

Product information and Product recommendations, neither of which can be deleted. But any other section I add can be deleted. How do I create a section on a product template (for instance), that can't be deleted by someone making changes in the customiser?

Secondly, when I look at the sections available to me on other pages (say, the Homepage), I can't see the Product recommendations section as being available. I know this makes sense, but why isn't it available? I sort of figured it would be to do with the templates part in the schema (as here: https://shopify.dev/themes/architecture/sections/section-schema#templates) saying the Product recommendations could only be used in the product template - except that's not in the schema in that section! What determines that collage.liquid will be available everywhere, and pickup-availability.liquid isn't? Am I missing something?

Am sure I'll have more questions (and is design the best place to post, or "New Online Store Design Experience" - feel free to move this if it make sense!), but looking good so far.

Thanks! 
"

0 Likes
kaymay
New Member
2 0 0

@iamben  how did you add Dawn? I'm having a hard time getting it to load

 

0 Likes
Majagar
New Member
3 0 0

which part do you have a problem with?

0 Likes
iamben
Shopify Partner
11 0 4

@kaymay - create a new development store.

@Majagar - are you asking me? I've explained a couple of times. It's not really a problem; I'm just trying to understand it and it's not clear from the docs alone.

0 Likes
Majagar
New Member
3 0 0

@iamben Yea, you're right it's a bit unclear, I still believe something's missing

'cause it does not make sense that the shop admins are not updated

0 Likes
Ninthony
Shopify Partner
1973 296 782

Anyone have any luck with this? @iamben do you have any documentation references for Dawn? I'm trying to understand the new structure, I don't really get how the JSON templates work yet. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Chris_Sydney
Shopify Partner
14 0 2

Honestly, Kind of in the same boat on reference material, there seems to be whole bunch of new features and deployment but no real current documentation. 

I asked Shopify support, but have been advised that there is non avaliable for my request at this time. 

 

0 Likes
Slava_Maksimov
Shopify Partner
30 5 11

Guys, what's your problem?:)  It works the same as before. If you want to see the section available on the home page (or on any page with recent changes) , then you need to add the “presets” field for the schema in the section. If this field is not added, then the section will not be available for dynamic adding and it will be static. A static section cannot be deleted via the customizer

❤️ JS
0 Likes
iamben
Shopify Partner
11 0 4

@Slava_Maksimov wrote:

Guys, what's your problem?:)  


Ok, I'll bite! But only because I still don't get it and appreciate you answering (thanks!)

So here's the contents of my index.json (as per Dawn) -

{
  "sections": {
    "image_banner": {
      "type": "image-banner",
      "blocks": {
        "heading": {
          "type": "heading",
          "settings": {
            "heading": "Talk about your brand"
          }
        },
        "button": {
          "type": "buttons",
          "settings": {
            "button_label_1": "Shop all",
            "button_link_1": "shopify:\/\/collections\/all",
            "button_style_secondary_1": false,
            "button_label_2": "",
            "button_link_2": "",
            "button_style_secondary_2": false
          }
        }
      },
      "block_order": [
        "heading",
        "button"
      ],
      "settings": {
        "desktop_text_box_position": "flex-end",
        "color_scheme": "background-1",
        "stack_images_on_mobile": true,
        "adapt_height_first_image": false
      }
    },
    "featured_products": {
      "type": "featured-collection",
      "settings": {
        "title": "Featured products",
        "collection": "",
        "products_to_show": 4,
        "show_view_all": true,
        "swipe_on_mobile": false,
        "image_ratio": "adapt",
        "show_secondary_image": false,
        "add_image_padding": false,
        "show_vendor": false
      }
    },
    "image_text": {
      "type": "image-with-text",
      "blocks": {
        "heading": {
          "type": "heading",
          "settings": {
            "heading": "Image with text"
          }
        },
        "text": {
          "type": "text",
          "settings": {
            "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>"
          }
        },
        "button": {
          "type": "button",
          "settings": {
            "button_label": "Button label",
            "button_link": ""
          }
        }
      },
      "block_order": [
        "heading",
        "text",
        "button"
      ],
      "settings": {
        "height": "adapt",
        "color_scheme": "background-1",
        "layout": "image_first"
      }
    }
  },
  "order": [
    "image_banner",
    "featured_products",
    "image_text"
  ]
}

 

Here's a grab of my index / home in 'Customize' -

Screenshot 2021-07-14 at 15.56.38.png

That makes sense, I can see how it relates to the json. Now if I click add section I see:

Screenshot 2021-07-14 at 15.58.42.png

 

None of these are referenced in index.json - so let's look at some of the sections themselves (because how does it know to show all those?). Here's a short one, custom-liquid.liquid

{{ section.settings.custom_liquid }}

{% schema %}
{
  "name": "t:sections.custom-liquid.name",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "liquid",
      "id": "custom_liquid",
      "label": "t:sections.custom-liquid.settings.custom_liquid.label"
    }
  ],
  "presets": [
    {
      "name": "t:sections.custom-liquid.presets.name"
    }
  ]
}
{% endschema %}

 

Ok, so I can't see anywhere in there that say where this can and can't be used (as per https://shopify.dev/themes/architecture/sections/section-schema#templates - "templates": ["article", "index", "page", "product"] - for instance). So maybe this can be used everywhere, right, which is why we see it in that list on the index?

But then look at the liquid for product-recommendations.liquid

<link rel="stylesheet" href="{{ 'component-badge.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-product-recommendations.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-badge.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-price.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }}</noscript>

<product-recommendations class="product-recommendations page-width" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4">
  {% if recommendations.performed and recommendations.products_count > 0 %}
    <h2 class="product-recommendations__heading">{{ section.settings.heading | escape }}</h2>
    <ul class="grid grid--2-col grid--3-col-tablet{% if recommendations.products_count > 3 %} grid--4-col-desktop grid--quarter-max{% endif %}" role="list">
      {% for recommendation in recommendations.products %}
        <li class="grid__item">
          {% render 'product-card',
            product_card_product: recommendation,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor
          %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</product-recommendations>

{% javascript %}
  class ProductRecommendations extends HTMLElement {
    constructor() {
      super();

      const handleIntersection = (entries, observer) => {
        if (!entries[0].isIntersecting) return;
        observer.unobserve(this);

        fetch(this.dataset.url)
          .then(response => response.text())
          .then(text => {
            const html = document.createElement('div');
            html.innerHTML = text;
            const recommendations = html.querySelector('product-recommendations');
            if (recommendations && recommendations.innerHTML.trim().length) {
              this.innerHTML = recommendations.innerHTML;
            }
          })
          .catch(e => {
            console.error(e);
          });
      }

      new IntersectionObserver(handleIntersection.bind(this), {rootMargin: '0px 0px 200px 0px'}).observe(this);
    }
  }

  customElements.define('product-recommendations', ProductRecommendations);
{% endjavascript %}

{% schema %}
{
  "name": "t:sections.product-recommendations.name",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.product-recommendations.settings.header__1.content",
      "info": "t:sections.product-recommendations.settings.header__1.info"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.product-recommendations.settings.heading.label",
      "default": "You may also like"
    },
    {
      "type": "header",
      "content": "t:sections.product-recommendations.settings.header__2.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "t:sections.product-recommendations.settings.image_ratio.label",
      "default": "adapt",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__3.label"
        }
      ]
    },
    {
      "id": "show_secondary_image",
      "type": "checkbox",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_secondary_image.label"
    },
    {
      "id": "add_image_padding",
      "type": "checkbox",
      "default": false,
      "label": "t:sections.product-recommendations.settings.add_image_padding.label"
    },
    {
      "id": "show_vendor",
      "type": "checkbox",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_vendor.label"
    }
  ]
}
{% endschema %}

 

No mention of templates in this one either, right? But this section isn't in the list on the index page.

Why?!!

 

Genuinely appreciate the help - I'm sure I'm missing something simple/obvious - but I've had a lot of late nights recently and it's not sinking in...

 

0 Likes
Slava_Maksimov
Shopify Partner
30 5 11

This is an accepted solution.

None of these are referenced in index.json - so let's look at some of the sections themselves (because how does it know to show all those?). Here's a short one, custom-liquid.liquid - 

 

"presets": [
    {
      "name": "t:sections.custom-liquid.presets.name"
    }
  ]

 

This code indicates that the section will be available for adding to the pages

Screenshot 2021-07-14 at 7.04.08 PM.pngScreenshot 2021-07-14 at 7.04.33 PM.png

❤️ JS