{"id":10944,"date":"2026-11-09T17:06:05","date_gmt":"2026-11-09T09:06:05","guid":{"rendered":"https:\/\/www.weswoo.com\/?p=10944"},"modified":"2026-11-09T17:06:05","modified_gmt":"2026-11-09T09:06:05","slug":"volenta-b2b-shopify-dark-bento-design","status":"publish","type":"post","link":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/","title":{"rendered":"Volenta\u2019s B2B website, translated into a Shopify design system"},"content":{"rendered":"

A Shopify store selling high-value products needs to do more than look premium. Buyers comparing equipment or considering a business purchase need to understand what is being offered, find supporting evidence and know what to do next. A large company introduction does not necessarily answer those questions. Neither does a product grid covered in sale badges.<\/p>\n

The Volenta website and brand identity project by SquidX Agency and Saber Ali, published on Behance, is a useful reference. Its visual identity combines a dark hero section with pale content areas, deep-green panels and bright lime accents. More importantly, the project demonstrates how services, results, customer stories and contact actions are arranged throughout the visitor journey.<\/p>\n

This is a design case study followed by a Shopify implementation proposal. The project\u2019s public presentation does not establish that Volenta runs on Shopify. The screenshots and animated numbers are design material, not independently verified business results. The accompanying Section code has not been deployed or tested in a production store.<\/p>\n

1. Give the accent colour a specific job<\/h2>\n
\"\u6697\u8272\u9996\u5c4f\u4e0e\u4e3b\u884c\u52a8\u6309\u94ae\"
Volenta UI reference. Source: SquidX Agency \/ Saber Ali, Behance. Original presentation<\/a><\/figcaption><\/figure>\n

The hero uses a dark image, white type and a bright contact button. The navigation repeats that action through Get Started. Further down, a highlighted service card stands beside darker alternatives. The eye can recognise an action without every component competing for attention.<\/p>\n

When building the Shopify theme, define separate colours for backgrounds, card surfaces, text, borders and actions. The example below uses a near-black base, deep-green cards, a pale mint surface and a lime accent. These design tokens take inspiration from the Volenta project; they are not intended to represent an extracted or official brand specification.<\/p>\n

Choose the main action according to the transaction. An available standard product can lead to Add to cart. An order that needs configuration or a quotation should explain what information the buyer needs to provide. Price alone cannot decide this: a costly standard product may still be directly purchasable, while an inexpensive custom part may need confirmation.<\/p>\n

The practical check is to look at the page with its normal content and imagery. Can a visitor identify the primary action? Does secondary navigation remain available without looking equally urgent? There is no universal percentage of lime that guarantees a successful design.<\/p>\n

2. Make the page easy to scan before adding more decoration<\/h2>\n
\"Aeonik
Volenta UI reference. Source: SquidX Agency \/ Saber Ali, Behance. Original presentation<\/a><\/figcaption><\/figure>\n
\"\u670d\u52a1\u533a\u7684\u6807\u7b7e\u3001\u7f16\u53f7\u4e0e\u5361\u7247\"
Volenta UI reference. Source: SquidX Agency \/ Saber Ali, Behance. Original presentation<\/a><\/figcaption><\/figure>\n
\"\u56db\u6b65\u6d41\u7a0b\u754c\u9762\"
Volenta UI reference. Source: SquidX Agency \/ Saber Ali, Behance. Original presentation<\/a><\/figcaption><\/figure>\n

The case presentation identifies Aeonik and Inter as its font pairing. Section labels, compact symbols, numbered service cards and a consistent arrow treatment give the visitor repeated landmarks. The service screenshot shows the highlighted first card beside Content Production and Web Development. The process page presents Discover, Strategize, Execute and Optimize in sequence.<\/p>\n

In a theme, implement these as reusable components. A section label, heading, introduction and list of blocks should each have their own role. Do not make an entire paragraph look like a section title just to create emphasis. Before adding a commercial font, check its webfont licence and loading strategy; naming it in CSS does not make the font available.<\/p>\n

Number a sequence when the order matters. For product features that can be read independently, a meaningful label may work better than forcing them into four steps. On mobile, preserve the relationship between the number, title and explanation, and avoid a layout that depends on hovering to reveal essential content.<\/p>\n

3. Build an evidence matrix, not a wall of unsupported numbers<\/h2>\n
\"Bento
Volenta UI reference. Source: SquidX Agency \/ Saber Ali, Behance. Original presentation<\/a><\/figcaption><\/figure>\n
\"Bento
Volenta UI reference. Source: SquidX Agency \/ Saber Ali, Behance. Original presentation<\/a><\/figcaption><\/figure>\n

The project\u2019s moving card composition combines metrics, a gauge, people, time-saving visuals, a scale comparison and appointment actions. Different frames show different values as the animation runs. Those values should be discussed as interface content, not repeated as audited performance claims.<\/p>\n

The original seven-part comparison is retained below. The Shopify column describes possible content types. It is not a specification for any particular product: certifications, delivery times, warranties and improvements require evidence for the actual item and market.<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n
Card type<\/th>\nWhat the case presentation displays<\/th>\nPossible Shopify equivalent<\/th>\n<\/tr>\n<\/thead>\n
Large growth metric<\/td>\nA large traffic-growth percentage with a short definition; the number changes during the animation<\/td>\nA measured performance difference, with the product version, baseline and test conditions beside it<\/td>\n<\/tr>\n
Gauge<\/td>\nA curved progress indicator and conversion text on a dark-green card<\/td>\nA properly defined operating range or measured parameter; do not turn a categorical certification into a misleading percentage<\/td>\n<\/tr>\n
Person or testimonial card<\/td>\nBrightly coloured person cards, names and roles<\/td>\nAn attributable customer or reviewer statement, used with appropriate permission and context<\/td>\n<\/tr>\n
Time-saving card<\/td>\nA workplace photograph, Hour Saving label and animated time-saving percentage<\/td>\nAn actual installation or delivery measure, stating where and when it applies<\/td>\n<\/tr>\n
Circular comparison<\/td>\nNested circles labelled with two years and monetary values<\/td>\nA clearly scaled comparison of footprint or running cost, including units and the source of the comparison<\/td>\n<\/tr>\n
Insight card<\/td>\nA short statement including \u201claunch fast\u201d<\/td>\nA specific product or service condition; any certification or warranty must match supporting documentation<\/td>\n<\/tr>\n
Appointment card<\/td>\nTeam portraits and Book an intro call<\/td>\nA contact action that explains what the discussion covers and carries the selected product or configuration into the next step<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

What matters is that every claim comes with enough context to explain it. A figure such as \u201c40%\u201d means very little on its own. The markup should keep the metric name, relevant product, baseline and applicable conditions together. This gives readers a clearer picture of what the number represents and helps systems parsing the page understand the same information. It does not, however, guarantee an AI citation or recommendation.<\/p>\n

Use a matrix when the evidence types genuinely differ. Seven versions of \u201chigh quality\u201d do not become persuasive because they occupy different card sizes. A smaller group of well-supported cards is preferable to filling every available block.<\/p>\n

4. Help the right buyer recognise the right next step<\/h2>\n
\"WHY
Volenta UI reference. Source: SquidX Agency \/ Saber Ali, Behance. Original presentation<\/a><\/figcaption><\/figure>\n
\"CASE
Volenta UI reference. Source: SquidX Agency \/ Saber Ali, Behance. Original presentation<\/a><\/figcaption><\/figure>\n

The WHY CHOOSE US screenshot leads with \u201cWe\u2019re not for Everyone and that\u2019s the Point\u201d. The case-study cards place an organisation label, a result description and method tags together. One design card includes \u201c40% more qualified leads in 90 days through targeted ABM\u201d. Here, that wording illustrates the information hierarchy; it is not independent confirmation of the result.<\/p>\n

A Shopify product or solution page can apply the same editorial discipline. State who the product is intended for, what has to be available before use and when another configuration is a better fit. Place those conditions near selection and purchase, rather than hiding them in a general FAQ.<\/p>\n

For customer stories, keep the customer context, product or configuration, intervention and measured outcome connected. If the outcome has not been measured, describe the documented workflow instead of inventing a percentage. Contact forms should retain the relevant product identifier and configuration, so the buyer does not have to start the explanation again.<\/p>\n

5. Turn the visual reference into an editable Shopify Section<\/h2>\n

The supplied implementation uses CSS Grid and Section blocks. It defines a twelve-column desktop grid, maps the available widths to six columns below 990px, and makes each card span the full twelve columns below 640px. These breakpoints belong to this example and should be checked against the theme\u2019s actual content width.<\/p>\n

Four block types are included: stat_card, testimonial_card, numbered_step and cta_call_card. Editors can choose a supported column span and surface theme, then enter the relevant content. A block wrapper includes block.shopify_attributes so the theme editor can identify it. These settings make the cards editable; they do not automatically connect product metafields or add an appointment integration.<\/p>\n

Begin with a duplicated or development theme. Place the supplied Liquid file in the sections directory, then open the relevant template in the theme editor and add the new section. Before evaluating the layout, replace the sample headings and descriptions with actual content. The default values are placeholders, not verified deployment figures or genuine customer statements, and should not be published as such.<\/p>\n

For reusable product-specific evidence, create the appropriate metafields or metaobjects and explicitly connect compatible dynamic sources or implement the data binding. A certification, test condition or quotation action should not be copied manually across unrelated products without a maintenance plan.<\/p>\n

The three original code files are supplied in full: design tokens, label\/button styles and the complete Section. They are reference code, not Volenta\u2019s private implementation. The CTA block currently renders a link; an embedded calendar, enquiry drawer, selected-variant context and analytics events require additional implementation.<\/p>\n

Check the resulting page with short and long headings, missing optional content, different block counts and real images. Test keyboard focus, colour contrast and reduced-motion preferences. Verify that section CSS does not change unrelated theme components. Then follow the action as a buyer would: select the product or configuration, open the next step, and confirm that the information is still correct.<\/p>\n

\nDesign tokens \u2014 full original reference code<\/summary>\n

Download full file<\/a><\/p>\n

:root {  \/* Volenta Dark & Lime \u6838\u5fc3\u8272\u677f *\/  --v-bg-black: #0B0D0C;  --v-surface-dark: #131A16;  --v-surface-deep-green: #182920;  --v-surface-mint: #DCE8E1;  --v-accent-lime: #C6FF33;  --v-accent-lime-hover: #D4FF66;  --v-text-primary: #FFFFFF;  --v-text-muted: #94A39B;  --v-text-on-light: #0B0D0C;  --v-border-subtle: rgba(255, 255, 255, 0.1);  \/* \u5b57\u4f53\u4e0e\u5706\u89d2\u89c4\u8303 *\/  --v-font-display: 'Aeonik', -apple-system, BlinkMacSystemFont, sans-serif;  --v-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  --v-radius-card: 20px;  --v-radius-pill: 999px;}<\/code><\/pre>\n<\/details>\n
\nLabels and buttons \u2014 full original reference code<\/summary>\n
Download full file<\/a><\/p>\n
\/* \u65b9\u62ec\u53f7\u7ae0\u8282\u8def\u6807\uff1a[ + WHY CHOOSE US ] *\/.v-bracket-badge {  display: inline-flex;  align-items: center;  gap: 6px;  font-family: var(--v-font-display);  font-size: 0.75rem;  font-weight: 600;  letter-spacing: 0.08em;  text-transform: uppercase;  color: var(--v-accent-lime);}.v-bracket-badge::before { content: "["; color: var(--v-text-muted); }.v-bracket-badge::after  { content: "]"; color: var(--v-text-muted); }\/* \u7535\u5149\u9752\u67e0\u7eff\u4e3b\u6309\u94ae + \u659c\u7bad\u5934\u4f4d\u79fb\u52a8\u753b *\/.v-btn-lime {  display: inline-flex;  align-items: center;  gap: 8px;  background-color: var(--v-accent-lime);  color: var(--v-text-on-light);  font-family: var(--v-font-display);  font-weight: 600;  font-size: 0.9375rem;  padding: 12px 22px;  border-radius: var(--v-radius-pill);  text-decoration: none;  transition: background-color 0.2s ease, transform 0.2s ease;}.v-btn-lime:hover { background-color: var(--v-accent-lime-hover); }.v-btn-lime .v-arrow { display: inline-block; transition: transform 0.2s ease; }.v-btn-lime:hover .v-arrow { transform: translate(2px, -2px); }<\/code><\/pre>\n<\/details>\n
\nComplete Section \u2014 full original reference code<\/summary>\n
Download full file<\/a><\/p>\n
{%- comment -%}  \u6587\u4ef6\uff1asections\/volenta-bento-proof.liquid  \u8bbe\u8ba1\u53c2\u8003\uff1aVolenta | B2B Design Agency Website & Brand Identity (by SquidX Agency)  \u529f\u80fd\uff1a\u5728 Shopify \u9996\u9875\u6216\u9ad8\u5ba2\u5355\u4ef7\u5546\u54c1\u9875\u6e32\u67d3\u6697\u9ed1\u98ce Bento \u6570\u636e\u8bc1\u636e\u77e9\u9635\u4e0e\u7f16\u53f7\u670d\u52a1\u6d41{%- endcomment -%}<style>  .volenta-section-{{ section.id }} {    background-color: #0B0D0C;    color: #FFFFFF;    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  }  .volenta-container {    max-width: 1280px;    margin: 0 auto;    padding: 0 24px;  }  .volenta-header {    display: flex;    flex-wrap: wrap;    justify-content: space-between;    align-items: flex-end;    gap: 24px;    margin-bottom: 48px;  }  .volenta-bracket-tag {    display: inline-flex;    align-items: center;    gap: 6px;    font-size: 0.75rem;    font-weight: 600;    letter-spacing: 0.08em;    text-transform: uppercase;    color: #C6FF33;    margin-bottom: 14px;  }  .volenta-bracket-tag span {    color: #94A39B;  }  .volenta-title {    font-size: clamp(2rem, 4vw, 3.25rem);    font-weight: 600;    line-height: 1.08;    letter-spacing: -0.02em;    color: #FFFFFF;    margin: 0;    max-width: 680px;  }  .volenta-btn {    display: inline-flex;    align-items: center;    gap: 8px;    background-color: #C6FF33;    color: #0B0D0C;    font-weight: 600;    font-size: 0.9375rem;    padding: 13px 24px;    border-radius: 999px;    text-decoration: none;    transition: background-color 0.2s ease;  }  .volenta-btn:hover {    background-color: #D4FF66;  }  .volenta-btn-arrow {    display: inline-block;    transition: transform 0.2s ease;  }  .volenta-btn:hover .volenta-btn-arrow {    transform: translate(2px, -2px);  }  \/* 12 \u5217 Bento \u54cd\u5e94\u5f0f\u7f51\u683c *\/  .volenta-bento-grid {    display: grid;    grid-template-columns: repeat(12, 1fr);    gap: 20px;  }  .v-col-3 { grid-column: span 3; }  .v-col-4 { grid-column: span 4; }  .v-col-6 { grid-column: span 6; }  .v-col-8 { grid-column: span 8; }  @media screen and (max-width: 990px) {    .v-col-3, .v-col-4, .v-col-6, .v-col-8 {      grid-column: span 6;    }  }  @media screen and (max-width: 640px) {    .v-col-3, .v-col-4, .v-col-6, .v-col-8 {      grid-column: span 12;    }  }  \/* \u5361\u7247\u901a\u7528\u6837\u5f0f\u4e0e\u56db\u5957\u8868\u9762\u4e3b\u9898 *\/  .volenta-card {    border-radius: 20px;    padding: 28px;    display: flex;    flex-direction: column;    justify-content: space-between;    min-height: 240px;    position: relative;    overflow: hidden;    border: 1px solid rgba(255, 255, 255, 0.08);    transition: transform 0.2s ease, border-color 0.2s ease;  }  .volenta-card:hover {    transform: translateY(-2px);    border-color: rgba(198, 255, 51, 0.35);  }  .v-theme-dark {    background-color: #131A16;    color: #FFFFFF;  }  .v-theme-deep-green {    background-color: #182920;    color: #FFFFFF;  }  .v-theme-mint {    background-color: #DCE8E1;    color: #0B0D0C;    border-color: transparent;  }  .v-theme-lime {    background-color: #C6FF33;    color: #0B0D0C;    border-color: transparent;  }  \/* \u5361\u7247\u5185\u90e8\u5143\u7d20 *\/  .v-pill-tag {    display: inline-block;    align-self: flex-start;    font-size: 0.75rem;    font-weight: 600;    padding: 5px 12px;    border-radius: 999px;    background: rgba(255, 255, 255, 0.1);    margin-bottom: 16px;  }  .v-theme-mint .v-pill-tag,  .v-theme-lime .v-pill-tag {    background: rgba(11, 13, 12, 0.1);    color: #0B0D0C;  }  .v-metric-value {    font-size: clamp(2.5rem, 4.5vw, 3.75rem);    font-weight: 700;    line-height: 1;    letter-spacing: -0.03em;    margin: 12px 0 8px;  }  .v-card-heading {    font-size: 1.25rem;    font-weight: 600;    line-height: 1.3;    margin: 0 0 8px;  }  .v-card-desc {    font-size: 0.9375rem;    line-height: 1.5;    opacity: 0.82;    margin: 0;  }  .v-step-num {    font-size: 0.875rem;    font-weight: 700;    opacity: 0.6;    margin-bottom: 24px;  }  .v-author-pill {    display: inline-flex;    align-items: center;    gap: 10px;    margin-top: 20px;    padding: 6px 14px 6px 6px;    border-radius: 999px;    background: rgba(11, 13, 12, 0.08);    font-size: 0.8125rem;    font-weight: 600;  }  .v-author-dot {    width: 28px;    height: 28px;    border-radius: 50%;    background: #0B0D0C;    color: #C6FF33;    display: inline-flex;    align-items: center;    justify-content: center;    font-size: 0.75rem;  }<\/style><section class="volenta-section-{{ section.id }}">  <div class="volenta-container">    <div class="volenta-header">      <div>        {%- if section.settings.bracket_label != blank -%}          <div class="volenta-bracket-tag">            <span>[<\/span> {{ section.settings.bracket_label }} <span>]<\/span>          <\/div>        {%- endif -%}        <h2 class="volenta-title">{{ section.settings.heading }}<\/h2>      <\/div>      {%- if section.settings.cta_text != blank -%}        <a href="\/en\/{{ section.settings.cta_url | default: '\/#' }}" class="volenta-btn">          {{ section.settings.cta_text }}          <span class="volenta-btn-arrow" aria-hidden="true">\u2197<\/span>        <\/a>      {%- endif -%}    <\/div>    <div class="volenta-bento-grid">      {%- for block in section.blocks -%}        {%- case block.type -%}          {%- when 'stat_card' -%}            <div class="volenta-card v-col-{{ block.settings.col_span }} v-theme-{{ block.settings.theme }}" {{ block.shopify_attributes }}>              {%- if block.settings.badge != blank -%}                <span class="v-pill-tag">{{ block.settings.badge }}<\/span>              {%- endif -%}              <div>                <div class="v-metric-value">{{ block.settings.metric }}<\/div>                <h3 class="v-card-heading">{{ block.settings.title }}<\/h3>                <p class="v-card-desc">{{ block.settings.description }}<\/p>              <\/div>            <\/div>          {%- when 'testimonial_card' -%}            <div class="volenta-card v-col-{{ block.settings.col_span }} v-theme-{{ block.settings.theme }}" {{ block.shopify_attributes }}>              <span class="v-pill-tag">{{ block.settings.badge | default: 'Verified Client' }}<\/span>              <div>                <p class="v-card-heading" style="font-size:1.125rem;">“{{ block.settings.quote }}”<\/p>                <div class="v-author-pill">                  <span class="v-author-dot">{{ block.settings.author_name | slice: 0 }}<\/span>                  <span>{{ block.settings.author_name }} · {{ block.settings.author_role }}<\/span>                <\/div>              <\/div>            <\/div>          {%- when 'numbered_step' -%}            <div class="volenta-card v-col-{{ block.settings.col_span }} v-theme-{{ block.settings.theme }}" {{ block.shopify_attributes }}>              <div class="v-step-num">{{ block.settings.step_number }}<\/div>              <div>                <h3 class="v-card-heading">{{ block.settings.title }}<\/h3>                <p class="v-card-desc">{{ block.settings.description }}<\/p>              <\/div>            <\/div>          {%- when 'cta_call_card' -%}            <div class="volenta-card v-col-{{ block.settings.col_span }} v-theme-{{ block.settings.theme }}" {{ block.shopify_attributes }}>              <span class="v-pill-tag">{{ block.settings.badge }}<\/span>              <div>                <h3 class="v-card-heading">{{ block.settings.title }}<\/h3>                <p class="v-card-desc" style="margin-bottom: 20px;">{{ block.settings.description }}<\/p>                <a href="\/en\/{{ block.settings.button_link | default: '\/#' }}" class="volenta-btn">                  {{ block.settings.button_label }}                  <span class="volenta-btn-arrow" aria-hidden="true">\u2197<\/span>                <\/a>              <\/div>            <\/div>        {%- endcase -%}      {%- endfor -%}    <\/div>  <\/div><\/section>{% schema %}{  "name": "Volenta \u6697\u9ed1 Bento \u77e9\u9635",  "tag": "section",  "settings": [    {      "type": "text",      "id": "bracket_label",      "label": "\u65b9\u62ec\u53f7\u8def\u6807\u6587\u5b57",      "default": "→ WHY CHOOSE US"    },    {      "type": "text",      "id": "heading",      "label": "\u4e3b\u6807\u9898",      "default": "Real work. Real specs. Built for demanding teams."    },    {      "type": "text",      "id": "cta_text",      "label": "\u53f3\u4e0a\u89d2\u4e3b\u6309\u94ae\u6587\u5b57",      "default": "Book a Consultation"    },    {      "type": "url",      "id": "cta_url",      "label": "\u53f3\u4e0a\u89d2\u4e3b\u6309\u94ae\u94fe\u63a5"    },    {      "type": "range",      "id": "padding_top",      "min": 20,      "max": 120,      "step": 4,      "unit": "px",      "label": "\u9876\u90e8\u5185\u8fb9\u8ddd",      "default": 72    },    {      "type": "range",      "id": "padding_bottom",      "min": 20,      "max": 120,      "step": 4,      "unit": "px",      "label": "\u5e95\u90e8\u5185\u8fb9\u8ddd",      "default": 72    }  ],  "blocks": [    {      "type": "stat_card",      "name": "\u6570\u636e\u6307\u6807\u5361 (Stat)",      "settings": [        {          "type": "select",          "id": "col_span",          "label": "\u684c\u9762\u7aef\u5217\u5bbd (\u517112\u5217)",          "options": [            { "value": "3", "label": "3\u5217 (1\/4\u5bbd)" },            { "value": "4", "label": "4\u5217 (1\/3\u5bbd)" },            { "value": "6", "label": "6\u5217 (1\/2\u5bbd)" }          ],          "default": "4"        },        {          "type": "select",          "id": "theme",          "label": "\u5361\u7247\u5e95\u8272",          "options": [            { "value": "dark", "label": "\u6df1\u70ad\u9ed1 (Dark)" },            { "value": "deep-green", "label": "\u6df1\u68ee\u6797\u7eff (Deep Green)" },            { "value": "mint", "label": "\u9f20\u5c3e\u8349\u6d45\u7eff (Mint)" },            { "value": "lime", "label": "\u7535\u5149\u9752\u67e0\u7eff (Lime \u9ad8\u4eae)" }          ],          "default": "deep-green"        },        {          "type": "text",          "id": "badge",          "label": "\u9876\u90e8\u80f6\u56ca\u6807\u7b7e",          "default": "Measured Output"        },        {          "type": "text",          "id": "metric",          "label": "\u6838\u5fc3\u5927\u6570\u5b57",          "default": "+63%"        },        {          "type": "text",          "id": "title",          "label": "\u6307\u6807\u6807\u9898",          "default": "Production Throughput Increased"        },        {          "type": "textarea",          "id": "description",          "label": "\u8865\u5145\u8bf4\u660e",          "default": "Verified across 250+ industrial deployments in the first 90 days."        }      ]    },    {      "type": "testimonial_card",      "name": "\u5ba2\u6237\u8bc1\u8a00\u5361 (Quote)",      "settings": [        {          "type": "select",          "id": "col_span",          "label": "\u684c\u9762\u7aef\u5217\u5bbd (\u517112\u5217)",          "options": [            { "value": "4", "label": "4\u5217 (1\/3\u5bbd)" },            { "value": "6", "label": "6\u5217 (1\/2\u5bbd)" }          ],          "default": "4"        },        {          "type": "select",          "id": "theme",          "label": "\u5361\u7247\u5e95\u8272",          "options": [            { "value": "lime", "label": "\u7535\u5149\u9752\u67e0\u7eff (Lime \u9ad8\u4eae)" },            { "value": "mint", "label": "\u9f20\u5c3e\u8349\u6d45\u7eff (Mint)" },            { "value": "dark", "label": "\u6df1\u70ad\u9ed1 (Dark)" }          ],          "default": "lime"        },        {          "type": "text",          "id": "badge",          "label": "\u9876\u90e8\u6807\u7b7e",          "default": "Enterprise Partner"        },        {          "type": "textarea",          "id": "quote",          "label": "\u5ba2\u6237\u8bc4\u4ef7\u6b63\u6587",          "default": "They didn't just ship hardware — they helped us fix our workflow and cut setup time by 25%."        },        {          "type": "text",          "id": "author_name",          "label": "\u8bc4\u4ef7\u4eba\u59d3\u540d",          "default": "Maximilian Ashby"        },        {          "type": "text",          "id": "author_role",          "label": "\u804c\u4f4d\u4e0e\u516c\u53f8",          "default": "Project Manager"        }      ]    },    {      "type": "numbered_step",      "name": "\u7f16\u53f7\u670d\u52a1\/\u6d41\u7a0b\u5361 (01-04)",      "settings": [        {          "type": "select",          "id": "col_span",          "label": "\u684c\u9762\u7aef\u5217\u5bbd (\u517112\u5217)",          "options": [            { "value": "3", "label": "3\u5217 (1\/4\u5bbd)" },            { "value": "4", "label": "4\u5217 (1\/3\u5bbd)" }          ],          "default": "3"        },        {          "type": "select",          "id": "theme",          "label": "\u5361\u7247\u5e95\u8272",          "options": [            { "value": "lime", "label": "\u7535\u5149\u9752\u67e0\u7eff (\u7528\u4e8e01\u4e3b\u63a8\u9879)" },            { "value": "dark", "label": "\u6df1\u70ad\u9ed1 (\u7528\u4e8e02-04\u5e38\u89c4\u9879)" },            { "value": "deep-green", "label": "\u6df1\u68ee\u6797\u7eff" }          ],          "default": "dark"        },        {          "type": "text",          "id": "step_number",          "label": "\u7f16\u53f7",          "default": "01"        },        {          "type": "text",          "id": "title",          "label": "\u6b65\u9aa4\/\u670d\u52a1\u6807\u9898",          "default": "Discover & Spec Audit"        },        {          "type": "textarea",          "id": "description",          "label": "\u6b65\u9aa4\u8bf4\u660e",          "default": "We match power, port, and mounting specs to your exact workspace before shipping."        }      ]    },    {      "type": "cta_call_card",      "name": "\u9009\u578b\u54a8\u8be2\u884c\u52a8\u5361 (CTA)",      "settings": [        {          "type": "select",          "id": "col_span",          "label": "\u684c\u9762\u7aef\u5217\u5bbd (\u517112\u5217)",          "options": [            { "value": "4", "label": "4\u5217 (1\/3\u5bbd)" },            { "value": "6", "label": "6\u5217 (1\/2\u5bbd)" },            { "value": "8", "label": "8\u5217 (2\/3\u5bbd)" }          ],          "default": "4"        },        {          "type": "select",          "id": "theme",          "label": "\u5361\u7247\u5e95\u8272",          "options": [            { "value": "dark", "label": "\u6df1\u70ad\u9ed1 (Dark)" },            { "value": "deep-green", "label": "\u6df1\u68ee\u6797\u7eff (Deep Green)" },            { "value": "mint", "label": "\u9f20\u5c3e\u8349\u6d45\u7eff (Mint)" }          ],          "default": "dark"        },        {          "type": "text",          "id": "badge",          "label": "\u9876\u90e8\u6807\u7b7e",          "default": "→ STRATEGY CALL"        },        {          "type": "text",          "id": "title",          "label": "\u884c\u52a8\u6807\u9898",          "default": "Book an Engineering Intro Call"        },        {          "type": "textarea",          "id": "description",          "label": "\u8bf4\u660e\u6587\u6848",          "default": "Not sure which configuration fits your fleet? Talk directly with our product engineers."        },        {          "type": "text",          "id": "button_label",          "label": "\u6309\u94ae\u6587\u5b57",          "default": "Schedule 15-Min Call"        },        {          "type": "url",          "id": "button_link",          "label": "\u6309\u94ae\u8df3\u8f6c\u94fe\u63a5 (\u5982 Calendly \u6216\u8be2\u76d8\u9875)"        }      ]    }  ],  "presets": [    {      "name": "Volenta \u6697\u9ed1 Bento \u77e9\u9635",      "blocks": [        { "type": "stat_card", "settings": { "col_span": "4", "theme": "deep-green", "badge": "Performance", "metric": "+63%", "title": "Traffic & Output Growth" } },        { "type": "testimonial_card", "settings": { "col_span": "4", "theme": "lime" } },        { "type": "cta_call_card", "settings": { "col_span": "4", "theme": "dark" } },        { "type": "numbered_step", "settings": { "col_span": "3", "theme": "lime", "step_number": "01", "title": "01 Discover" } },        { "type": "numbered_step", "settings": { "col_span": "3", "theme": "dark", "step_number": "02", "title": "02 Strategize" } },        { "type": "numbered_step", "settings": { "col_span": "3", "theme": "dark", "step_number": "03", "title": "03 Execute" } },        { "type": "numbered_step", "settings": { "col_span": "3", "theme": "dark", "step_number": "04", "title": "04 Optimize" } }      ]    }  ]}{% endschema %}<\/code><\/pre>\n<\/details>\n
6. Decide whether this approach fits the store<\/h2>\n
This visual language can be useful when a purchase depends on technical understanding or business confidence. It can organise equipment evidence, implementation details and a complex enquiry journey. It should not be applied solely because a dark page looks more advanced.<\/p>\n
Three decisions matter before launch. First, use accent colour consistently rather than filling every card with it. Second, replace every metric, testimonial and certification placeholder with an evidenced statement. Third, route the visitor according to the actual buying process and product state, not an arbitrary price threshold.<\/p>\n
The design opportunity is to connect a recognisable brand presentation with a usable purchasing or enquiry workflow. The theme structure, content model and interaction handling have to support that connection after the original designer has handed the site over.<\/p>\n
Source: Volenta \u2014 SquidX Agency \/ Saber Ali on Behance<\/a>. UI illustrations are attributed to the original project.<\/p>","protected":false},"excerpt":{"rendered":"
A Volenta UI case study: colour hierarchy, evidence cards and editable Shopify Sections.<\/p>","protected":false},"author":1,"featured_media":10928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[27,4],"class_list":["post-10944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify-dtc","tag-analytics","tag-shopify"],"yoast_head":"\nVolenta\u2019s B2B website, translated into a Shopify design system<\/title>\n<meta name=\"description\" content=\"Volenta\u2019s B2B website, translated into a Shopify design system\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Volenta\u2019s B2B website, translated into a Shopify design system\" \/>\n<meta property=\"og:description\" content=\"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-09T09:06:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1488\" \/>\n\t<meta property=\"og:image:height\" content=\"1078\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"weswoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"weswoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/\"},\"author\":{\"name\":\"weswoo\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\"},\"headline\":\"Volenta\u2019s B2B website, translated into a Shopify design system\",\"datePublished\":\"2026-11-09T09:06:05+00:00\",\"dateModified\":\"2026-11-09T09:06:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/\"},\"wordCount\":1712,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg\",\"keywords\":[\"Analytics\",\"Shopify\"],\"articleSection\":[\"Shopify\u72ec\u7acb\u7ad9\u6307\u5357\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/\",\"url\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/\",\"name\":\"Volenta\u2019s B2B website, translated into a Shopify design system\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg\",\"datePublished\":\"2026-11-09T09:06:05+00:00\",\"dateModified\":\"2026-11-09T09:06:05+00:00\",\"description\":\"Volenta\u2019s B2B website, translated into a Shopify design system\",\"breadcrumb\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#primaryimage\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg\",\"width\":1488,\"height\":1078,\"caption\":\"\u6697\u8272\u9996\u5c4f\u4e0e\u4e3b\u884c\u52a8\u6309\u94ae\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.weswoo.com\/cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Volenta\u2019s B2B website, translated into a Shopify design system\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\",\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"name\":\"WESWOO\",\"description\":\"WESWOO \u4e13\u6ce8 Shopify Plus \u4e0e\u72ec\u7acb\u7ad9\u5b9a\u5236\u5f00\u53d1\uff0c\u63d0\u4f9b\u9ad8\u6027\u80fd\u7535\u5546\u7f51\u7ad9\u5efa\u8bbe\u3001\u8de8\u5883\u8fd0\u8425\u652f\u6301\u3001B2B \u53ca\u591a\u6e20\u9053\u96c6\u6210\uff0c\u52a9\u529b\u54c1\u724c\u5168\u7403\u589e\u957f\u3002\",\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"alternateName\":\"WESWOO.COM\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.weswoo.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\",\"name\":\"WESWOO\",\"alternateName\":[\"WESWOO - Shopify Premier Partner\",\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"Xiximu (Shenzhen) Technology Co., Ltd.\"],\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"width\":1280,\"height\":1024,\"caption\":\"WESWOO \u2014 Shopify cross-border ecommerce development specialist\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\"},\"description\":\"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.\",\"email\":\"info@weswoo.com\",\"telephone\":\"+86 18688202145\",\"legalName\":\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"foundingDate\":\"2021-04-26\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"11\",\"maxValue\":\"50\"},\"address\":[{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4\",\"addressLocality\":\"\u9999\u6e2f\",\"addressCountry\":\"HK\"},{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A\",\"addressLocality\":\"\u6df1\u5733\u5e02\",\"addressRegion\":\"\u5e7f\u4e1c\u7701\",\"addressCountry\":\"CN\"}],\"sameAs\":[\"https:\/\/www.shopify.com\/partners\/directory\/partner\/10395\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\",\"name\":\"weswoo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"caption\":\"weswoo\"},\"description\":\"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002\",\"sameAs\":[\"https:\/\/weswoo.com\"],\"url\":\"https:\/\/www.weswoo.com\/en\/author\/weswoo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Volenta\u2019s B2B website, translated into a Shopify design system","description":"Volenta\u2019s B2B website, translated into a Shopify design system","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/","og_locale":"en_US","og_type":"article","og_title":"Volenta\u2019s B2B website, translated into a Shopify design system","og_description":"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","og_url":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/","og_site_name":"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO","article_published_time":"2026-11-09T09:06:05+00:00","og_image":[{"width":1488,"height":1078,"url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg","type":"image\/jpeg"}],"author":"weswoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"weswoo","Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#article","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/"},"author":{"name":"weswoo","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642"},"headline":"Volenta\u2019s B2B website, translated into a Shopify design system","datePublished":"2026-11-09T09:06:05+00:00","dateModified":"2026-11-09T09:06:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/"},"wordCount":1712,"commentCount":0,"publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg","keywords":["Analytics","Shopify"],"articleSection":["Shopify\u72ec\u7acb\u7ad9\u6307\u5357"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/","url":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/","name":"Volenta\u2019s B2B website, translated into a Shopify design system","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#primaryimage"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg","datePublished":"2026-11-09T09:06:05+00:00","dateModified":"2026-11-09T09:06:05+00:00","description":"Volenta\u2019s B2B website, translated into a Shopify design system","breadcrumb":{"@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#primaryimage","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/01-hero-ui.jpg","width":1488,"height":1078,"caption":"\u6697\u8272\u9996\u5c4f\u4e0e\u4e3b\u884c\u52a8\u6309\u94ae"},{"@type":"BreadcrumbList","@id":"https:\/\/www.weswoo.com\/en\/volenta-b2b-shopify-dark-bento-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.weswoo.com\/cn\/"},{"@type":"ListItem","position":2,"name":"Volenta\u2019s B2B website, translated into a Shopify design system"}]},{"@type":"WebSite","@id":"https:\/\/www.weswoo.com\/en\/#website","url":"https:\/\/www.weswoo.com\/en\/","name":"WESWOO","description":"WESWOO specializes in Shopify Plus and standalone custom development, providing high-performance e-commerce website development, cross-border operations support, B2B and multi-channel integration to help brands grow globally.","publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"alternateName":"WESWOO.COM","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.weswoo.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.weswoo.com\/en\/#organization","name":"WESWOO","alternateName":["WESWOO - Shopify Premier Partner","\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","Xiximu (Shenzhen) Technology Co., Ltd."],"url":"https:\/\/www.weswoo.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","width":1280,"height":1024,"caption":"WESWOO \u2014 Shopify cross-border ecommerce development specialist"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/"},"description":"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.","email":"info@weswoo.com","telephone":"+86 18688202145","legalName":"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","foundingDate":"2021-04-26","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"11","maxValue":"50"},"address":[{"@type":"PostalAddress","streetAddress":"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4","addressLocality":"\u9999\u6e2f","addressCountry":"HK"},{"@type":"PostalAddress","streetAddress":"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A","addressLocality":"\u6df1\u5733\u5e02","addressRegion":"\u5e7f\u4e1c\u7701","addressCountry":"CN"}],"sameAs":["https:\/\/www.shopify.com\/partners\/directory\/partner\/10395"]},{"@type":"Person","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642","name":"weswoo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","caption":"weswoo"},"description":"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002","sameAs":["https:\/\/weswoo.com"],"url":"https:\/\/www.weswoo.com\/en\/author\/weswoo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/comments?post=10944"}],"version-history":[{"count":0,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10944\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media\/10928"}],"wp:attachment":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media?parent=10944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/categories?post=10944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/tags?post=10944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}