Blog

以下是我在视频如何用 Shopify 来制作 B2B 询盘网站｜产品展示站教程中使用的代码。

<div style="margin-top: 20px;">
  <!-- Enhanced Heading Section -->
  <h2 style="font-size: 24px; font-weight: 700; margin: 0 0 8px 0; line-height: 1.2;">Get Your Exclusive Quote</h2>
  <p style="font-size: 14px; color: #666; margin: 4px 0 20px 0; line-height: 1.5;">Tell us what you need — our team responds within 24 hours.</p>
  
  <!-- Trust Signals Bar -->
  <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; font-size: 13px; color: #555;">
    <div style="display: flex; align-items: center; gap: 6px;"><span>✅</span><span>No commitment required</span></div>
    <div style="display: flex; align-items: center; gap: 6px;"><span>⚡</span><span>Fast response guaranteed</span></div>
    <div style="display: flex; align-items: center; gap: 6px;"><span>🔒</span><span>Your info stays private</span></div>
  </div>

  <!-- Success Message -->
  <div id="quote-success" style="display:none; background:#f0fff4; border:1px solid #68d391; border-radius:4px; padding:16px; margin-bottom:16px; color:#276749; font-size:14px;">
    ✅ Thank you for contacting us! We'll get back to you within 1 business day.
  </div>
  
  <!-- Quote Form -->
  <form id="quote-form" method="POST" action="/contact#contact_form">
    <input type="hidden" name="form_type" value="contact">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="contact[product]" value="{{ product.title }}">
    <input type="hidden" name="contact[page_url]" value="{{ request.origin }}{{ request.path }}">

    <!-- ✅ Honeypot Field - 机器人陷阱，真实用户不可见 -->
    <div style="position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden;" aria-hidden="true">
      <label for="quote-website">Website (leave blank)</label>
      <input type="text" id="quote-website" name="contact[website]" tabindex="-1" autocomplete="off">
    </div>

    <div style="margin-bottom: 16px;">
      <label for="quote-name" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Name</label>
      <input type="text" id="quote-name" name="contact[name]" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box;">
    </div>
    
    <div style="margin-bottom: 16px;">
      <label for="quote-email" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Email</label>
      <input type="email" id="quote-email" name="contact[email]" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box;">
    </div>
    
    <div style="margin-bottom: 16px;">
      <label for="quote-message" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Tell us about your needs</label>
      <textarea id="quote-message" name="contact[body]" rows="4" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; font-family: inherit;"></textarea>
    </div>
    
    <button type="submit" style="width: 100%; padding: 12px; background-color: #000; color: #fff; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 10px;">Request My Quote →</button>
    <p style="font-size: 12px; color: #888; text-align: center; margin: 10px 0 0 0;">We'll get back to you within 1 business day.</p>
  </form>
</div>

<script>
document.getElementById('quote-form').addEventListener('submit', function(e) {
  e.preventDefault();
  var form = this;

  // ✅ Honeypot 检测：如果隐藏字段有值，判定为机器人，静默拒绝
  var honeypot = document.getElementById('quote-website').value;
  if (honeypot !== '') {
    form.style.display = 'none';
    document.getElementById('quote-success').style.display = 'block';
    return; // 假装成功，实际不提交
  }

  var data = new FormData(form);
  fetch('/contact', {
    method: 'POST',
    headers: { 'Accept': 'application/json' },
    body: data
  }).then(function() {
    form.style.display = 'none';
    document.getElementById('quote-success').style.display = 'block';
  });
});
</script>

Squarespace 是著名的建站工具，以精美的模版著称。一款网页编辑器，总是有自己的特点。Squarespace的特点，在我看来，就是把选择这件事进行到底。在每一个设计环节，都是从选择起步的。这个非常聪明。对于绝大多数非专业网页设计者来说，选择要远远简单于从头设计。

从开始的选择版型，选择包含模块，选择每个模块的布局，板式，结构。都是点点鼠标就能完成。就像选衣服一样，只管好看不好看即可。选好了外型之后，就选颜色，选好了颜色在增加功能，就在这诸多的选择之后，一个网站，在不知不觉中完成了。神奇！

其实，在这过程中，Squarespace已经完成了诸多麻烦事，比如多设备的适应性匹配。设计模板的精致程度，字体大小的比例变化，复杂设计效果的植入等等。这些高级功能，就像入门初级功能一样，分分钟就可以选择并套用。做出来的网站就是耐看，养眼。过程令人享受。

我觉得对于一个初学者来说，这样的理念是单刀直入，直奔主题的。非常棒。

当然，每一个编辑器都是侧重一边，有优点也有一些不足。或者也不能说什么不足，只能说更适合某种场景和需求来使用。WordPress，Shopify，Suqarespace，都是侧重一边，把自己在某一个领域的特长发挥的淋漓尽致，称霸一方。懂的人自然会懂的何时使用合适的工具，这样看，也是很合理了。

无论如何，我还是做了一起从零开始的手把手操作视频，分享给大家，希望对大家有所帮助。

Squarespace 14天试用：点此试用

Envato Elements，可以任意下载免版权的资源，使你几乎可以在上面找到所有你想要的资源类型。

经常做网站的朋友，想必都了解 Themeforest 这个全球最大的网站模板商城之一。在做网站时，总有机会在 Themeforest 上面找一些漂亮可心的模板。同时，Themeforest 还有很多兄弟系列网站，同时出售音乐，视频，图片，代码等等资源，这些网站加起来，使你几乎可以在上面找到所有你想要的资源类型。

而他的母公司，Envato，推出了一项资源订阅服务，Envato Elements，每月16.5 美金，你就可以任意下载免版权的资源。非常给力，绝对是设计师和设计爱好者的首选，我们今天一起来看一看吧。

前往 Envato 官网

Envato Elements 的优点

接下来，我从几个方面来给大家介绍一下强大的 Envato Elements 资源库，以及整个系统的版权管理架构。

1. 资源种类极其丰富，几乎包括了网络设计需要的所有类型
2. 版权登记清晰明了，简单易行
3. 内容选择基数巨大，质量高，一站式解决版权素材问题。

举个例子说明一下：

假设我们有一个客户需要版权图片，我们来做演示

1. 假如现在做网站需要特定图片，我们来尝试寻找一些宠物相关的照片。
2. 假如现在我们要寻找一些背景音乐，为我们的网站做背景或者为需要的商业视频短片制作背景音乐。我们来尝试找一些合适的音乐和音效。
3. 假如我们找一些平时宣传的图标，或者图形设计等等，我们同样可是轻易的找到。

总结

Envato Elements 是一个全面的版权资源解决方案，如果你是一个像我一样的版权资源常用人士，这是当之无愧的第一选择。

有人会问，市面上的单独产品有很多，比如音乐单独采购，图片单独采购，设计单独采购。相比这些而言，我更喜欢一站式的解决方案。因为这样更省时间，在质量要求不是多于苛刻的话，我想时间投资是你更要考虑的一个问题。试想一下，每个平台分别去寻找一次，想起来都会心好累。。。

如何从零开始制作一个WordPress网站？这期视频将会从零开始一步一步为您讲解。让您拥有自己的网站。

如何从零开始制作一个WordPress网站？这期视频将会从零开始一步一步为您讲解。在视频中，内容包括了购买域名，购买主机，安装 wordpress, 安装设置 Elementor，安装设置 Astra 主题。目标就是让您拥有自己的网站。

WordPress是一个免费开源程序，是目前最适合搭建企业及个人网站的程序之一。世界上的网站，有大约三分之一都是由WordPress来搭建的。基于WordPress，你可以搭建企业形象网站，在线商城，个人博客，外贸网站等等任意形式的网站。在以往，做网站看起来都是很困难的事情，其实不是的。每个人经过一些学习，都可以在很短的时间内学会网站的逻辑，进而设计出自己风格的网站。

这期视频，就是为了这个目的。在之后的视频中，我们将从设计、插件、功能等多方面，一点点的为您解读如何让WordPress为您所用，如何为您的企业，项目设计出漂亮的自定义网站。

全民卖货的年代，做独立站商城的时候，什么样的商城平台应该选择呢？哪一个更适合你，我们今天就来讨论一下。

全面卖货的年代

对独立站商城来说，什么样的平台才是最适合你的呢？

这是一个全民卖货的年代，流量的背后，定会引流到销售，这样的销售轨迹，恐怕大家已经非常熟悉了。那么，你在做独立站商城的时候，什么样的商城平台应该选择呢？

目前市场上最热门的两套程序是Shopify 和 WordPress 旗下的 Woocommerce。哪一个更适合你，我们今天就来讨论一下。

首先，这两个程序都是成熟的商城平台，用户基数都巨大，也都有非常成功的案例。在今天的比较中，我们将从一个店主的视角来给大家分析一下。

详细比较

第一，易用性。

易用性的意思是说，对于哪怕一个新手来说，开始建设一个网站和日常经营网站时的难易程度。

• 先说网站搭建的难易。Shopify 是一个现成的平台，准确的说，基础平台根本不需要搭建，只需要申请试用，最终转为正式会员。大多数情况是把自己的域名和 shopify 网站进行捆绑即可。可以说是非常简单。而 WordPress 在这一点上就比较复杂一些。需要自己购买域名，服务器 (推荐 Siteground)，安装 WordPress 和收费网关等等。如果没有一定的知识，会有较长的学习曲线需要度过。在这一点上，Shopify 是胜出的。
• 再说网站设计维护的难易，shopify 需要安装主题，和相应的插件，然后统一整合起来。WordPress 也是一样。但是，Shopify 有自己的主题和插件库，一般情况下来说，插件比较好找，同时，互相冲突的几率也是比较小的。而 WordPress 这一边，需要自己了解哪些插件要用，以及要选择具体哪些主题和插件。对专业性要求会高一些。遇到问题难处的记录也稍大一些。

总的来说，在易用性这一条上，Shopify 略胜一筹。

第二，美观程度

美观程度是指，如果你不是专业设计师的情况下，通过现有的资源，你是否可以随意决定设计，把店铺装修的非常漂亮，达到你心目中的样子。

• 先说大家的装修模式。不论是 Shopify 还是 Woocommerce，都是通过安装主题的方式来实现店铺装修的。同样，你都需要使用一些工具来对主题进行修改。在一点上，双方是一样的。
• 再说模板资源丰富程度。Woocommerce 是基于广为人知的 WordPress 平台的，这个多年的内容管理平台，已经几乎被世界上三分之一的网站选择为后台平台。用户基数庞大。也导致了有大量的优秀开发者已经为 WordPress 和 Woocommerce 开发好了漂亮的模板。有很多非常著名的平台销售相关模板，比如 Envato。他们在数量上和质量上都无可挑剔。价格大概在 29-79美金的一次性费用。你也可以找到很多的精品免费模板，比如 Astra。而 Shopify 主题，目前主要的途径还是官方的模板库，专门为 shopify 制作，价格从免费 – 180 美金。
• 在这个问题上，我觉得两者都可选择出漂亮的模板，但如果一定分个胜负，我会比较倾向于 Woocommerce，毕竟模板的选择范围要多一些。

第三，功能性自由度

功能性自由度是指，假设你不是一个程序员，你想添加一种功能的难易程度。

• 先说实现方式。Shopify 和 Woocommerce 都是通过插件或代码方式来实现的。插件可以从各自官方的插件商店来购买及下载。一样的。
• 从插件的丰富程度上来说，两者都非常棒，可以满足你的绝大多数需求。
• 从插件的费用情况来看，Woocommerce 基于 WordPress 平台，同一个事情有多种插件来解决，免费的收费的都有。Shopify 也有的，但是官方插件的主流插件大多都是收费的，而且很多是按月收费，价格上会较高一些的。
• 这个问题上，Woocommerce 和 Shopify 都做的不错，但我还是会因为插件数量基数为原因，算 Woocommerce 略胜一筹吧。

第四，收款方式及配送设置

这里指的是，选择收款方式和配送设置的方便程度。

• 这是一个非常容易的比较。无论是哪一方，你都可以选择和设置几乎所有的收款方式比如说，信用卡，Paypal，等等。你也可以选择几乎所有的配送方式和供货商。在这一点上可以说，双方都不会有任何问题。
• 在这一点上，虽然难分伯仲，但我会给 Shopify 加上一分，原因是 Shopify 在设置网关时操作稍稍更简便一些，因为开发商已经尽可能的嵌入相应的功能了。

第五，安全性

安全性是指你的网站受到威胁时的稳固程度，或是你在安全问题上需要介入的程度。

• Shopify 是个商业运营产品，从服务器到功能性，都有专业团队 24 小时维护。因此，安全性上大可不必担心。这是一个巨大的优势，特别是对商家来说，安心做生意，是个重中之重的话题。
• Woocommerce 的服务器由于是商家自己维护的，因此，需要自己来负责服务器的安全运营，以及应对可能突如其来的网络攻击。商家需要时刻关心最新的安全动态或是购买专业安全插件来规避风险。
• 这个问题上，Shopify 略胜一筹。

第六，SEO，搜索引擎优化

SEO 是指搜索引擎优化，换句话说，就是做线上搜索引擎自然流量推广时的方便程度。

• Shopify 是一个成型的产品，定制问题上总会有些受限。在 SEO 问题上，目前需要利用月度收费的第三方来拓展功能，同时，也不能轻松添加自定义脚本，(脚本和脚本编辑器应用仅适用于 Shopify Plus 商家。)
• Woocommerce 在这一点上就会略好一些，有很多著名的 SEO 插件可以利用，大多数还是免费的。在添加脚本和代码时非常容易，因为本身就是开源的。你可以随意定义自己网站想要开发的功能。比如说，你可以定制产品名称中去除 product，page 字样，但在 shopify 中，会保留这些字样。
• 由于摆脱了很多的限制。Woocommerce 在定制化上有较多优势，在这一点上略胜一筹。

第七，价格费用支出

这里指的是维护平台所花的成本费用。

• Shopify 需要支付的费用有：域名+月费(29-299美金/月)+插件费用+支付网关费用+非 shopify 支付网关时的交易抽成。
• Woocommerce 需要支付的费用有：域名+主机费用(5-30美金/月)+插件费用+支付网关费用，没有交易抽成费用。

由于没有抽成费用，外加插件费用和主机费率明显低于shopify，因此 Woocommerce 在硬支出上会少于 shopify，在这一点胜出。

第八，客服支持

在你遇到问题是，有没有人立刻帮到你，是巨大的差别。很多时间，你买的是产品，更是售后服务。

• Woocommerce 是自己运营的产品，你有很多个服务商，主机有问题，你需要联系主机服务商，代码出错了要联系程序开发者。换句话说，你几乎没有一个可以直接找到的客服来帮忙，需要自己排查问题，然后决定解决办法。
• Shopify 是商业运营产品，客服相当强大，不论是技术问题，收费问题，操作问题和使用问题，你都可以 7*24 小时随时与在线客服联系，可以选择在线聊天，电话等方式找到他们。根据我的经验，客服团队素质很好，响应非常迅速。

结论：

这是一个难分胜负的比较，截至目前，我们的分数是4 – 4 ! 那么到底选哪一个呢？

我的看法是，需要根据你的个人情况分开来谈。

• 喜欢拿来即用的，宁愿为此多付一点点支出，节省时间做商城运营的，可以选 Shopify.
• 动手能力强，不满足于商业平台条件限制，希望开发出更多定制化功能，或刚刚起步，资金不太充裕的商家，可以选择 Woocommerce。

为了大家更方便选择，我假想了几种使用情景，希望更能说明问题。

以下情况选择 Shopify：

• 如果你是个技术小白，不喜欢动手操作，只关注商城运营
• 如果你非常担心安全性，又不知道怎么加固和维护
• 如果高度喜爱客服功能， 希望有人帮忙

以下情况选择 Woocommerce：

• 如果你是个 SEO 达人，对网络营销自由度有高度要求
• 如果你刚刚起步，想先试水独立站，看看外贸到底靠谱不靠谱
• 如果你已经有 WordPress 了，想直接在原平台增加商城功能

大家可以利用这段代码，来隐藏Woocommerce商城中的加入购物车功能和实现隐藏价格标签的功能。

大家可以利用这段代码，来隐藏Woocommerce商城中的加入购物车功能和实现隐藏价格标签的功能，对建立产品网站特别实用。具体用法请看相关的视频讲解。这个办法不会随着WordPress的更新而消失，一劳永逸。

视频链接如下：

请复制下面的代码即可：

add_filter( 'woocommerce_is_purchasable', '__return_false');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

// 如果你不想要显示提示信息，请把这一段删除即可
add_action( 'woocommerce_single_product_summary', 'optional_message', 20 );
function optional_message() {
   echo '<p class="woocommerce-message">请点击下方按钮与我们联系。</p>';
}

// 隐藏商品价格，如果不想隐藏价格，请把这一段删除即可
add_filter( 'woocommerce_get_price_html', 'woocommerce_remove_price');
function woocommerce_remove_price($price){    
    return ;
}

在最新视频（如何设计B2B询盘网站）中，使用的另一段代码

// 如果你不想要显示提示信息，请把这一段删除即可
add_action( 'woocommerce_single_product_summary', 'optional_message', 20 );
function optional_message() {
   echo '<a href="mailto:abc@abc.com">点此联系我们</a>';
}

这篇文章包含了视频教程：如何使用Shopify设计产品展示站教程中提及的代码，请大家参考。如果有任何问题，欢迎大家留言。

{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
    {%- if section.settings.heading != blank -%}
      <h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
    {%- else -%}
      <h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
    {%- endif -%}
    {%- form 'contact', id: 'ContactForm', class: 'isolate' -%}
      {%- if form.posted_successfully? -%}
        <div class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</div>
      {%- elsif form.errors -%}
        <div class="form__message">
          <h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}</h2>
        </div>
        <ul class="form-status-list caption-large" role="list">
          <li>
            <a href="#ContactForm-email" class="link">
              {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
            </a>
          </li>
        </ul>
      {%- endif -%}
      <div class="contact__fields">
        <div class="field">
          <input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}">
          <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
        </div>
        <div class="field field--with-error">
          <input
            autocomplete="email"
            type="email"
            id="ContactForm-email"
            class="field__input"
            name="contact[email]"
            spellcheck="false"
            autocapitalize="off"
            value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
            aria-required="true"
            {% if form.errors contains 'email' %}
              aria-invalid="true"
              aria-describedby="ContactForm-email-error"
            {% endif %}
            placeholder="{{ 'templates.contact.form.email' | t }}"
          >
          <label class="field__label" for="ContactForm-email">{{ 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label>
          {%- if form.errors contains 'email' -%}
            <small class="contact__field-error" id="ContactForm-email-error">
              <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
              <span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
            </small>
          {%- endif -%}
        </div>
      </div>
      <div class="field">
        <textarea
          rows="10"
          id="ContactForm-body"
          class="text-area field__input"
          name="contact[{{ 'templates.contact.form.comment' | t }}]"
          placeholder="{{ 'templates.contact.form.comment' | t }}"
        >
          {{- form.body -}}
        </textarea>
        <label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }}</label>
        {% if product.url %}
<input type="hidden" id="ContactForm-product" name="contact[Product-name]" value="{{ product.title }}" />
{% endif %}
        {% if product.url %}
<input type="hidden" id="ContactForm-product" name="contact[Product-Link]" value="{{ product.url }}" />
{% endif %}
      </div>
      <div class="contact__button">
        <button type="submit" class="button">
          {{ 'templates.contact.form.send' | t }}
        </button>
      </div>
    {%- endform -%}
  </div>
</div>

以下是Convertbox，嵌套在Shopify产品页面中的代码

<a href='#cbbf0c746'>
<button class="button-quote">
Ask for Quote
</button>
</a>
<style>
.button-quote {
  background-color: black;
  border:none;
  color:white;
  font-size: 16px;
  padding: 15px 32px;
  margin: 10px 0px;
  cursor: pointer;
}
</style>