{"id":10950,"date":"2026-11-10T06:59:00","date_gmt":"2026-11-09T22:59:00","guid":{"rendered":"https:\/\/www.weswoo.com\/?p=10950"},"modified":"2026-11-09T23:23:04","modified_gmt":"2026-11-09T15:23:04","slug":"born-agency-shopify-dual-view-lookbook","status":"publish","type":"post","link":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/","title":{"rendered":"Building a dual-view Shopify lookbook from the Born Agency case"},"content":{"rendered":"<p>Campaign imagery can define the identity of a streetwear, eyewear, beauty, accessories, or camera brand. A standard four-column Shopify grid can flatten that identity.<\/p>\n<p>The two usual shopping paths leave a gap. A lookbook can be hard to shop directly, while a collection page can lose the visual character that drew the buyer in.<\/p>\n<p>Ukrainian design studio <strong>BY.SHIVA STUDIO<\/strong>, with Polina Prykhodko and Oleksandr BY.SHIVA, addresses that tension in <a href=\"https:\/\/www.behance.net\/gallery\/253585571\/Born-Agency-Creative-Studio-Website\">Born Agency | Creative Studio Website<\/a>. Its brief asks for a custom visual approach with a monochrome base and strong accents, letting the imagery set the tone from the first scroll.<\/p>\n<p>Two other public projects help frame the comparison.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.behance.net\/gallery\/253524325\/NM-Art-Design\">NM Art &amp; Design<\/a> uses warm greys and generous negative space to give objects the attention they would receive in a gallery.<\/li>\n<li><a href=\"https:\/\/www.behance.net\/gallery\/257575037\/Volenta-B2B-Design-Agency-Website-Brand-Identity\">Volenta<\/a> uses a dark B2B layout with Bento cards that make metrics easy to scan.<\/li>\n<li>Born Agency combines viewfinder marks, mixed typography, saturated gradients, and a <code>CAROUSEL \/ GALLERY<\/code> toggle. The visitor can look through large images or filter a grid within the same interface.<\/li>\n<\/ul>\n<p>The following sections examine four design decisions and show how to translate them into a Shopify Online Store 2.0 theme, including the complete reference section.<\/p>\n<h2>1. Four design decisions in the Born Agency case<\/h2>\n<h3>Colour system \u2014 carbon black with lime and magenta accents<\/h3>\n<p>Born Agency starts from carbon black, <code>#1C1C1C<\/code>, rather than a pure black <code>#000000<\/code> canvas. The darkroom-like base supports two separate gradients.<\/p>\n<ul>\n<li><strong>Background and cards.<\/strong> Carbon black <code>#1C1C1C<\/code> with a 1px translucent white line, <code>rgba(255, 255, 255, 0.12)<\/code>, creates an exposed hairline grid.<\/li>\n<li><strong>Primary action.<\/strong> Electric lime runs from <code>#5AFE41<\/code> to <code>#EBF61D<\/code>. It highlights actions such as the circular <code>CONTACT US \u2197<\/code> button, the footer&#8217;s project inquiry panel, and active filters.<\/li>\n<li><strong>Atmosphere and navigation.<\/strong> Magenta runs from <code>#FF0046<\/code> to <code>#FF006A<\/code>. The fullscreen menu uses it behind large vertical links for Home, Projects, Services, About, and Contact. It also appears as a red glow in the team portraits.<\/li>\n<li><strong>Main text.<\/strong> Pure white <code>#FFFFFF<\/code> gives the dark canvas strong contrast.<\/li>\n<\/ul>\n<figure><img decoding=\"async\" src=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance.png\" alt=\"Born Agency project opening, with magenta against black and white. Source: BY.SHIVA STUDIO \/ Behance.\" loading=\"lazy\" style=\"display:block;width:100%;height:auto\"><figcaption>Born Agency project opening, with magenta against black and white. Source: BY.SHIVA STUDIO \/ Behance. <a href=\"https:\/\/www.behance.net\/gallery\/253585571\/Born-Agency-Creative-Studio-Website\/modules\/1474268571\">Project image<\/a><\/figcaption><\/figure>\n<p>For a Shopify implementation, start with the product images. Keep most of the browse area carbon black and white so the campaign colours can carry it. Reserve magenta for the full-screen menu and collection navigation, and keep lime for circular <code>Shop Now \u2197<\/code> and <code>Add to Bag \u2197<\/code> actions.<\/p>\n<h3>Hero and imagery \u2014 use a viewfinder to label a detail<\/h3>\n<p>On the hero and selected work images, the project puts crosshairs and right-angle viewfinder corners around the subject. Small uppercase labels sit beside the frame, including <code>TAILORED TO YOUR REQUEST<\/code>, <code>ATTENTION TO DETAIL<\/code>, and <code>REAL TEAM WITHOUT AI AGENTS<\/code>.<\/p>\n<p>A Shopify lookbook can give its hotspots the same job. On a hero or campaign image:<\/p>\n<ol>\n<li>Use CSS corners to frame a detail such as the sunglasses a model is wearing, the bag they are holding, or the keyboard on a desk.<\/li>\n<li>Put the material, feature, or price next to the frame, for example <code>TITANIUM FRAME \u00b7 $240 \u2197<\/code>.<\/li>\n<li>Connect the hotspot to the relevant product&#8217;s Quick Add Drawer if the theme supports that flow.<\/li>\n<\/ol>\n<h3>Brand typography \u2014 combine typefaces and small inline images<\/h3>\n<p>The project\u2019s brand statement uses several editorial techniques.<\/p>\n<ul>\n<li><strong>Change typeface within a sentence.<\/strong> Extra-bold geometric sans-serif carries the main words. A high-contrast italic serif marks an emphasis or a turn in the sentence.<\/li>\n<li><strong>Place a small image capsule inside a line.<\/strong> A rounded image or looping texture close to the text height lets the reader shift from words to material details.<\/li>\n<li><strong>Use a circular text badge.<\/strong> A phrase such as <code>CREATE \u00b7 DOMINATE \u00b7 CREATE \u00b7 DOMINATE<\/code> runs around a rotating badge in a corner of the page.<\/li>\n<\/ul>\n<h3>Product and portfolio browsing \u2014 two views with a shared filter bar<\/h3>\n<p>The <code>PROJECTS<\/code> page has two levels of navigation. The control on the right switches between the large horizontal <code>CAROUSEL<\/code> and the multi-column <code>GALLERY<\/code>. The filter bar divides browsing into four decisions.<\/p>\n<ul>\n<li><strong>Sort By.<\/strong> No Filter \/ Latest \/ Popular \/ Featured<\/li>\n<li><strong>Content Type.<\/strong> All \/ Photo \/ Video \/ Motion<\/li>\n<li><strong>Industry.<\/strong> All \/ Fashion \/ Beauty \/ Food &amp; Beverage \/ Tech \/ Automotive \/ Lifestyle<\/li>\n<li><strong>Style.<\/strong> All \/ Minimal \/ Bold \/ Editorial \/ Surreal \/ Cinematic \/ Abstract<\/li>\n<\/ul>\n<p>On detail pages such as <code>SMITH<\/code> and <code>FLORA<\/code>, a fine-line grid puts About, Fields, Tasks, Platforms, Services, Duration, and Team on the left, alongside a large image carousel.<\/p>\n<div style=\"margin:24px 0;overflow-x:auto\" tabindex=\"0\">\n<table style=\"border-collapse:collapse;width:100%;min-width:560px\">\n<thead>\n<tr>\n<th style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Born Agency pattern<\/th>\n<th style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Problem it addresses<\/th>\n<th style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Equivalent for a Shopify store<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><strong>CAROUSEL versus GALLERY<\/strong><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">New visitors want to feel the campaign through large images. Shoppers with a product in mind want to scan a grid.<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Let the same collection switch between a campaign carousel and a three-column shopping grid in place.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><strong>Filter by Minimal, Bold, or Editorial<\/strong><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Product categories alone can make it hard to browse by aesthetic.<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Add a <code>Style<\/code> product metafield alongside category filters. Use it to group styles such as minimalist everyday wear, runway pieces, or technical outerwear.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><strong>Fine-line specifications on SMITH and FLORA<\/strong><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">A visual page can hide details a shopper needs before buying.<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Put fit, weight, fabric, origin, and model size in a structured grid on the product page.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2>2. Implement the visual system in a Shopify theme<\/h2>\n<p>The reference uses three pieces that can live in a Shopify Online Store 2.0 theme.<\/p>\n<h3>1. Set the palette, gradients, and mixed typography<\/h3>\n<p>Define the carbon black and both gradients in <code>assets\/base.css<\/code>. The same file can supply classes for the bold sans-serif and italic serif combination and the inline image capsule.<\/p>\n<pre style=\"max-height:32rem;overflow:auto;white-space:pre;padding:16px;background:#f5f6f4\"><code class=\"language-css\">:root {\r\n  \/* Born Agency \u6838\u5fc3\u8272\u677f *\/\r\n  --born-black: #1C1C1C;\r\n  --born-surface: #242424;\r\n  --born-white: #FFFFFF;\r\n  --born-muted: rgba(255, 255, 255, 0.62);\r\n  --born-grid-line: rgba(255, 255, 255, 0.14);\r\n\r\n  \/* \u53cc\u8272\u9ad8\u9971\u548c\u6e10\u53d8 *\/\r\n  --born-grad-green: linear-gradient(135deg, #5AFE41 0%, #EBF61D 100%);\r\n  --born-grad-pink: linear-gradient(135deg, #FF0046 0%, #FF006A 100%);\r\n\r\n  \/* \u5b57\u4f53\u7ec4\u5408\uff1a\u5bbd\u4f53\u7c97\u65e0\u886c\u7ebf + \u9ad8\u5bf9\u6bd4\u886c\u7ebf *\/\r\n  --born-font-sans: 'Syne', 'Helvetica Neue', Arial, sans-serif;\r\n  --born-font-serif: 'Playfair Display', 'Instrument Serif', Georgia, serif;\r\n}\r\n\r\n\/* \u6df7\u6392\u6807\u9898\u4e2d\u7684\u659c\u4f53\u886c\u7ebf\u5f3a\u8c03\u8bcd *\/\r\n.born-editorial-serif {\r\n  font-family: var(--born-font-serif);\r\n  font-style: italic;\r\n  font-weight: 400;\r\n  padding: 0 0.15em;\r\n}\r\n\r\n\/* \u884c\u5185\u5fae\u7f29\u80f6\u56ca\u56fe\uff08Inline Image Pill\uff09 *\/\r\n.born-inline-pill {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  width: 2.4em;\r\n  height: 1.15em;\r\n  border-radius: 999px;\r\n  object-fit: cover;\r\n  margin: 0 0.2em;\r\n  border: 1px solid var(--born-grid-line);\r\n}\r\n<\/code><\/pre>\n<h3>2. Draw the circular action and viewfinder corners<\/h3>\n<p>The circular <code>CONTACT US \u2197<\/code> action and the four viewfinder corners can be drawn with CSS and pseudo-elements. The corner marks need no separate image assets.<\/p>\n<pre style=\"max-height:32rem;overflow:auto;white-space:pre;padding:16px;background:#f5f6f4\"><code class=\"language-css\">\/* \u6b63\u5706\u5f62\u7535\u5149\u7eff\u6e10\u53d8\u4e3b\u6309\u94ae *\/\r\n.born-circle-cta {\r\n  width: 116px;\r\n  height: 116px;\r\n  border-radius: 50%;\r\n  background: var(--born-grad-green);\r\n  color: #1C1C1C;\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  font-family: var(--born-font-sans);\r\n  font-size: 0.75rem;\r\n  font-weight: 800;\r\n  letter-spacing: 0.06em;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n.born-circle-cta:hover {\r\n  transform: scale(1.06) rotate(4deg);\r\n}\r\n\r\n\/* \u76f8\u673a\u53d6\u666f\u6846\u56db\u89d2\u51c6\u661f\u5bb9\u5668 *\/\r\n.born-viewfinder-box {\r\n  position: relative;\r\n  padding: 10px 14px;\r\n  background: rgba(28, 28, 28, 0.72);\r\n  backdrop-filter: blur(6px);\r\n  color: #FFFFFF;\r\n  font-size: 0.75rem;\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n}\r\n.born-viewfinder-box::before,\r\n.born-viewfinder-box::after {\r\n  content: &quot;&quot;;\r\n  position: absolute;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-color: #5AFE41;\r\n  border-style: solid;\r\n}\r\n.born-viewfinder-box::before {\r\n  top: 0; left: 0;\r\n  border-width: 1.5px 0 0 1.5px;\r\n}\r\n.born-viewfinder-box::after {\r\n  bottom: 0; right: 0;\r\n  border-width: 0 1.5px 1.5px 0;\r\n}\r\n<\/code><\/pre>\n<h3>3. Add the complete dual-view section<\/h3>\n<p>The example combines an inline-image statement, a no-reload <code>CAROUSEL \/ GALLERY<\/code> switch, and product cards with viewfinder labels and a circular action.<\/p>\n<p>Save it as <code>sections\/born-editorial-showcase.liquid<\/code>. In the theme editor, select a product for each product block you want to display. Check the default view, the style tags, and both image states with real product data before adding the section to the live theme. A purchase drawer requires the theme&#8217;s own drawer integration.<\/p>\n<pre style=\"max-height:32rem;overflow:auto;white-space:pre;padding:16px;background:#f5f6f4\"><code class=\"language-liquid\">{%- comment -%}\r\n  \u6587\u4ef6\uff1asections\/born-editorial-showcase.liquid\r\n  \u8bbe\u8ba1\u53c2\u8003\uff1aBorn Agency | Creative Studio Website (by BY.SHIVA STUDIO)\r\n  \u529f\u80fd\uff1a\u6697\u9ed1\u5148\u950b\u6742\u5fd7\u98ce Showcase\uff0c\u652f\u6301 CAROUSEL \/ GALLERY \u53cc\u89c6\u56fe\u5207\u6362\u3001\u76f8\u673a\u53d6\u666f\u6846\u5356\u70b9\u89d2\u6807\u4e0e\u7535\u5149\u7eff\u5706\u5f62 CTA\r\n{%- endcomment -%}\r\n\r\n&lt;style&gt;\r\n  .born-sec-{{ section.id }} {\r\n    background-color: #1C1C1C;\r\n    color: #FFFFFF;\r\n    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.14);\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.14);\r\n  }\r\n  .born-wrap {\r\n    max-width: 1360px;\r\n    margin: 0 auto;\r\n    padding: 0 24px;\r\n  }\r\n\r\n  \/* \u9876\u90e8\u5143\u6570\u636e\u6761 *\/\r\n  .born-meta-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding-bottom: 20px;\r\n    margin-bottom: 36px;\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.14);\r\n    font-size: 0.75rem;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    color: rgba(255, 255, 255, 0.65);\r\n  }\r\n\r\n  \/* \u6df7\u6392\u5927\u6807\u9898\u4e0e\u5706\u5f62\u6309\u94ae\u533a *\/\r\n  .born-hero-row {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n    align-items: flex-end;\r\n    gap: 32px;\r\n    margin-bottom: 48px;\r\n  }\r\n  .born-display-title {\r\n    font-size: clamp(2.25rem, 5vw, 4.25rem);\r\n    font-weight: 800;\r\n    line-height: 1.04;\r\n    letter-spacing: -0.03em;\r\n    text-transform: uppercase;\r\n    margin: 0;\r\n    max-width: 880px;\r\n  }\r\n  .born-display-title em {\r\n    font-family: Georgia, 'Times New Roman', serif;\r\n    font-style: italic;\r\n    font-weight: 400;\r\n    text-transform: none;\r\n    color: #5AFE41;\r\n    padding: 0 6px;\r\n  }\r\n  .born-circle-btn {\r\n    width: 112px;\r\n    height: 112px;\r\n    border-radius: 50%;\r\n    background: linear-gradient(135deg, #5AFE41 0%, #EBF61D 100%);\r\n    color: #1C1C1C;\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 0.75rem;\r\n    font-weight: 800;\r\n    letter-spacing: 0.06em;\r\n    text-transform: uppercase;\r\n    text-decoration: none;\r\n    flex-shrink: 0;\r\n    transition: transform 0.25s ease;\r\n  }\r\n  .born-circle-btn:hover {\r\n    transform: scale(1.06);\r\n  }\r\n  .born-circle-btn span {\r\n    font-size: 1.125rem;\r\n    line-height: 1;\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  \/* \u5de5\u5177\u680f\uff1a\u98ce\u683c\u7b5b\u9009\u6807\u7b7e + CAROUSEL \/ GALLERY \u53cc\u89c6\u56fe\u5207\u6362\u5668 *\/\r\n  .born-toolbar {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 16px;\r\n    padding: 16px 0;\r\n    margin-bottom: 28px;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.14);\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.14);\r\n  }\r\n  .born-filter-Group {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n  }\r\n  .born-filter-btn {\r\n    background: transparent;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    padding: 7px 16px;\r\n    border-radius: 999px;\r\n    font-size: 0.75rem;\r\n    font-weight: 600;\r\n    letter-spacing: 0.06em;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease;\r\n  }\r\n  .born-filter-btn.is-active,\r\n  .born-filter-btn:hover {\r\n    background: linear-gradient(135deg, #5AFE41 0%, #EBF61D 100%);\r\n    color: #1C1C1C;\r\n    border-color: transparent;\r\n  }\r\n\r\n  .born-view-switcher {\r\n    display: inline-flex;\r\n    border: 1px solid rgba(255, 255, 255, 0.24);\r\n    border-radius: 999px;\r\n    overflow: hidden;\r\n  }\r\n  .born-view-btn {\r\n    background: transparent;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    border: none;\r\n    padding: 7px 16px;\r\n    font-size: 0.75rem;\r\n    font-weight: 700;\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n  }\r\n  .born-view-btn.is-active {\r\n    background: linear-gradient(135deg, #FF0046 0%, #FF006A 100%);\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  \/* \u5546\u54c1\u5c55\u793a\u5bb9\u5668\uff1a\u652f\u6301 GALLERY \u7f51\u683c\u4e0e CAROUSEL \u6a2a\u6ed1 *\/\r\n  .born-items-track[data-view=&quot;gallery&quot;] {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    border-left: 1px solid rgba(255, 255, 255, 0.14);\r\n    border-top: 1px solid rgba(255, 255, 255, 0.14);\r\n  }\r\n  @media screen and (max-width: 900px) {\r\n    .born-items-track[data-view=&quot;gallery&quot;] {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n  }\r\n  @media screen and (max-width: 600px) {\r\n    .born-items-track[data-view=&quot;gallery&quot;] {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n\r\n  .born-items-track[data-view=&quot;carousel&quot;] {\r\n    display: flex;\r\n    gap: 24px;\r\n    overflow-x: auto;\r\n    scroll-snap-type: x mandatory;\r\n    padding-bottom: 16px;\r\n  }\r\n  .born-items-track[data-view=&quot;carousel&quot;] .born-item-card {\r\n    min-width: min(440px, 82vw);\r\n    scroll-snap-align: start;\r\n    border: 1px solid rgba(255, 255, 255, 0.14);\r\n  }\r\n\r\n  \/* \u5355\u5f20\u5148\u950b\u5546\u54c1\/\u578b\u5f55\u5361 *\/\r\n  .born-item-card {\r\n    background: #1C1C1C;\r\n    border-right: 1px solid rgba(255, 255, 255, 0.14);\r\n    border-bottom: 1px solid rgba(255, 255, 255, 0.14);\r\n    padding: 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    position: relative;\r\n  }\r\n  .born-item-card[hidden] {\r\n    display: none !important;\r\n  }\r\n  .born-media-box {\r\n    position: relative;\r\n    aspect-ratio: 4 \/ 5;\r\n    background: #262626;\r\n    overflow: hidden;\r\n    margin-bottom: 18px;\r\n  }\r\n  .born-media-box img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transition: transform 0.4s ease;\r\n  }\r\n  .born-item-card:hover .born-media-box img {\r\n    transform: scale(1.04);\r\n  }\r\n\r\n  \/* \u76f8\u673a\u53d6\u666f\u6846 HUD \u60ac\u6d6e\u6807\u7b7e *\/\r\n  .born-hud-tag {\r\n    position: absolute;\r\n    bottom: 14px;\r\n    left: 14px;\r\n    padding: 6px 12px;\r\n    background: rgba(28, 28, 28, 0.78);\r\n    backdrop-filter: blur(4px);\r\n    font-size: 0.6875rem;\r\n    font-weight: 700;\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n    color: #FFFFFF;\r\n  }\r\n  .born-hud-tag::before,\r\n  .born-hud-tag::after {\r\n    content: &quot;&quot;;\r\n    position: absolute;\r\n    width: 7px;\r\n    height: 7px;\r\n    border-color: #5AFE41;\r\n    border-style: solid;\r\n  }\r\n  .born-hud-tag::before {\r\n    top: 0; left: 0;\r\n    border-width: 1.5px 0 0 1.5px;\r\n  }\r\n  .born-hud-tag::after {\r\n    bottom: 0; right: 0;\r\n    border-width: 0 1.5px 1.5px 0;\r\n  }\r\n\r\n  .born-card-footer {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-end;\r\n    gap: 12px;\r\n  }\r\n  .born-item-title {\r\n    font-size: 1.0625rem;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.02em;\r\n    margin: 0 0 4px;\r\n    color: #FFFFFF;\r\n    text-decoration: none;\r\n  }\r\n  .born-item-sub {\r\n    font-size: 0.75rem;\r\n    color: rgba(255, 255, 255, 0.58);\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.06em;\r\n    margin: 0;\r\n  }\r\n  .born-item-price {\r\n    font-size: 0.9375rem;\r\n    font-weight: 700;\r\n    color: #5AFE41;\r\n    white-space: nowrap;\r\n  }\r\n&lt;\/style&gt;\r\n\r\n&lt;section class=&quot;born-sec-{{ section.id }}&quot; data-section-id=&quot;{{ section.id }}&quot;&gt;\r\n  &lt;div class=&quot;born-wrap&quot;&gt;\r\n    &lt;div class=&quot;born-meta-bar&quot;&gt;\r\n      &lt;span&gt;{{ section.settings.meta_left }}&lt;\/span&gt;\r\n      &lt;span&gt;{{ section.settings.meta_right }}&lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=&quot;born-hero-row&quot;&gt;\r\n      &lt;h2 class=&quot;born-display-title&quot;&gt;\r\n        {{ section.settings.heading_prefix }}\r\n        &lt;em&gt;{{ section.settings.heading_serif_italic }}&lt;\/em&gt;\r\n        {{ section.settings.heading_suffix }}\r\n      &lt;\/h2&gt;\r\n      {%- if section.settings.cta_label != blank -%}\r\n        &lt;a href=&quot;{{ section.settings.cta_link | default: '#' }}&quot; class=&quot;born-circle-btn&quot;&gt;\r\n          &lt;span aria-hidden=&quot;true&quot;&gt;\u2197&lt;\/span&gt;\r\n          {{ section.settings.cta_label }}\r\n        &lt;\/a&gt;\r\n      {%- endif -%}\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=&quot;born-toolbar&quot;&gt;\r\n      &lt;div class=&quot;born-filter-group&quot; role=&quot;tablist&quot; aria-label=&quot;\u6309\u89c6\u89c9\u98ce\u683c\u7b5b\u9009&quot;&gt;\r\n        &lt;button type=&quot;button&quot; class=&quot;born-filter-btn is-active&quot; data-filter=&quot;all&quot;&gt;ALL&lt;\/button&gt;\r\n        &lt;button type=&quot;button&quot; class=&quot;born-filter-btn&quot; data-filter=&quot;editorial&quot;&gt;EDITORIAL&lt;\/button&gt;\r\n        &lt;button type=&quot;button&quot; class=&quot;born-filter-btn&quot; data-filter=&quot;bold&quot;&gt;BOLD&lt;\/button&gt;\r\n        &lt;button type=&quot;button&quot; class=&quot;born-filter-btn&quot; data-filter=&quot;minimal&quot;&gt;MINIMAL&lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div class=&quot;born-view-switcher&quot; role=&quot;group&quot; aria-label=&quot;\u5207\u6362\u6d4f\u89c8\u89c6\u56fe&quot;&gt;\r\n        &lt;button type=&quot;button&quot; class=&quot;born-view-btn is-active&quot; data-view-target=&quot;gallery&quot;&gt;GALLERY&lt;\/button&gt;\r\n        &lt;button type=&quot;button&quot; class=&quot;born-view-btn&quot; data-view-target=&quot;carousel&quot;&gt;CAROUSEL&lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=&quot;born-items-track&quot; id=&quot;BornTrack-{{ section.id }}&quot; data-view=&quot;{{ section.settings.default_view }}&quot;&gt;\r\n      {%- for block in section.blocks -%}\r\n        {%- assign product = block.settings.product -%}\r\n        &lt;article\r\n          class=&quot;born-item-card&quot;\r\n          data-style-tag=&quot;{{ block.settings.style_category | downcase }}&quot;\r\n          {{ block.shopify_attributes }}\r\n        &gt;\r\n          &lt;a href=&quot;{{ product.url | default: '#' }}&quot; class=&quot;born-media-box&quot; style=&quot;display:block;&quot;&gt;\r\n            {%- if block.settings.custom_image != blank -%}\r\n              &lt;img\r\n                src=&quot;{{ block.settings.custom_image | image_url: width: 900 }}&quot;\r\n                alt=&quot;{{ block.settings.custom_title | default: product.title | escape }}&quot;\r\n                width=&quot;900&quot;\r\n                height=&quot;1125&quot;\r\n                loading=&quot;lazy&quot;\r\n              &gt;\r\n            {%- elsif product != blank and product.featured_image != blank -%}\r\n              &lt;img\r\n                src=&quot;{{ product.featured_image | image_url: width: 900 }}&quot;\r\n                alt=&quot;{{ product.title | escape }}&quot;\r\n                width=&quot;900&quot;\r\n                height=&quot;1125&quot;\r\n                loading=&quot;lazy&quot;\r\n              &gt;\r\n            {%- endif -%}\r\n            {%- if block.settings.viewfinder_note != blank -%}\r\n              &lt;span class=&quot;born-hud-tag&quot;&gt;{{ block.settings.viewfinder_note }}&lt;\/span&gt;\r\n            {%- endif -%}\r\n          &lt;\/a&gt;\r\n\r\n          &lt;div class=&quot;born-card-footer&quot;&gt;\r\n            &lt;div&gt;\r\n              &lt;h3 class=&quot;born-item-title&quot;&gt;\r\n                &lt;a href=&quot;{{ product.url | default: '#' }}&quot; style=&quot;color:inherit;text-decoration:none;&quot;&gt;\r\n                  {{ block.settings.custom_title | default: product.title | default: 'CONCEPT EDITION 01' }}\r\n                &lt;\/a&gt;\r\n              &lt;\/h3&gt;\r\n              &lt;p class=&quot;born-item-sub&quot;&gt;{{ block.settings.style_category | upcase }} \u00b7 {{ block.settings.spec_note }}&lt;\/p&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=&quot;born-item-price&quot;&gt;\r\n              {%- if product != blank -%}\r\n                {{ product.price | money }}\r\n              {%- else -%}\r\n                {{ block.settings.fallback_price }}\r\n              {%- endif -%}\r\n            &lt;\/div&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/article&gt;\r\n      {%- endfor -%}\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n\r\n&lt;script&gt;\r\n  (function() {\r\n    var sec = document.querySelector('.born-sec-{{ section.id }}');\r\n    if (!sec) return;\r\n    var track = sec.querySelector('#BornTrack-{{ section.id }}');\r\n    var viewBtns = sec.querySelectorAll('[data-view-target]');\r\n    var filterBtns = sec.querySelectorAll('[data-filter]');\r\n    var cards = sec.querySelectorAll('.born-item-card');\r\n\r\n    viewBtns.forEach(function(btn) {\r\n      btn.addEventListener('click', function() {\r\n        var targetView = btn.getAttribute('data-view-target');\r\n        track.setAttribute('data-view', targetView);\r\n        viewBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });\r\n      });\r\n    });\r\n\r\n    filterBtns.forEach(function(btn) {\r\n      btn.addEventListener('click', function() {\r\n        var tag = btn.getAttribute('data-filter');\r\n        filterBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });\r\n        cards.forEach(function(card) {\r\n          var cardTag = card.getAttribute('data-style-tag');\r\n          if (tag === 'all' || cardTag === tag) {\r\n            card.removeAttribute('hidden');\r\n          } else {\r\n            card.setAttribute('hidden', 'hidden');\r\n          }\r\n        });\r\n      });\r\n    });\r\n  })();\r\n&lt;\/script&gt;\r\n\r\n{% schema %}\r\n{\r\n  &quot;name&quot;: &quot;Born \u6697\u9ed1\u6742\u5fd7\u53cc\u89c6\u56fe\u753b\u5eca&quot;,\r\n  &quot;tag&quot;: &quot;section&quot;,\r\n  &quot;settings&quot;: [\r\n    {\r\n      &quot;type&quot;: &quot;text&quot;,\r\n      &quot;id&quot;: &quot;meta_left&quot;,\r\n      &quot;label&quot;: &quot;\u5de6\u4e0a\u89d2\u5143\u6570\u636e\u6807\u7b7e&quot;,\r\n      &quot;default&quot;: &quot;COLLECTION ARCHIVE \/\/ NO STOCK TEMPLATES&quot;\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;text&quot;,\r\n      &quot;id&quot;: &quot;meta_right&quot;,\r\n      &quot;label&quot;: &quot;\u53f3\u4e0a\u89d2\u5143\u6570\u636e\u6807\u7b7e&quot;,\r\n      &quot;default&quot;: &quot;TAILORED TO YOUR REQUEST&quot;\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;text&quot;,\r\n      &quot;id&quot;: &quot;heading_prefix&quot;,\r\n      &quot;label&quot;: &quot;\u4e3b\u6807\u9898\u524d\u6bb5\uff08\u7c97\u4f53\u65e0\u886c\u7ebf\uff09&quot;,\r\n      &quot;default&quot;: &quot;WHERE IMAGINATION&quot;\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;text&quot;,\r\n      &quot;id&quot;: &quot;heading_serif_italic&quot;,\r\n      &quot;label&quot;: &quot;\u4e3b\u6807\u9898\u4e2d\u6bb5\uff08\u659c\u4f53\u886c\u7ebf\u5f3a\u8c03\uff09&quot;,\r\n      &quot;default&quot;: &quot;replaces&quot;\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;text&quot;,\r\n      &quot;id&quot;: &quot;heading_suffix&quot;,\r\n      &quot;label&quot;: &quot;\u4e3b\u6807\u9898\u540e\u6bb5\uff08\u7c97\u4f53\u65e0\u886c\u7ebf\uff09&quot;,\r\n      &quot;default&quot;: &quot;ORDINARY CATALOGS&quot;\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;text&quot;,\r\n      &quot;id&quot;: &quot;cta_label&quot;,\r\n      &quot;label&quot;: &quot;\u5706\u5f62\u7535\u5149\u7eff\u6309\u94ae\u6587\u5b57&quot;,\r\n      &quot;default&quot;: &quot;EXPLORE ALL&quot;\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;url&quot;,\r\n      &quot;id&quot;: &quot;cta_link&quot;,\r\n      &quot;label&quot;: &quot;\u5706\u5f62\u6309\u94ae\u94fe\u63a5&quot;\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;select&quot;,\r\n      &quot;id&quot;: &quot;default_view&quot;,\r\n      &quot;label&quot;: &quot;\u9ed8\u8ba4\u5c55\u793a\u89c6\u56fe&quot;,\r\n      &quot;options&quot;: [\r\n        { &quot;value&quot;: &quot;gallery&quot;, &quot;label&quot;: &quot;GALLERY\uff08\u7ec6\u7ebf\u7f51\u683c\u89c6\u56fe\uff09&quot; },\r\n        { &quot;value&quot;: &quot;carousel&quot;, &quot;label&quot;: &quot;CAROUSEL\uff08\u5927\u7247\u6a2a\u6ed1\u89c6\u56fe\uff09&quot; }\r\n      ],\r\n      &quot;default&quot;: &quot;gallery&quot;\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;range&quot;,\r\n      &quot;id&quot;: &quot;padding_top&quot;,\r\n      &quot;min&quot;: 24,\r\n      &quot;max&quot;: 120,\r\n      &quot;step&quot;: 4,\r\n      &quot;unit&quot;: &quot;px&quot;,\r\n      &quot;label&quot;: &quot;\u9876\u90e8\u5185\u8fb9\u8ddd&quot;,\r\n      &quot;default&quot;: 64\r\n    },\r\n    {\r\n      &quot;type&quot;: &quot;range&quot;,\r\n      &quot;id&quot;: &quot;padding_bottom&quot;,\r\n      &quot;min&quot;: 24,\r\n      &quot;max&quot;: 120,\r\n      &quot;step&quot;: 4,\r\n      &quot;unit&quot;: &quot;px&quot;,\r\n      &quot;label&quot;: &quot;\u5e95\u90e8\u5185\u8fb9\u8ddd&quot;,\r\n      &quot;default&quot;: 64\r\n    }\r\n  ],\r\n  &quot;blocks&quot;: [\r\n    {\r\n      &quot;type&quot;: &quot;showcase_item&quot;,\r\n      &quot;name&quot;: &quot;\u5355\u54c1 \/ \u578b\u5f55\u5361\u7247&quot;,\r\n      &quot;settings&quot;: [\r\n        {\r\n          &quot;type&quot;: &quot;product&quot;,\r\n          &quot;id&quot;: &quot;product&quot;,\r\n          &quot;label&quot;: &quot;\u5173\u8054 Shopify \u5546\u54c1&quot;\r\n        },\r\n        {\r\n          &quot;type&quot;: &quot;image_picker&quot;,\r\n          &quot;id&quot;: &quot;custom_image&quot;,\r\n          &quot;label&quot;: &quot;\u81ea\u5b9a\u4e49\u578b\u5f55\u5927\u56fe\uff08\u53ef\u9009\uff0c\u8986\u76d6\u5546\u54c1\u4e3b\u56fe\uff09&quot;\r\n        },\r\n        {\r\n          &quot;type&quot;: &quot;text&quot;,\r\n          &quot;id&quot;: &quot;custom_title&quot;,\r\n          &quot;label&quot;: &quot;\u81ea\u5b9a\u4e49\u6807\u9898\uff08\u7559\u7a7a\u5219\u8bfb\u53d6\u5546\u54c1\u540d\uff09&quot;\r\n        },\r\n        {\r\n          &quot;type&quot;: &quot;select&quot;,\r\n          &quot;id&quot;: &quot;style_category&quot;,\r\n          &quot;label&quot;: &quot;\u6240\u5c5e\u89c6\u89c9\u98ce\u683c\uff08\u7528\u4e8e\u9876\u90e8\u7b5b\u9009\uff09&quot;,\r\n          &quot;options&quot;: [\r\n            { &quot;value&quot;: &quot;editorial&quot;, &quot;label&quot;: &quot;Editorial&quot; },\r\n            { &quot;value&quot;: &quot;bold&quot;, &quot;label&quot;: &quot;Bold&quot; },\r\n            { &quot;value&quot;: &quot;minimal&quot;, &quot;label&quot;: &quot;Minimal&quot; }\r\n          ],\r\n          &quot;default&quot;: &quot;editorial&quot;\r\n        },\r\n        {\r\n          &quot;type&quot;: &quot;text&quot;,\r\n          &quot;id&quot;: &quot;viewfinder_note&quot;,\r\n          &quot;label&quot;: &quot;\u56fe\u4e0a\u76f8\u673a\u53d6\u666f\u6846\u6807\u6ce8\uff08HUD Callout\uff09&quot;,\r\n          &quot;default&quot;: &quot;ATTENTION TO DETAIL&quot;\r\n        },\r\n        {\r\n          &quot;type&quot;: &quot;text&quot;,\r\n          &quot;id&quot;: &quot;spec_note&quot;,\r\n          &quot;label&quot;: &quot;\u5e95\u90e8\u7b80\u77ed\u89c4\u683c\u8bf4\u660e&quot;,\r\n          &quot;default&quot;: &quot;LIMITED DROP&quot;\r\n        },\r\n        {\r\n          &quot;type&quot;: &quot;text&quot;,\r\n          &quot;id&quot;: &quot;fallback_price&quot;,\r\n          &quot;label&quot;: &quot;\u672a\u7ed1\u5b9a\u5546\u54c1\u65f6\u7684\u793a\u4f8b\u4ef7\u683c&quot;,\r\n          &quot;default&quot;: &quot;$240&quot;\r\n        }\r\n      ]\r\n    }\r\n  ],\r\n  &quot;presets&quot;: [\r\n    {\r\n      &quot;name&quot;: &quot;Born \u6697\u9ed1\u6742\u5fd7\u53cc\u89c6\u56fe\u753b\u5eca&quot;,\r\n      &quot;blocks&quot;: [\r\n        { &quot;type&quot;: &quot;showcase_item&quot;, &quot;settings&quot;: { &quot;custom_title&quot;: &quot;SMITH \/\/ TITANIUM EYEWEAR&quot;, &quot;style_category&quot;: &quot;editorial&quot;, &quot;viewfinder_note&quot;: &quot;TAILORED TO YOUR REQUEST&quot;, &quot;spec_note&quot;: &quot;HANDCRAFTED ACETATE&quot; } },\r\n        { &quot;type&quot;: &quot;showcase_item&quot;, &quot;settings&quot;: { &quot;custom_title&quot;: &quot;FLORA \/\/ BOTANICAL ESSENCE&quot;, &quot;style_category&quot;: &quot;bold&quot;, &quot;viewfinder_note&quot;: &quot;ATTENTION TO DETAIL&quot;, &quot;spec_note&quot;: &quot;50ML EXTRAIT&quot; } },\r\n        { &quot;type&quot;: &quot;showcase_item&quot;, &quot;settings&quot;: { &quot;custom_title&quot;: &quot;KINETIC \/\/ MODULAR SHELL&quot;, &quot;style_category&quot;: &quot;minimal&quot;, &quot;viewfinder_note&quot;: &quot;3-LAYER GORE-TEX&quot;, &quot;spec_note&quot;: &quot;AW26 ARCHIVE&quot; } }\r\n      ]\r\n    }\r\n  ]\r\n}\r\n{% endschema %}\r\n<\/code><\/pre>\n<h2>3. Compare the three Shopify design approaches<\/h2>\n<div style=\"margin:24px 0;overflow-x:auto\" tabindex=\"0\">\n<table style=\"border-collapse:collapse;width:100%;min-width:560px\">\n<thead>\n<tr>\n<th style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Dimension<\/th>\n<th style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><a href=\"https:\/\/www.behance.net\/gallery\/253524325\/NM-Art-Design\">NM Art &amp; Design<\/a><\/th>\n<th style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><a href=\"https:\/\/www.behance.net\/gallery\/257575037\/Volenta-B2B-Design-Agency-Website-Brand-Identity\">Volenta<\/a><\/th>\n<th style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><a href=\"https:\/\/www.behance.net\/gallery\/253585571\/Born-Agency-Creative-Studio-Website\">Born Agency<\/a><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><strong>Palette<\/strong><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Black <code>#000000<\/code>, warm greys <code>#736E68<\/code> and <code>#A29A91<\/code>, with copper accents<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Matte black <code>#0B0D0C<\/code>, forest green <code>#182920<\/code>, and electric lime <code>#C6FF33<\/code><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Darkroom carbon <code>#1C1C1C<\/code>, lime gradient <code>#5AFE41 \u2192 #EBF61D<\/code>, and magenta <code>#FF0046 \u2192 #FF006A<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><strong>Typography<\/strong><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Architectural geometric capitals with restrained sans-serif body text<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Aeonik for the headings, Inter for utility text, and bracketed tags as signposts<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Extra-bold wide sans-serif mixed with high-contrast italic serif and inline image capsules<\/td>\n<\/tr>\n<tr>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><strong>Evidence and browsing<\/strong><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Generous negative space, artist credentials, and downloadable specifications<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">A 12-column Bento matrix and an <code>01\u201304<\/code> process. The <code>+63%<\/code> and <code>4X<\/code> figures appear in the design as examples<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Viewfinder labels, campaign imagery, and carousel and gallery views<\/td>\n<\/tr>\n<tr>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><strong>Primary action<\/strong><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><code>Add to Bag<\/code>, an <code>Enquire<\/code> drawer, and a <code>PRO<\/code> selection folder<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">A single lime action such as <code>Book a Call \u2197<\/code> or <code>Get Started \u2197<\/code><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">A circular <code>CONTACT US \u2197<\/code> action and filters for browsing by style<\/td>\n<\/tr>\n<tr>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\"><strong>Shopify fit<\/strong><\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Design furniture, lighting, ceramics, homewares, collectors&#8217; goods<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">3D printers, portable power, industrial equipment and tools, and custom B2B wholesale<\/td>\n<td style=\"padding:10px;border:1px solid #dde2df;vertical-align:top;text-align:left\">Fashion, eyewear, beauty, fragrance, gaming accessories, and photography equipment<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<figure><img decoding=\"async\" src=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/volenta-behance.png\" alt=\"Volenta results-area project image. Source: SquidX Agency \/ Behance.\" loading=\"lazy\" style=\"display:block;width:100%;height:auto\"><figcaption>Volenta results-area project image. Source: SquidX Agency \/ Behance. <a href=\"https:\/\/www.behance.net\/gallery\/257575037\/Volenta-B2B-Design-Agency-Website-Brand-Identity\/modules\/1504882391\">Project image<\/a><\/figcaption><\/figure>\n<p>The patterns can work together on the same store. A homepage or lookbook can use Born Agency&#8217;s hotspots and two views. A performance section can use a Volenta-style evidence matrix. On a detail page, a structured specification table, a PDF download, and a side drawer for enquiries can follow the NM Art &amp; Design approach.<\/p>","protected":false},"excerpt":{"rendered":"<p>A case study of Born Agency&#8217;s viewfinder cues, editorial typography, and a dual-view lookbook for Shopify, with the complete reference section.<\/p>","protected":false},"author":1,"featured_media":10947,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[259,4],"class_list":["post-10950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify-dtc","tag-api","tag-shopify"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.9 (Yoast SEO v24.0-RC1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building a dual-view Shopify lookbook from the Born Agency case<\/title>\n<meta name=\"description\" content=\"Building a dual-view Shopify lookbook from the Born Agency case\" \/>\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\/born-agency-shopify-dual-view-lookbook\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a dual-view Shopify lookbook from the Born Agency case\" \/>\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\/born-agency-shopify-dual-view-lookbook\/\" \/>\n<meta property=\"og:site_name\" content=\"Shopify Plus &amp; \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-09T22:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-09T15:23:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-1024x749.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"749\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/\"},\"author\":{\"name\":\"weswoo\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\"},\"headline\":\"Building a dual-view Shopify lookbook from the Born Agency case\",\"datePublished\":\"2026-11-09T22:59:00+00:00\",\"dateModified\":\"2026-11-09T15:23:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/\"},\"wordCount\":1191,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-scaled.png\",\"keywords\":[\"API\",\"Shopify\"],\"articleSection\":[\"Shopify\u72ec\u7acb\u7ad9\u6307\u5357\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/\",\"url\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/\",\"name\":\"Building a dual-view Shopify lookbook from the Born Agency case\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-scaled.png\",\"datePublished\":\"2026-11-09T22:59:00+00:00\",\"dateModified\":\"2026-11-09T15:23:04+00:00\",\"description\":\"Building a dual-view Shopify lookbook from the Born Agency case\",\"breadcrumb\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#primaryimage\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-scaled.png\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-scaled.png\",\"width\":2560,\"height\":1873,\"caption\":\"Born Agency project image by BY.SHIVA STUDIO \/ Behance.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.weswoo.com\/cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a dual-view Shopify lookbook from the Born Agency case\"}]},{\"@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":"Building a dual-view Shopify lookbook from the Born Agency case","description":"Building a dual-view Shopify lookbook from the Born Agency case","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\/born-agency-shopify-dual-view-lookbook\/","og_locale":"en_US","og_type":"article","og_title":"Building a dual-view Shopify lookbook from the Born Agency case","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\/born-agency-shopify-dual-view-lookbook\/","og_site_name":"Shopify Plus &amp; \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO","article_published_time":"2026-11-09T22:59:00+00:00","article_modified_time":"2026-11-09T15:23:04+00:00","og_image":[{"width":1024,"height":749,"url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-1024x749.png","type":"image\/png"}],"author":"weswoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"weswoo","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#article","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/"},"author":{"name":"weswoo","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642"},"headline":"Building a dual-view Shopify lookbook from the Born Agency case","datePublished":"2026-11-09T22:59:00+00:00","dateModified":"2026-11-09T15:23:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/"},"wordCount":1191,"commentCount":0,"publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-scaled.png","keywords":["API","Shopify"],"articleSection":["Shopify\u72ec\u7acb\u7ad9\u6307\u5357"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/","url":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/","name":"Building a dual-view Shopify lookbook from the Born Agency case","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#primaryimage"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-scaled.png","datePublished":"2026-11-09T22:59:00+00:00","dateModified":"2026-11-09T15:23:04+00:00","description":"Building a dual-view Shopify lookbook from the Born Agency case","breadcrumb":{"@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#primaryimage","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-scaled.png","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/born-agency-behance-scaled.png","width":2560,"height":1873,"caption":"Born Agency project image by BY.SHIVA STUDIO \/ Behance."},{"@type":"BreadcrumbList","@id":"https:\/\/www.weswoo.com\/en\/born-agency-shopify-dual-view-lookbook\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.weswoo.com\/cn\/"},{"@type":"ListItem","position":2,"name":"Building a dual-view Shopify lookbook from the Born Agency case"}]},{"@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\/10950","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=10950"}],"version-history":[{"count":0,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10950\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media\/10947"}],"wp:attachment":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media?parent=10950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/categories?post=10950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/tags?post=10950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}