Sunstone Power DE

2024-01-20

Brand Introduction

Sunstone Power is a green energy product IP targeting the European market. Its parent company, Sunstone Power Industry Co., Ltd., integrates R&D, production, and sales, operating multiple factories with a dedicated team. Since 2014, it has launched over 100 products, earning acclaim in the German market.

Sunstone Power German Homepage

Project Requirements

Sunstone Power required an SEO-friendly platform optimized for the German market to host its growing e-commerce traffic and orders. The platform needed independence from third-party marketplaces like eBay or Amazon, while ensuring security, CDN support for static resources, scalability, and seamless self-managed iterations.

Previously, Rainy Design Studio identified that Sunstone Power's German site faced operational bottlenecks after a year on another platform. Existing subscription plans failed to meet promotional needs—a common yet reasonable industry demand. The studio’s recommendation of Shopify later proved transformative, delivering exceptional results.

Shopify Official Promotional Pages (August 2024)

Sunstone Power German Site Shopify Backend (Themes)

Design Philosophy

As a German-facing industrial e-commerce platform, Sunstone Power prioritized intuitive, minimalist layouts to highlight critical data amid high visual density. Key design elements include:

Product Pages: Adaptive detail pages with structured content modules for seamless readability.
Bundled Sales: Contextual product recommendations during browsing.
Quick Access: A top-mounted service button and collapsible menu for instant support.

Sunstone Power German Site Product List & Detail Pages

Rainy Design Studio transformed user experience through clean, data-focused designs—a significant visual upgrade for industrial e-commerce platforms.

Desktop (≥1920px)

Sunstone Power Product Page (Desktop) | Rainy Design Studio

Mobile (360px–767px)

Sunstone Power Product Page (Mobile) | Rainy Design Studio

Technical Framework

The German site leverages Tailwind CSS and Shopify Liquid, blending modern and traditional frameworks. This approach retains Shopify’s operational flexibility (customizable modules, template generation) while optimizing performance through lightweight CSS and minimal native JS—eliminating redundant rendering from multiple Snippets.

Key advantages of Tailwind CSS:

Features	TailwindCSS	Bootstrap
Design Approach	Utility-first	Component-based
Customization	High flexibility via classes	Theming with variables/classes
File Size	Initial bulk, purgeable	Modular (include needed components)
Performance	Optimized with PurgeCSS	Precompiled, minified files
Community	Dynamic, growing ecosystem	Established, extensive resources
Learning Curve	Steeper but well-documented	Traditional, widely taught
Integration	Framework-agnostic	Broad compatibility with tweaks
Documentation	Comprehensive examples	Detailed component demos
Ecosystem	Expanding plugins/extensions	Rich themes and plugins

Most Shopify developers still use Bootstrap for familiarity, avoiding Tailwind’s learning curve. However, newer technologies deliver unparalleled flexibility and performance.

Our Code Snippet

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 Original Code

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 -%}

The true test of website efficiency lies in Google Pagespeed Insights. Click here to view the official performance evaluation of Sunstone Power’s German site (requires VPN access).

As evidenced, Sunstone Power’s German site significantly outperforms most competitors in its niche, with an even more pronounced gap when compared to peers using Shopify Themes.

Sunstone Power German Site

Sunstonepower.de Google PageSpeed Analysis 1 | Rainy Design Studio

Sunstonepower.de Google PageSpeed Analysis 2 | Rainy Design Studio

Sunstonepower.de Google PageSpeed Analysis 3 | Rainy Design Studio

Leading Competitor: Eco-Worthy German Site

De.eco-worthy.com Google PageSpeed Analysis 1 | Rainy Design Studio

De.eco-worthy.com Google PageSpeed Analysis 2 | Rainy Design Studio

De.eco-worthy.com Google PageSpeed Analysis 3 | Rainy Design Studio

Industry Average Benchmark

litime.de Google PageSpeed Analysis 1 | Rainy Design Studio

litime.de Google PageSpeed Analysis 2 | Rainy Design Studio

litime.de Google PageSpeed Analysis 3 | Rainy Design Studio

As technology evolves, Rainy Design Studio remains committed to staying ahead of industry trends, ensuring our technical stack remains cutting-edge.

Collaboration Background

Since 2021—prior to the founding of Rainy Design Studio—Rainy has collaborated with Sunstone Power on projects including English site development, eBay product listings, and exhibition designs. Beyond iterating the German site, we now offer SEO/SMM professional training to optimize content strategies collaboratively.

By empowering brands through design, enhancing experiences through technology, and sharing knowledge with partners, we strive to elevate end-user satisfaction and amplify brand influence.

Rainy Design @ 2025