Sunstone Power - Introduction page | Showcase | Rainy Design Studio

Sunstone Power DE

Shopify 自建站商城Tailwind CSS网站开发SEO & SMM 培训

Rainy, Jan 20, 2024

品牌简介

Sunstone Power 是一家定位欧洲市场的绿色新能源产品IP，其母公司 - Sunstone Power Industry Co., Ltd. 集自主研发、生产、销售为一体，自有数家厂房并具备完善的研发团队，于 2014 年至今推出了百余款产品，于德国市场备受好评。

Sunstone Power 德国站首页 | Rainy Design Studio - 雨点设计工作室

Sunstone Power 德文站首页

项目需求

Sunstone Power 需要一个对 SEO 友好且高度支持德文区的平台搭建线上商城，以承载日渐提升的站点访问量与订单数。其商城并不依赖于类似 eBay 或 Amazon 的站方流量以直面业内广度竞争，与此同时，平台还应自发更行迭代并做好安全防护以保证网站一直处于安全稳定的状态，且最好具备 CDN 节点分发静态资源，更需考虑自建商城的易用性与可扩展性。

此前来自 Rainy Design Studio - 雨点设计工作室 的 Rainy了解到， Sunstone Power 德文站 已借助一家平台上线一年有余并来到了运营瓶颈，现有的订阅套餐却不足以满足官网的推广与运营，然而以上需求并不夸张，而是业内普遍、平均的合理诉求，而 Rainy Design Studio 推荐的 Shopify 平台也在未来证实了这一点：它实现了远超预期的网建效果。

Shopify 官方首页 | Rainy Design Studio - 雨点设计工作室

Shopify 官方介绍页 | Rainy Design Studio - 雨点设计工作室

Shopify 官方网站宣传页（2024年8月）

Sunstone Power Shopify 后台 | Rainy Design Studio - 雨点设计工作室

Sunstone Power 德文站 Shopify 后台 Themes

设计理念

Sunstone Power 德文站 作为一家专注于工业与实用性的新能源产品商城，由于内容面向德文环境 C 端，更符合用户直觉的版式设计应作去繁求精且突出重点，即在图版率较大的情况下保留并对比关键信息，以期在信息密度此起彼伏的空档中让客户不至于丢失聚焦于关键数据。这些特定设计包括：

  1. 产品内页： 精心设计的详情页面包含了整套商详模块的内容格式化，能充分对终端窗口进行自适应以获得优秀的用户体验，以实现承载关键数据表格的轻松阅读；
  2. 捆绑销售： 当对产品产生兴趣时，还会对关联产品一并打包推荐；
  3. 快速访问： 当用户对产品或品牌有疑问时，更能借助顶端的 service 按钮快速联系官方人员，或是在右下角折叠菜单内访问各项功能等等。

Sunstone Power 产品列表 | Rainy Design Studio - 雨点设计工作室

Sunstone Power 产品内页 | Rainy Design Studio - 雨点设计工作室

Sunstone Power 德文站产品列表及内页

Rainy Design Studio 的成员们基于 Sunstone Power 德文站的C端体验反馈实现了真正意义上的设计赋能，网页干净整洁，动线条理清晰，能优雅地展现关键数据与信息，这对于工业网站等实用类网站而言便是一次优秀的视觉迭代。

桌面端(≥w1920)

Sunstone Power 产品详细页桌面端 | Rainy Design Studio - 雨点设计工作室

移动端(w360~w767)

Sunstone Power 产品详细页移动端 | Rainy Design Studio - 雨点设计工作室

技术框架

Sunstone Power 德文站采用了先进的 Tailwind CSS 布局框架， 配合Shopify官方指定的 Shopify Liquid 实现了新老结合的 Shopify Theme 开发目标，即保留 Shopify Theme 于运营层面的易用性了，使得全页可自定义模块、内容、顺序，运营可自主生成模板，完美契合基于 Shopify 官方 theme - Dawn 的 Shopify App Store 扩展等等，还梳理了源代码的书写逻辑，使得 Snippets 与 Sections 的可维护性大大提升。

在继承了以上两者的共同优点外， Rainy Design Studio 更优化了全站页面性能，终端体验从传统的分布式 Nesting CSS + 大量 JS 库依赖转进到轻量化 CSS + 少量原生 JS 的代码整合，真正实现了接近 Pure CSS 的 “一次高速加载、全站无缝浏览” 的优秀体验，整站再也不用为多个 Snippets 的重复渲染导致文件重复拉取而大量占用终端性能了。

Tailwind CSS的具体优势表现为：

FeaturesTailwindCSSBootstrap
Design ApproachUtility-firstComponent-based
CustomizationHigh flexilbility with classesTheming with variables and classes
File SizeInitial large size, but purgableModular(can include only needed components)
PerformanceEfficient with PurgeCSSPrecompiled, minified files for faster loads
CommunityNewer, dynamic, growing communityVast, well-established, with many resources
Learning CurveMay seem unfamiliar but has detailed docsMore traditional and widely taught
IntegrationFramework-agnostic, versatileBroad compatibility, but may need tweaks
DocumentationComprehensive, with examplesExtensive, with component demos
EcosystemGrowing range of plugins and extensionsLarge number of themes, extensions, and plugin

此前你可能没听说过 Tailwind CSS ，毕竟目前 Shopify Theme 的自建站开发者仍大量使用 Bootstrap 等框架进行布局构建。使用成熟的框架对于开发者来说是好事，这意味着他们无需学习更新的技术栈，更不用重构现有的商城模板并适配至 Tailwind CSS ，也就大大提升了现阶段的生产力，使交稿时间稳定在一个范围内。但是——请相信我们，更好的技术永远能带来更便捷、灵活、高性能的用户体验，这是“成熟框架”永远无法比拟的，毕竟它们存在的固有痛点便是臃肿。

品牌简介

Sunstone Power 是一家定位欧洲市场的绿色新能源产品IP，其母公司 - Sunstone Power Industry Co., Ltd. 集自主研发、生产、销售为一体，自有数家厂房并具备完善的研发团队，于 2014 年至今推出了百余款产品，于德国市场备受好评。

Sunstone Power 德国站首页 | Rainy Design Studio - 雨点设计工作室

Sunstone Power 德文站首页

项目需求

Sunstone Power 需要一个对 SEO 友好且高度支持德文区的平台搭建线上商城，以承载日渐提升的站点访问量与订单数。其商城并不依赖于类似 eBay 或 Amazon 的站方流量以直面业内广度竞争，与此同时，平台还应自发更行迭代并做好安全防护以保证网站一直处于安全稳定的状态，且最好具备 CDN 节点分发静态资源，更需考虑自建商城的易用性与可扩展性。

此前来自 Rainy Design Studio - 雨点设计工作室 的 Rainy了解到， Sunstone Power 德文站 已借助一家平台上线一年有余并来到了运营瓶颈，现有的订阅套餐却不足以满足官网的推广与运营，然而以上需求并不夸张，而是业内普遍、平均的合理诉求，而 Rainy Design Studio 推荐的 Shopify 平台也在未来证实了这一点：它实现了远超预期的网建效果。

Shopify 官方首页 | Rainy Design Studio - 雨点设计工作室

Shopify 官方介绍页 | Rainy Design Studio - 雨点设计工作室

Shopify 官方网站宣传页（2024年8月）

Sunstone Power Shopify 后台 | Rainy Design Studio - 雨点设计工作室

Sunstone Power 德文站 Shopify 后台 Themes

设计理念

Sunstone Power 德文站 作为一家专注于工业与实用性的新能源产品商城，由于内容面向德文环境 C 端，更符合用户直觉的版式设计应作去繁求精且突出重点，即在图版率较大的情况下保留并对比关键信息，以期在信息密度此起彼伏的空档中让客户不至于丢失聚焦于关键数据。这些特定设计包括：

  1. 产品内页： 精心设计的详情页面包含了整套商详模块的内容格式化，能充分对终端窗口进行自适应以获得优秀的用户体验，以实现承载关键数据表格的轻松阅读；
  2. 捆绑销售： 当对产品产生兴趣时，还会对关联产品一并打包推荐；
  3. 快速访问： 当用户对产品或品牌有疑问时，更能借助顶端的 service 按钮快速联系官方人员，或是在右下角折叠菜单内访问各项功能等等。

Sunstone Power 产品列表 | Rainy Design Studio - 雨点设计工作室

Sunstone Power 产品内页 | Rainy Design Studio - 雨点设计工作室

Sunstone Power 德文站产品列表及内页

Rainy Design Studio 的成员们基于 Sunstone Power 德文站的C端体验反馈实现了真正意义上的设计赋能，网页干净整洁，动线条理清晰，能优雅地展现关键数据与信息，这对于工业网站等实用类网站而言便是一次优秀的视觉迭代。

桌面端(≥w1920)

Sunstone Power 产品详细页桌面端 | Rainy Design Studio - 雨点设计工作室

移动端(w360~w767)

Sunstone Power 产品详细页移动端 | Rainy Design Studio - 雨点设计工作室

技术框架

Sunstone Power 德文站采用了先进的 Tailwind CSS 布局框架， 配合Shopify官方指定的 Shopify Liquid 实现了新老结合的 Shopify Theme 开发目标，即保留 Shopify Theme 于运营层面的易用性了，使得全页可自定义模块、内容、顺序，运营可自主生成模板，完美契合基于 Shopify 官方 theme - Dawn 的 Shopify App Store 扩展等等，还梳理了源代码的书写逻辑，使得 Snippets 与 Sections 的可维护性大大提升。

在继承了以上两者的共同优点外， Rainy Design Studio 更优化了全站页面性能，终端体验从传统的分布式 Nesting CSS + 大量 JS 库依赖转进到轻量化 CSS + 少量原生 JS 的代码整合，真正实现了接近 Pure CSS 的 “一次高速加载、全站无缝浏览” 的优秀体验，整站再也不用为多个 Snippets 的重复渲染导致文件重复拉取而大量占用终端性能了。

Tailwind CSS的具体优势表现为：

FeaturesTailwindCSSBootstrap
Design ApproachUtility-firstComponent-based
CustomizationHigh flexilbility with classesTheming with variables and classes
File SizeInitial large size, but purgableModular(can include only needed components)
PerformanceEfficient with PurgeCSSPrecompiled, minified files for faster loads
CommunityNewer, dynamic, growing communityVast, well-established, with many resources
Learning CurveMay seem unfamiliar but has detailed docsMore traditional and widely taught
IntegrationFramework-agnostic, versatileBroad compatibility, but may need tweaks
DocumentationComprehensive, with examplesExtensive, with component demos
EcosystemGrowing range of plugins and extensionsLarge number of themes, extensions, and plugin

此前你可能没听说过 Tailwind CSS ，毕竟目前 Shopify Theme 的自建站开发者仍大量使用 Bootstrap 等框架进行布局构建。使用成熟的框架对于开发者来说是好事，这意味着他们无需学习更新的技术栈，更不用重构现有的商城模板并适配至 Tailwind CSS ，也就大大提升了现阶段的生产力，使交稿时间稳定在一个范围内。但是——请相信我们，更好的技术永远能带来更便捷、灵活、高性能的用户体验，这是“成熟框架”永远无法比拟的，毕竟它们存在的固有痛点便是臃肿。

我们的代码片段


{% assign pricePercentage = product.price | times: 100.00 | divided_by: product.compare_at_price %}
{% assign priceOffs = 100 | minus: pricePercentage | round | times: -1 %}

<div class="relative shrink-0 w-full max-w-[18rem] bg-white lg:w-1/4 lg:max-w-none lg:shrink">
  <span class="shade shadow-shade"></span>
  <div class="block w-full h-full p-6 bg-white text-gray">
    <div class="absolute z-10 flex justify-center items-center top-0 left-0 text-white font-roboto text-xs md:text-base">
      {% if product.compare_at_price != null %}
        <span class="absolute flex justify-center items-center w-12 h-6 top-0 left-0 font-roboto font-bold text-xs text-white bg-main-red lg:w-16 lg:h-8 lg:text-base">
          <p>{{ priceOffs }}%</p>
        </span>
      {% endif %}
      
      {% unless product.available %}
        <span class="w-full h-full px-2 py-1 bg-gray-60 font-semibold">Ausverkauft</span>
      {% endunless %}
    </div>

    {% if product.url contains "0-mwst" %}
      <span class="absolute flex justify-center items-center w-20 h-6 bottom-0 right-0 font-roboto font-bold text-xs text-white bg-gray-40 lg:w-24 lg:h-8 lg:text-base">
        <p>0% MwSt.</p>
      </span>
    {% endif %}

    {% if product.featured_media %}
      {{ product.featured_media | image_url: width: 480 | image_tag: alt: product.featured_media.alt, loading: 'lazy', class:'w-full object-contain' }}
    {% else %}
      <img src="{{ 'image_placeholder.png' | asset_img_url: 'large' }}" alt="SunStone Power" loading="lazy" width="480" height="480" class="w-full object-contain">
    {% endif %}
    <a href="{{ product.url }}" class="block mt-4 font-semibold">{{ product.title | escape }}</a>
    <div>
      <div class="flex flex-col">
        <div class="flex items-center mt-3 mb-2 mr-auto font-roboto">
          <p class="text-main-red text-xl">{{ product.price | money }}</p>
          <p class="text-xs text-gray-60 ml-2"><del>{{ product.compare_at_price | money }}</del></p>
        </div>
      </div>
    </div>
  </div>
  <a href="{{ product.url }}" class="z-10 block absolute w-full h-full top-0 left-0"> </a>
</div>

Shopify Dawn Theme 原生代码

{% comment %}
  Renders a product card

  Accepts:
  - card_product: {Object} Product Liquid object (optional)
  - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
  - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  - show_vendor: {Boolean} Show the product vendor. Default: false
  - show_rating: {Boolean} Show the product rating. Default: false
  - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  - show_quick_add: {Boolean} Show the quick add button.
  - section_id: {String} The ID of the section that contains this card.
  - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
  - horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
  - placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

  Usage:
  {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == null
      assign ratio = 1
    endif
  -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card card--{{ settings.card_style }}
        {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if extend_height %} card--extend-height{% endif %}
        {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
        {% if horizontal_class %} card--horizontal{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div
        class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
        style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
      >
        {%- if card_product.featured_media -%}
          <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
            <div class="media media--transparent media--hover-effect">
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                srcset="
                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                "
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}
                  loading="lazy"
                {% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != null and show_secondary_image -%}
                <img
                  srcset="
                    {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
                    {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
                    {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
                    {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
                    {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
                    {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
                    {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
                  "
                  src="{{ card_product.media[1] | image_url: width: 533 }}"
                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                  alt=""
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}
            </div>
          </div>
        {%- endif -%}
        <div class="card__content">
          <div class="card__information">
            <h3
              class="card__heading"
              {% if card_product.featured_media == null and settings.card_style == 'standard' %}
                id="title-{{ section_id }}-{{ card_product.id }}"
              {% endif %}
            >
              <a
                href="{{ card_product.url }}"
                id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
                class="full-unstyled-link"
                aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
              >
                {{ card_product.title | escape }}
              </a>
            </h3>
          </div>
          <div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3
            class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
            {% if card_product.featured_media or settings.card_style == 'card' %}
              id="title-{{ section_id }}-{{ card_product.id }}"
            {% endif %}
          >
            <a
              href="{{ card_product.url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ card_product.title | escape }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}

            <span class="caption-large light">{{ block.settings.description | escape }}</span>

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              <div
                class="rating"
                role="img"
                aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}"
              >
                <span
                  aria-hidden="true"
                  class="rating-star"
                  style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
                ></span>
              </div>
              <p class="rating-text caption">
                <span aria-hidden="true">
                  {{- card_product.metafields.reviews.rating.value }} /
                  {{ card_product.metafields.reviews.rating.value.scale_max -}}
                </span>
              </p>
              <p class="rating-count caption">
                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
                <span class="visually-hidden">
                  {{- card_product.metafields.reviews.rating_count }}
                  {{ 'accessibility.total_reviews' | t -}}
                </span>
              </p>
            {%- endif -%}

            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {%- if card_product.quantity_price_breaks_configured? -%}
              <div class="card__information-volume-pricing-note">
                <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
              </div>
            {%- endif -%}
          </div>
        </div>
        {%- if show_quick_add -%}
          <div class="quick-add no-js-hidden">
            {%- liquid
              assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
              assign qty_rules = false
              if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                assign qty_rules = true
              endif
            -%}
            {%- if card_product.variants.size > 1 or qty_rules -%}
              <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  data-product-url="{{ card_product.url }}"
                >
                  {{ 'products.product.choose_options' | t }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
              </modal-opener>
              <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
                <div
                  role="dialog"
                  aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
                  aria-modal="true"
                  class="quick-add-modal__content global-settings-popup"
                  tabindex="-1"
                >
                  <button
                    id="ModalClose-{{ card_product.id }}"
                    type="button"
                    class="quick-add-modal__toggle"
                    aria-label="{{ 'accessibility.close' | t }}"
                  >
                    {% render 'icon-close' %}
                  </button>
                  <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
                </div>
              </quick-add-modal>
            {%- else -%}
              <product-form data-section-id="{{ section.id }}">
                {%- form 'product',
                  card_product,
                  id: product_form_id,
                  class: 'form',
                  novalidate: 'novalidate',
                  data-type: 'add-to-cart-form'
                -%}
                  <input
                    type="hidden"
                    name="id"
                    value="{{ card_product.selected_or_first_available_variant.id }}"
                    class="product-variant-id"
                    {% if card_product.selected_or_first_available_variant.available == false %}
                      disabled
                    {% endif %}
                  >
                  <button
                    id="{{ product_form_id }}-submit"
                    type="submit"
                    name="add"
                    class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
                    aria-haspopup="dialog"
                    aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                    aria-live="polite"
                    data-sold-out-message="true"
                    {% if card_product.selected_or_first_available_variant.available == false %}
                      disabled
                    {% endif %}
                  >
                    <span>
                      {%- if card_product.selected_or_first_available_variant.available -%}
                        {{ 'products.product.add_to_cart' | t }}
                      {%- else -%}
                        {{ 'products.product.sold_out' | t }}
                      {%- endif -%}
                    </span>
                    <span class="sold-out-message hidden">
                      {{ 'products.product.sold_out' | t }}
                    </span>
                    {%- if horizontal_quick_add -%}
                      <span class="icon-wrap">{% render 'icon-plus' %}</span>
                    {%- endif -%}
                    {%- render 'loading-spinner' -%}
                  </button>
                {%- endform -%}
              </product-form>
            {%- endif -%}
          </div>
        {%- endif -%}
        <div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
            >
              {{- 'products.product.sold_out' | t -}}
            </span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
            >
              {{- 'products.product.on_sale' | t -}}
            </span>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{%- else -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card card--{{ settings.card_style }}
        {% if extend_height %} card--extend-height{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
      "
      style="--ratio-percent: 100%;"
    >
      <div
        class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
        style="--ratio-percent: 100%;"
      >
        <div class="card__media">
          <div class="media media--transparent">
            {%- if placeholder_image -%}
              {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
            {%- else -%}
              {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
            {%- endif -%}
            {% render 'price', show_compare_at_price: true %}
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}

真金不怕火炼，任何网站效率都可直接在 Google Pagespeed Insight 中见分晓；点击此处以查看 Google 官方工具提供的 Sunstone Power 德文站的页面速度评测（需要科学上网）。

我们可以看到， Sunstone Power 德文站的评分已远超绝大多数同赛道的竞对，且其差距与同样使用Shopify Theme建站的友商对比更甚。

Sunstone Power 德文站

Sunstonepower.de 谷歌网站页面详细分析 1 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室 Sunstonepower.de 谷歌网站页面详细分析 2 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室 Sunstonepower.de 谷歌网站页面详细分析 3 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室

知名服务商 Eco-Worthy 德文站

de.eco-worthy.com 谷歌网站页面详细分析 1 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室 de.eco-worthy.com 谷歌网站页面详细分析 2 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室 de.eco-worthy.com 谷歌网站页面详细分析 3 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室

业内普遍水平

litime.de 谷歌网站页面详细分析 1 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室 litime.de 谷歌网站页面详细分析 2 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室 litime.de 谷歌网站页面详细分析 3 Google PageSpeed Insight | Rainy Design Studio - 雨点设计工作室

历史的车轮滚滚向前， Rainy Design Studio 的伙伴们也会持续关注业内更新的技术，以确保手头的技术栈永不过时。

合作背景

早在 2021 年，于 Rainy Design Studio - 雨点设计工作室 创立之前， Rainy 便与 Sunstone Power 德文站 的伙伴们有过数次合作，包括英文站建站、 eBay 商详、展厅喷绘等设计等等，如今除德文站的更新迭代以外，更推出了 SEO / SMM 专业培训业务，与伙伴密切跟进站内的内容优化事宜。

以设计赋能形象、技术赋能体验、知识赋能伙伴，我们将为更好地服务终端并提升品牌影响力而努力奋斗下去。

订阅

解锁深度且前沿的前端技术、设计理念与用户交互探寻之道。