{
  "id": 19237453,
  "title": "Building a dual-view Shopify lookbook from the Born Agency case",
  "url": "https://urgent.news/2026/11/09/building-a-dual-view-shopify-lookbook-from-the-born-agency-case",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-09T22:59:00.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/weswoodtc/building-a-dual-view-shopify-lookbook-from-the-born-agency-case-5e3i"
  },
  "original_language": "en",
  "account": "The Born Agency case demonstrates how to create a unique Shopify lookbook by merging a viewfinder style with mixed typography and saturated gradients. The design starts with a monochrome base of carbon black, #1C1C1C, enhanced with gradients in electric lime and magenta accents. These colours guide the user experience, with lime highlighting primary actions and magenta used for the fullscreen menu, collection navigation, and active filters. White #FFFFFF provides strong contrast for the main text, ensuring readability against the dark canvas.\n\nIn terms of imagery, the Born Agency approach involves using viewfinders to frame key details, such as the subject of the image or a product feature. Each hotspot is marked with a small uppercase label that describes its significance, such as \"TAILOR MADE TO YOUR REQUEST\" or \"ATTENTION TO DETAIL.\" This design element encourages users to engage with the content more deeply, similar to how they might interact with a curated gallery.\n\nTypography plays a crucial role in conveying the project's brand statement, which utilizes a combination of geometric sans-serif and italic serif fonts. These typefaces change within sentences to emphasize different points, with small image capsules placed within lines to provide visual interest and context. Additionally, a rotating badge in the corner of the page adds a dynamic element to the typography.\n\nShopify implementation for the Born Agency design system involves translating these elements into a theme with specific CSS classes and assets. The project sets up core palettes, gradients, and typography in a base CSS file. For example, the carbon black and gradient colors are defined using custom properties in the root of the stylesheet. The theme can then use these classes to style product grids, carousels, and individual product pages, ensuring a cohesive design that mirrors the Born Agency lookbook.",
  "summary": "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…",
  "key_points": [
    "Monochrome base of carbon black with electric lime and magenta gradients guide user experience.",
    "Viewfinders with uppercase labels encourage user engagement and deep content interaction."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}