1、自定义字节，比如自定义custommadeurl这个字节

{%- if product.metafields.custom.custommadeurl -%}

  <a href="{{ product.metafields.custom.custommadeurl }}" class="custom_made" style="font-size: 16px; color: #000;">Custom Made</a>

{%- endif -%}

2、logo调用

<a href="{{ routes.home }}">

  <img src="{{ 'your-logo-file.png' | asset_url }}" alt="{{ shop.name }}">

</a>

3、导航多级循环调用 

<nav>

  <ul>

    {% for link in linklists.main-menu.links %}

      <li>

        <a href="{{ link.url }}">{{ link.title }}</a>

        {% if link.links.size > 0 %}

          <ul>

            {% for sublink in link.links %}

              <li>

                <a href="{{ sublink.url }}">{{ sublink.title }}</a>

                {% if sublink.links.size > 0 %}

                  <ul>

                    {% for subsublink in sublink.links %}

                      <li>

                        <a href="{{ subsublink.url }}">{{ subsublink.title }}</a>

                        {% if subsublink.links.size > 0 %}

                          <ul>

                            {% for subsubsublink in subsublink.links %}

                              <li>

                                <a href="{{ subsubsublink.url }}">{{ subsubsublink.title }}</a>

                              </li>

                            {% endfor %}

                          </ul>

                        {% endif %}

                      </li>

                    {% endfor %}

                  </ul>

                {% endif %}

              </li>

            {% endfor %}

          </ul>

        {% endif %}

      </li>

    {% endfor %}

  </ul>

</nav>

<nav class="header__inline-menu">

  <ul class="list-menu list-menu--inline" role="list">

    {% for link in linklists.main-menu.links %}

      <li>

        {% if link.links and link.links.size > 0 %}

          <!-- 如果有子栏目就输出这个 -->

          <header-menu>

            <details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">

              <summary id="HeaderMenu-{{ link.title | handle }}" class="header__menu-item list-menu__item link focus-inset" role="button" aria-expanded="false" aria-controls="MegaMenu-Content-{{ forloop.index }}">

                <span>{{ link.title }}</span>

                <svg aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6">

                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>

                </svg>

              </summary>

              <div id="MegaMenu-Content-{{ forloop.index }}" class="mega-menu__content color-background-1 gradient motion-reduce global-settings-popup" tabindex="-1">

                <ul class="mega-menu__list page-width mega-menu__list--condensed" role="list">

                  {% for sublink in link.links %}

                    <li>

                      <a id="HeaderMenu-{{ link.title | handle }}-{{ sublink.title | handle }}" href="{{ sublink.url }}" class="mega-menu__link mega-menu__link--level-2 link">

                        {{ sublink.title }}

                      </a>

                    </li>

                  {% endfor %}

                </ul>

              </div>

            </details>

          </header-menu>

          <!-- end 如果有子栏目就输出这个 -->

        {% else %}

          <!-- 如果只有一级导航 -->

          <a id="HeaderMenu-{{ link.title | handle }}" href="{{ link.url }}" class="header__menu-item list-menu__item link link--text focus-inset">

            <span>{{ link.title }}</span>

          </a>

          <!-- end 如果只有一级导航 -->

        {% endif %}

      </li>

    {% endfor %}

  </ul>

</nav>

4、调用 某个栏目下产品  ，不如 调用 这个neon-signs产品 显示6个,如下代码：直接改neon-signs栏目，参数 根据后他详情页 再进行自定义来添加调用

1. 确定产品栏目的标识符： 首先，您需要确定要调用产品的栏目（也称为集合）的标识符。在 Shopify 后台管理页面中，转到 "商品" > "集合"，找到您想要调用的集合，并记下其标识符。

2. 编辑主题文件： 打开您的 Shopify 主题文件，通常可以在 "在线商店" > "主题" > "编辑代码" 中找到。根据您的主题结构，您可能需要编辑 collection.liquid、product-grid.liquid 或类似的文件。

3. 调用集合并显示产品列表： 在您找到的主题文件中，您可以使用 Liquid 标签来调用集合并显示产品列

{% assign collection_handle = 'neon-signs' %}

{% assign collection = collections[collection_handle] %}

{% if collection %}

  <h2>{{ collection.title }}</h2>

  <ul class="product-list">

    {% for product in collection.products limit:6 %}

      <li>

        <a href="{{ product.url }}">

          <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">

          <p>{{ product.title }}</p>

          <p>{{ product.price | money }}</p>

        </a>

      </li>

    {% endfor %}

  </ul>

{% endif %}

产品列表页循环

{% for product in collection.products %}

  <div class="product">

    <h2>{{ product.title }}</h2>

    <p>{{ product.description }}</p>

    <p>价格: {{ product.price | money }}</p>

    <!-- 其他产品属性 -->

  </div>

{% endfor %}

产品列表页调用标题相应的Collections分类如下： card_product.collections 

  {% for collection in card_product.collections %}

    <div class="crown">

      <span><img src="https://img.icons8.com/?size=100&id=13728&format=png&color=000000" alt=""></span> 

      <span>{{ collection.metafields.custom.big_type_crown }}</span>

    </div>

  {% endfor %}

{% if card_product.metafields.custom.crown_type != blank %}

  <div class="crown">

    <span><img src="https://img.icons8.com/?size=100&id=13728&format=png&color=000000" alt=""></span> 

    <span>{{ card_product.metafields.custom.crown_type }}</span>

  </div>

{% else %}

{% endif %}

产品详情页调用:

<div class="product-details">

  <h1>{{ product.title }}</h1>

  <p>{{ product.description }}</p>

  <p>价格: {{ product.price | money }}</p>

  <!-- 其他产品属性 -->

</div>

详情页调用标题相应的Collections分类如下：

{{ product.vendor }}

{% for collection in product.collections %}

  <p>

{{ collection.metafields.custom.big_type_crown }}，{{ collection.title }}

</p>
{% endfor %}
big_type_crown是自定义的

底部导航调用   

 {% for link in linklists['footer'].links %}

        <li><a href="{{ link.url }}">{{ link.title }}</a></li>

    {% endfor %}

blog文章列表调用  

{% for article in blogs['your-blog-handle'].articles %}

    <h2>{{ article.title }}</h2>

    <p>{{ article.content }}</p>

{% endfor %}

访问不同类的文章列表调用  

        {% assign categories = "blogs01,blogs02,blogs03" | split: "," %}

                    {% for category in categories %}

                        {% assign articles = blogs[category].articles %}

                        {% for article in articles %}

                            <div class="wj-list">

                                {% if article.image %}

                                    <div><img src="{{ article.image | img_url: 'master' }}" alt="{{ article.title }}"></div>

                                {% else %}

                                    <div><img src="https://pinshop106.vercel.app/_next/image?url=%2Fimage%2Fheader%2Fh1.png&w=384&q=75" alt="{{ article.title }}"></div>

                                {% endif %}

                                <div>

                                    <h5>{{ article.title }} - {{ article.content | strip_html | truncate: 200 }}</h5>

                                    <a href="{{ article.url }}">Read more</a>

                                </div>

                            </div>

                        {% endfor %}

                    {% endfor %}

输出带有产品和文章相同tags时的 产品列表 和文章列表

   {% for product in sub_collection.products %}

    <li>

        <a href="javascript:;" class="dja">{{ product.title }}666</a>

        <div class="zlk-wbox dqmb" >

            {{ product.title }}

            {% comment %}

            显示产品的标签列表

            {% endcomment %}

            {{ product.title }}产品标题的里面某个tags：

            {% if product.tags.size > 0 %}

                {% for tag in product.tags %}

                    {{ tag }}{% if forloop.last == false %}, {% endif %}

                {% endfor %}

            {% else %}

                No tags available

            {% endif %}

            <!-- 产品列选项卡内容 -->

            <div class="lxtype-contant-wrap">

                {% assign categories = "Certificates,Credit-Application,Installation-Instructions,Maintenance,Product-Drawing,Sales-Marketing,specification" | split: "," %}

                {% for category in categories %}

                    {% assign articles = blogs[category].articles %}

                    <div class="lxtype-contant 

                        {% if category == "Certificates" %}Certificates{% endif %}

                        {% if category == "Credit-Application" %}Credit-Application{% endif %}

                        {% if category == "Installation-Instructions" %}Installation-Instructions{% endif %}

                        {% if category == "Maintenance" %}Maintenance{% endif %}

                        {% if category == "Product-Drawing" %}Product-Drawing{% endif %}

                        {% if category == "Sales-Marketing" %}Sales-Marketing{% endif %}

                        {% if category == "specification" %}specification{% endif %}">

                        {% for article in articles %}

                            {% assign matching_tags = false %}

                            {% comment %}

                            检查文章的标签是否与产品标签匹配

                            {% endcomment %}

                            {% for article_tag in article.tags %}

                                {% for product_tag in product.tags %}

                                    {% if article_tag == product_tag %}

                                        {% assign matching_tags = true %}

                                    {% endif %}

                                {% endfor %}

                                {% if matching_tags %}

                                    <div class="wj-list">

                                        {% if article.image %}

                                            <div><img src="{{ article.image | img_url: 'master' }}" alt="{{ article.title }}"></div>

                                        {% else %}

                                            <div><img src="https://pinshop106.vercel.app/_next/image?url=%2Fimage%2Fheader%2Fh1.png&w=384&q=75" alt="{{ article.title }}"></div>

                                        {% endif %}

                                        <div>

                                            <h5>{{ article.title }} - {{ article.content | strip_html | truncate: 200 }}</h5>

                                            <a href="{{ article.url }}">Read more</a>

                                        </div>

                                    </div>

                                {% endif %}

                            {% endfor %}

                        {% endfor %}

                    </div>

                {% endfor %}

            </div>

            <!-- 产品列选项卡内容 -->

        </div>

    </li>

{% endfor %}

单页面调用文章

（2）调用blog为Youtube的文章

{% assign blog_handle = 'youtube' %}  <!-- 替换为你的博客句柄 -->

<p>正在加载博客文章：{{ blogs[blog_handle].title }}</p>

{% if blogs[blog_handle].articles.size > 0 %}

  {% for article in blogs[blog_handle].articles %}

    <div class="blog-post">

      <h3>{{ article.title }}</h3>

      <p>{{ article.excerpt | strip_html | truncatewords: 30 }}</p>

      <a href="{{ article.url }}">阅读全文</a>

    </div>

  {% endfor %}

{% else %}

  <p>没有找到任何文章。</p>

{% endif %}

（2）调用tag为Youtube的文章

{% assign blog_handle = 'Youtube' %}  <!-- 替换为你的博客句柄 -->

{% for article in blogs[blog_handle].articles %}

  <div class="exlist"> <a >{{ article.title }}</a>/div>

{% else %}

  <p>没有找到任何文章。</p>

{% endfor %}

{%- for item in linklists.types-of-resource.links -%}

              <div class="lxtype-list {{ item.title | handleize }}">{{ item.title }}<div><span></span></div></div>

  {%- endfor -%}

（3）调用文章不同的blog

{% assign blog_handles = 'youtube,tiktok,instagram' | split: ',' %}

{% assign all_articles = '' | split: '' %} <!-- 创建一个空数组来存储所有文章 -->

{% for blog_handle in blog_handles %}

  {% assign blog = blogs[blog_handle] %}

  {% if blog and blog.articles.size > 0 %}

    {% assign all_articles = all_articles | concat: blog.articles %} <!-- 将每个博客的文章添加到 all_articles 数组 -->

  {% endif %}

{% endfor %}

{% assign sorted_articles = all_articles | sort: 'published_at' | reverse %} <!-- 按照发布日期排序，最新的在前 -->

{% if sorted_articles.size > 0 %}

  {% for article in sorted_articles %}

    <div class="exlist">

      <div class="ex-v">

        <iframe class="elementor-video" 

                frameborder="0" 

                allowfullscreen 

                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 

                referrerpolicy="strict-origin-when-cross-origin" 

                title="{{ article.title }}"  

                src="{{ article.metafields.custom.video_url }}">

        </iframe>

      </div>

      <div class="ex-lb">

        <span class="icon-explorelist">

       <p>

            {% assign article_handle_first_part = article.handle | split: '/' | first %}

{{ article_handle_first_part }}

          </p>

          {% assign current_blog_handle = article.blog.handle %}

          {% if current_blog_handle == 'youtube' %}

            <img src="{{ 'ltter-youtube-icon.svg' | asset_url }}" alt="Youtube Icon">

          {% elsif current_blog_handle == 'tiktok' %}

            <img src="{{ 'ltter-tiktok-icon.svg' | asset_url }}" alt="Tiktok Icon">

          {% elsif current_blog_handle == 'instagram' %}

            <img src="{{ 'ltter-instagram-icon.svg' | asset_url }}" alt="Instagram Icon">

          {% else %}

            <img src="{{ 'default-icon.svg' | asset_url }}" alt="Default Icon">

          {% endif %}

        </span>

        <h4 class="card__heading">

          <a href="{{ article.metafields.custom.external_links }}" title="{{ article.excerpt }}" target="_blank">

            {{ article.title }}

          </a>

        </h4>

      </div>

    </div>

  {% endfor %}

{% else %}

  <p>没有可显示的文章。</p>

{% endif %}

  
其中

            {% assign article_handle_first_part = article.handle | split: '/' | first %}

          {{ article_handle_first_part }}

链接标签：{{ article.handle }}

手机电脑端判断
<!-- {% if device == 'mobile' %}{{ block.settings[image_key] | img_url: '150x' }}{% else %}{{ block.settings[image_key] | img_url: '300x' }}{% endif %} -->

{% if mobile_slide %}    {% else %}}   {% endif %}