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)
Mobile (360px–767px)
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
Codeblock copied!
{% 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 Original Code
Codeblock copied!
{% 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 -%}
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.
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
Leading Competitor: Eco-Worthy German Site
Industry Average Benchmark
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.