Building a dual-view Shopify lookbook from the Born Agency case

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.

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.

Ukrainian design studio BY.SHIVA STUDIO, with Polina Prykhodko and Oleksandr BY.SHIVA, addresses that tension in Born Agency | Creative Studio Website. 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.

Two other public projects help frame the comparison.

• NM Art & Design uses warm greys and generous negative space to give objects the attention they would receive in a gallery.
• Volenta uses a dark B2B layout with Bento cards that make metrics easy to scan.
• Born Agency combines viewfinder marks, mixed typography, saturated gradients, and a CAROUSEL / GALLERY toggle. The visitor can look through large images or filter a grid within the same interface.

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.

1. Four design decisions in the Born Agency case

Colour system — carbon black with lime and magenta accents

Born Agency starts from carbon black, #1C1C1C, rather than a pure black #000000 canvas. The darkroom-like base supports two separate gradients.

• Background and cards. Carbon black #1C1C1C with a 1px translucent white line, rgba(255, 255, 255, 0.12), creates an exposed hairline grid.
• Primary action. Electric lime runs from #5AFE41 to #EBF61D. It highlights actions such as the circular CONTACT US ↗ button, the footer's project inquiry panel, and active filters.
• Atmosphere and navigation. Magenta runs from #FF0046 to #FF006A. 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.
• Main text. Pure white #FFFFFF gives the dark canvas strong contrast.

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 Shop Now ↗ and Add to Bag ↗ actions.

Hero and imagery — use a viewfinder to label a detail

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 TAILORED TO YOUR REQUEST, ATTENTION TO DETAIL, and REAL TEAM WITHOUT AI AGENTS.

A Shopify lookbook can give its hotspots the same job. On a hero or campaign image:

1. 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.
2. Put the material, feature, or price next to the frame, for example TITANIUM FRAME · $240 ↗.
3. Connect the hotspot to the relevant product's Quick Add Drawer if the theme supports that flow.

Brand typography — combine typefaces and small inline images

The project’s brand statement uses several editorial techniques.

• Change typeface within a sentence. Extra-bold geometric sans-serif carries the main words. A high-contrast italic serif marks an emphasis or a turn in the sentence.
• Place a small image capsule inside a line. A rounded image or looping texture close to the text height lets the reader shift from words to material details.
• Use a circular text badge. A phrase such as CREATE · DOMINATE · CREATE · DOMINATE runs around a rotating badge in a corner of the page.

Product and portfolio browsing — two views with a shared filter bar

The PROJECTS page has two levels of navigation. The control on the right switches between the large horizontal CAROUSEL and the multi-column GALLERY. The filter bar divides browsing into four decisions.

• Sort By. No Filter / Latest / Popular / Featured
• Content Type. All / Photo / Video / Motion
• Industry. All / Fashion / Beauty / Food & Beverage / Tech / Automotive / Lifestyle
• Style. All / Minimal / Bold / Editorial / Surreal / Cinematic / Abstract

On detail pages such as SMITH and FLORA, a fine-line grid puts About, Fields, Tasks, Platforms, Services, Duration, and Team on the left, alongside a large image carousel.

2. Implement the visual system in a Shopify theme

The reference uses three pieces that can live in a Shopify Online Store 2.0 theme.

1. Set the palette, gradients, and mixed typography

Define the carbon black and both gradients in assets/base.css. The same file can supply classes for the bold sans-serif and italic serif combination and the inline image capsule.

:root { /* Born Agency 核心色板 */ --born-black: #1C1C1C; --born-surface: #242424; --born-white: #FFFFFF; --born-muted: rgba(255, 255, 255, 0.62); --born-grid-line: rgba(255, 255, 255, 0.14); /* 双色高饱和渐变 */ --born-grad-green: linear-gradient(135deg, #5AFE41 0%, #EBF61D 100%); --born-grad-pink: linear-gradient(135deg, #FF0046 0%, #FF006A 100%); /* 字体组合：宽体粗无衬线 + 高对比衬线 */ --born-font-sans: 'Syne', 'Helvetica Neue', Arial, sans-serif; --born-font-serif: 'Playfair Display', 'Instrument Serif', Georgia, serif; } /* 混排标题中的斜体衬线强调词 */ .born-editorial-serif { font-family: var(--born-font-serif); font-style: italic; font-weight: 400; padding: 0 0.15em; } /* 行内微缩胶囊图（Inline Image Pill） */ .born-inline-pill { display: inline-block; vertical-align: middle; width: 2.4em; height: 1.15em; border-radius: 999px; object-fit: cover; margin: 0 0.2em; border: 1px solid var(--born-grid-line); } 

2. Draw the circular action and viewfinder corners

The circular CONTACT US ↗ action and the four viewfinder corners can be drawn with CSS and pseudo-elements. The corner marks need no separate image assets.

/* 正圆形电光绿渐变主按钮 */ .born-circle-cta { width: 116px; height: 116px; border-radius: 50%; background: var(--born-grad-green); color: #1C1C1C; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--born-font-sans); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .born-circle-cta:hover { transform: scale(1.06) rotate(4deg); } /* 相机取景框四角准星容器 */ .born-viewfinder-box { position: relative; padding: 10px 14px; background: rgba(28, 28, 28, 0.72); backdrop-filter: blur(6px); color: #FFFFFF; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .born-viewfinder-box::before, .born-viewfinder-box::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: #5AFE41; border-style: solid; } .born-viewfinder-box::before { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .born-viewfinder-box::after { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; } 

3. Add the complete dual-view section

The example combines an inline-image statement, a no-reload CAROUSEL / GALLERY switch, and product cards with viewfinder labels and a circular action.

Save it as sections/born-editorial-showcase.liquid. 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's own drawer integration.

{%- comment -%} 文件：sections/born-editorial-showcase.liquid 设计参考：Born Agency | Creative Studio Website (by BY.SHIVA STUDIO) 功能：暗黑先锋杂志风 Showcase，支持 CAROUSEL / GALLERY 双视图切换、相机取景框卖点角标与电光绿圆形 CTA {%- endcomment -%} {{ section.settings.meta_left }} {{ section.settings.meta_right }} {{ section.settings.heading_prefix }} {{ section.settings.heading_serif_italic }} {{ section.settings.heading_suffix }} {%- if section.settings.cta_label != blank -%} ↗ {{ section.settings.cta_label }} {%- endif -%} ALL EDITORIAL BOLD MINIMAL GALLERY CAROUSEL {%- for block in section.blocks -%} {%- assign product = block.settings.product -%} {%- if block.settings.custom_image != blank -%} {%- elsif product != blank and product.featured_image != blank -%} {%- endif -%} {%- if block.settings.viewfinder_note != blank -%} {{ block.settings.viewfinder_note }} {%- endif -%} {{ block.settings.custom_title | default: product.title | default: 'CONCEPT EDITION 01' }} {{ block.settings.style_category | upcase }} · {{ block.settings.spec_note }} {%- if product != blank -%} {{ product.price | money }} {%- else -%} {{ block.settings.fallback_price }} {%- endif -%} {%- endfor -%} {% schema %} { "name": "Born 暗黑杂志双视图画廊", "tag": "section", "settings": [ { "type": "text", "id": "meta_left", "label": "左上角元数据标签", "default": "COLLECTION ARCHIVE // NO STOCK TEMPLATES" }, { "type": "text", "id": "meta_right", "label": "右上角元数据标签", "default": "TAILORED TO YOUR REQUEST" }, { "type": "text", "id": "heading_prefix", "label": "主标题前段（粗体无衬线）", "default": "WHERE IMAGINATION" }, { "type": "text", "id": "heading_serif_italic", "label": "主标题中段（斜体衬线强调）", "default": "replaces" }, { "type": "text", "id": "heading_suffix", "label": "主标题后段（粗体无衬线）", "default": "ORDINARY CATALOGS" }, { "type": "text", "id": "cta_label", "label": "圆形电光绿按钮文字", "default": "EXPLORE ALL" }, { "type": "url", "id": "cta_link", "label": "圆形按钮链接" }, { "type": "select", "id": "default_view", "label": "默认展示视图", "options": [ { "value": "gallery", "label": "GALLERY（细线网格视图）" }, { "value": "carousel", "label": "CAROUSEL（大片横滑视图）" } ], "default": "gallery" }, { "type": "range", "id": "padding_top", "min": 24, "max": 120, "step": 4, "unit": "px", "label": "顶部内边距", "default": 64 }, { "type": "range", "id": "padding_bottom", "min": 24, "max": 120, "step": 4, "unit": "px", "label": "底部内边距", "default": 64 } ], "blocks": [ { "type": "showcase_item", "name": "单品 / 型录卡片", "settings": [ { "type": "product", "id": "product", "label": "关联 Shopify 商品" }, { "type": "image_picker", "id": "custom_image", "label": "自定义型录大图（可选，覆盖商品主图）" }, { "type": "text", "id": "custom_title", "label": "自定义标题（留空则读取商品名）" }, { "type": "select", "id": "style_category", "label": "所属视觉风格（用于顶部筛选）", "options": [ { "value": "editorial", "label": "Editorial" }, { "value": "bold", "label": "Bold" }, { "value": "minimal", "label": "Minimal" } ], "default": "editorial" }, { "type": "text", "id": "viewfinder_note", "label": "图上相机取景框标注（HUD Callout）", "default": "ATTENTION TO DETAIL" }, { "type": "text", "id": "spec_note", "label": "底部简短规格说明", "default": "LIMITED DROP" }, { "type": "text", "id": "fallback_price", "label": "未绑定商品时的示例价格", "default": "$240" } ] } ], "presets": [ { "name": "Born 暗黑杂志双视图画廊", "blocks": [ { "type": "showcase_item", "settings": { "custom_title": "SMITH // TITANIUM EYEWEAR", "style_category": "editorial", "viewfinder_note": "TAILORED TO YOUR REQUEST", "spec_note": "HANDCRAFTED ACETATE" } }, { "type": "showcase_item", "settings": { "custom_title": "FLORA // BOTANICAL ESSENCE", "style_category": "bold", "viewfinder_note": "ATTENTION TO DETAIL", "spec_note": "50ML EXTRAIT" } }, { "type": "showcase_item", "settings": { "custom_title": "KINETIC // MODULAR SHELL", "style_category": "minimal", "viewfinder_note": "3-LAYER GORE-TEX", "spec_note": "AW26 ARCHIVE" } } ] } ] } {% endschema %} 

3. Compare the three Shopify design approaches

The patterns can work together on the same store. A homepage or lookbook can use Born Agency'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 & Design approach.