Rainy Design 雨点设计工作室官网上线 | Rainy Design Studio

Sunstone Power 德国站

2024-01-20

检测到窗口宽度不足1024px，请使用宽屏设备浏览以获得最佳效果。

品牌简介

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

Sunstone Power 德文站首页

项目需求

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

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

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

Sunstone Power 德文站 Shopify 后台 Themes

设计理念

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

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

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的具体优势表现为：

Features	TailwindCSS	Bootstrap
Design Approach	Utility-first	Component-based
Customization	High flexilbility with classes	Theming with variables and classes
File Size	Initial large size, but purgable	Modular(can include only needed components)
Performance	Efficient with PurgeCSS	Precompiled, minified files for faster loads
Community	Newer, dynamic, growing community	Vast, well-established, with many resources
Learning Curve	May seem unfamiliar but has detailed docs	More traditional and widely taught
Integration	Framework-agnostic, versatile	Broad compatibility, but may need tweaks
Documentation	Comprehensive, with examples	Extensive, with component demos
Ecosystem	Growing range of plugins and extensions	Large number of themes, extensions, and plugin

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

我们的代码片段

1
2{% assign pricePercentage = product.price | times: 100.00 | divided_by: product.compare_at_price %}
3{% assign priceOffs = 100 | minus: pricePercentage | round | times: -1 %}
4
5<div class="relative shrink-0 w-full max-w-[18rem] bg-white lg:w-1/4 lg:max-w-none lg:shrink">
6  <span class="shade shadow-shade"></span>
7  <div class="block w-full h-full p-6 bg-white text-gray">
8    <div class="absolute z-10 flex justify-center items-center top-0 left-0 text-white font-roboto text-xs md:text-base">
9      {% if product.compare_at_price != null %}
10        <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">
11          <p>{{ priceOffs }}%</p>
12        </span>
13      {% endif %}
14      
15      {% unless product.available %}
16        <span class="w-full h-full px-2 py-1 bg-gray-60 font-semibold">Ausverkauft</span>
17      {% endunless %}
18    </div>
19
20    {% if product.url contains "0-mwst" %}
21      <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">
22        <p>0% MwSt.</p>
23      </span>
24    {% endif %}
25
26    {% if product.featured_media %}
27      {{ product.featured_media | image_url: width: 480 | image_tag: alt: product.featured_media.alt, loading: 'lazy', class:'w-full object-contain' }}
28    {% else %}
29      <img src="{{ 'image_placeholder.png' | asset_img_url: 'large' }}" alt="SunStone Power" loading="lazy" width="480" height="480" class="w-full object-contain">
30    {% endif %}
31    <a href="{{ product.url }}" class="block mt-4 font-semibold">{{ product.title | escape }}</a>
32    <div>
33      <div class="flex flex-col">
34        <div class="flex items-center mt-3 mb-2 mr-auto font-roboto">
35          <p class="text-main-red text-xl">{{ product.price | money }}</p>
36          <p class="text-xs text-gray-60 ml-2"><del>{{ product.compare_at_price | money }}</del></p>
37        </div>
38      </div>
39    </div>
40  </div>
41  <a href="{{ product.url }}" class="z-10 block absolute w-full h-full top-0 left-0"> </a>
42</div>

Shopify Dawn Theme 原生代码

1{% comment %}
2  Renders a product card
3
4  Accepts:
5  - card_product: {Object} Product Liquid object (optional)
6  - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
7  - image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
8  - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
9  - show_vendor: {Boolean} Show the product vendor. Default: false
10  - show_rating: {Boolean} Show the product rating. Default: false
11  - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
12  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
13  - show_quick_add: {Boolean} Show the quick add button.
14  - section_id: {String} The ID of the section that contains this card.
15  - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
16  - horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
17  - placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)
18
19  Usage:
20  {% render 'card-product', show_vendor: section.settings.show_vendor %}
21{% endcomment %}
22
23{{ 'component-rating.css' | asset_url | stylesheet_tag }}
24{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
25
26{%- if card_product and card_product != empty -%}
27  {%- liquid
28    assign ratio = 1
29    if card_product.featured_media and media_aspect_ratio == 'portrait'
30      assign ratio = 0.8
31    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
32      assign ratio = card_product.featured_media.aspect_ratio
33    endif
34    if ratio == 0 or ratio == null
35      assign ratio = 1
36    endif
37  -%}
38  <div class="card-wrapper product-card-wrapper underline-links-hover">
39    <div
40      class="
41        card card--{{ settings.card_style }}
42        {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
43        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
44        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
45        {% if extend_height %} card--extend-height{% endif %}
46        {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
47        {% if horizontal_class %} card--horizontal{% endif %}
48      "
49      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
50    >
51      <div
52        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 %}"
53        style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
54      >
55        {%- if card_product.featured_media -%}
56          <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
57            <div class="media media--transparent media--hover-effect">
58              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
59              <img
60                srcset="
61                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
62                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
63                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
64                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
65                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
66                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
67                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
68                "
69                src="{{ card_product.featured_media | image_url: width: 533 }}"
70                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)"
71                alt="{{ card_product.featured_media.alt | escape }}"
72                class="motion-reduce"
73                {% unless lazy_load == false %}
74                  loading="lazy"
75                {% endunless %}
76                width="{{ card_product.featured_media.width }}"
77                height="{{ card_product.featured_media.height }}"
78              >
79              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
80
81              {%- if card_product.media[1] != null and show_secondary_image -%}
82                <img
83                  srcset="
84                    {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
85                    {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
86                    {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
87                    {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
88                    {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
89                    {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
90                    {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
91                  "
92                  src="{{ card_product.media[1] | image_url: width: 533 }}"
93                  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)"
94                  alt=""
95                  class="motion-reduce"
96                  loading="lazy"
97                  width="{{ card_product.media[1].width }}"
98                  height="{{ card_product.media[1].height }}"
99                >
100              {%- endif -%}
101            </div>
102          </div>
103        {%- endif -%}
104        <div class="card__content">
105          <div class="card__information">
106            <h3
107              class="card__heading"
108              {% if card_product.featured_media == null and settings.card_style == 'standard' %}
109                id="title-{{ section_id }}-{{ card_product.id }}"
110              {% endif %}
111            >
112              <a
113                href="{{ card_product.url }}"
114                id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
115                class="full-unstyled-link"
116                aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
117              >
118                {{ card_product.title | escape }}
119              </a>
120            </h3>
121          </div>
122          <div class="card__badge {{ settings.badge_position }}">
123            {%- if card_product.available == false -%}
124              <span
125                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
126                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
127              >
128                {{- 'products.product.sold_out' | t -}}
129              </span>
130            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
131              <span
132                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
133                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
134              >
135                {{- 'products.product.on_sale' | t -}}
136              </span>
137            {%- endif -%}
138          </div>
139        </div>
140      </div>
141      <div class="card__content">
142        <div class="card__information">
143          <h3
144            class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
145            {% if card_product.featured_media or settings.card_style == 'card' %}
146              id="title-{{ section_id }}-{{ card_product.id }}"
147            {% endif %}
148          >
149            <a
150              href="{{ card_product.url }}"
151              id="CardLink-{{ section_id }}-{{ card_product.id }}"
152              class="full-unstyled-link"
153              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
154            >
155              {{ card_product.title | escape }}
156            </a>
157          </h3>
158          <div class="card-information">
159            {%- if show_vendor -%}
160              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
161              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
162            {%- endif -%}
163
164            <span class="caption-large light">{{ block.settings.description | escape }}</span>
165
166            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
167              {% liquid
168                assign rating_decimal = 0
169                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
170                if decimal >= 0.3 and decimal <= 0.7
171                  assign rating_decimal = 0.5
172                elsif decimal > 0.7
173                  assign rating_decimal = 1
174                endif
175              %}
176              <div
177                class="rating"
178                role="img"
179                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 }}"
180              >
181                <span
182                  aria-hidden="true"
183                  class="rating-star"
184                  style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
185                ></span>
186              </div>
187              <p class="rating-text caption">
188                <span aria-hidden="true">
189                  {{- card_product.metafields.reviews.rating.value }} /
190                  {{ card_product.metafields.reviews.rating.value.scale_max -}}
191                </span>
192              </p>
193              <p class="rating-count caption">
194                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
195                <span class="visually-hidden">
196                  {{- card_product.metafields.reviews.rating_count }}
197                  {{ 'accessibility.total_reviews' | t -}}
198                </span>
199              </p>
200            {%- endif -%}
201
202            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
203            {%- if card_product.quantity_price_breaks_configured? -%}
204              <div class="card__information-volume-pricing-note">
205                <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
206              </div>
207            {%- endif -%}
208          </div>
209        </div>
210        {%- if show_quick_add -%}
211          <div class="quick-add no-js-hidden">
212            {%- liquid
213              assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
214              assign qty_rules = false
215              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
216                assign qty_rules = true
217              endif
218            -%}
219            {%- if card_product.variants.size > 1 or qty_rules -%}
220              <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
221                <button
222                  id="{{ product_form_id }}-submit"
223                  type="submit"
224                  name="add"
225                  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
226                  aria-haspopup="dialog"
227                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
228                  data-product-url="{{ card_product.url }}"
229                >
230                  {{ 'products.product.choose_options' | t }}
231                  {%- if horizontal_quick_add -%}
232                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
233                  {%- endif -%}
234                  {%- render 'loading-spinner' -%}
235                </button>
236              </modal-opener>
237              <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
238                <div
239                  role="dialog"
240                  aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
241                  aria-modal="true"
242                  class="quick-add-modal__content global-settings-popup"
243                  tabindex="-1"
244                >
245                  <button
246                    id="ModalClose-{{ card_product.id }}"
247                    type="button"
248                    class="quick-add-modal__toggle"
249                    aria-label="{{ 'accessibility.close' | t }}"
250                  >
251                    {% render 'icon-close' %}
252                  </button>
253                  <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
254                </div>
255              </quick-add-modal>
256            {%- else -%}
257              <product-form data-section-id="{{ section.id }}">
258                {%- form 'product',
259                  card_product,
260                  id: product_form_id,
261                  class: 'form',
262                  novalidate: 'novalidate',
263                  data-type: 'add-to-cart-form'
264                -%}
265                  <input
266                    type="hidden"
267                    name="id"
268                    value="{{ card_product.selected_or_first_available_variant.id }}"
269                    class="product-variant-id"
270                    {% if card_product.selected_or_first_available_variant.available == false %}
271                      disabled
272                    {% endif %}
273                  >
274                  <button
275                    id="{{ product_form_id }}-submit"
276                    type="submit"
277                    name="add"
278                    class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
279                    aria-haspopup="dialog"
280                    aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
281                    aria-live="polite"
282                    data-sold-out-message="true"
283                    {% if card_product.selected_or_first_available_variant.available == false %}
284                      disabled
285                    {% endif %}
286                  >
287                    <span>
288                      {%- if card_product.selected_or_first_available_variant.available -%}
289                        {{ 'products.product.add_to_cart' | t }}
290                      {%- else -%}
291                        {{ 'products.product.sold_out' | t }}
292                      {%- endif -%}
293                    </span>
294                    <span class="sold-out-message hidden">
295                      {{ 'products.product.sold_out' | t }}
296                    </span>
297                    {%- if horizontal_quick_add -%}
298                      <span class="icon-wrap">{% render 'icon-plus' %}</span>
299                    {%- endif -%}
300                    {%- render 'loading-spinner' -%}
301                  </button>
302                {%- endform -%}
303              </product-form>
304            {%- endif -%}
305          </div>
306        {%- endif -%}
307        <div class="card__badge {{ settings.badge_position }}">
308          {%- if card_product.available == false -%}
309            <span
310              id="Badge-{{ section_id }}-{{ card_product.id }}"
311              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
312            >
313              {{- 'products.product.sold_out' | t -}}
314            </span>
315          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
316            <span
317              id="Badge-{{ section_id }}-{{ card_product.id }}"
318              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
319            >
320              {{- 'products.product.on_sale' | t -}}
321            </span>
322          {%- endif -%}
323        </div>
324      </div>
325    </div>
326  </div>
327{%- else -%}
328  <div class="card-wrapper product-card-wrapper underline-links-hover">
329    <div
330      class="
331        card card--{{ settings.card_style }}
332        {% if extend_height %} card--extend-height{% endif %}
333        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
334      "
335      style="--ratio-percent: 100%;"
336    >
337      <div
338        class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
339        style="--ratio-percent: 100%;"
340      >
341        <div class="card__media">
342          <div class="media media--transparent">
343            {%- if placeholder_image -%}
344              {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
345            {%- else -%}
346              {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
347            {% endif %}
348          </div>
349        </div>
350      </div>
351      <div class="card__content">
352        <div class="card__information">
353          <h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
354            <a role="link" aria-disabled="true" class="full-unstyled-link">
355              {{ 'onboarding.product_title' | t }}
356            </a>
357          </h3>
358          <div class="card-information">
359            {%- if show_vendor -%}
360              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
361              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
362            {%- endif -%}
363            {% render 'price', show_compare_at_price: true %}
364          </div>
365        </div>
366      </div>
367    </div>
368  </div>
369{%- 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 - 雨点设计工作室

业内普遍水平

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

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

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

合作背景

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

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

Rainy Design @ 2024