{"id":153,"date":"2026-08-15T16:19:19","date_gmt":"2026-08-15T13:19:19","guid":{"rendered":"https:\/\/firstidea.gr\/?post_type=portfolio&#038;p=153"},"modified":"2026-08-18T10:44:23","modified_gmt":"2026-08-18T07:44:23","slug":"%ce%ba%ce%b1%cf%84%ce%b1%cf%83%ce%ba%ce%b5%cf%85%ce%ae-eshop-bastardvinyl-com","status":"publish","type":"portfolio","link":"https:\/\/www.firstidea.gr\/en\/projects\/%ce%ba%ce%b1%cf%84%ce%b1%cf%83%ce%ba%ce%b5%cf%85%ce%ae-eshop-bastardvinyl-com\/","title":{"rendered":"E-shop Development \u2013 bastardvinyl.com"},"content":{"rendered":"\n<div class=\"wp-block-group firstidea-project-content is-layout-flow wp-block-group-is-layout-flow\">\n\t\n\t<div class=\"wp-block-group alignfull case-hero case-hero--commerce is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\n\t\t<div class=\"wp-block-group site-container case-hero__grid is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\t\n\t\t\t<div class=\"wp-block-group case-hero__copy motion-reveal is-visible is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\t\t\n\t\t\t\t<p class=\"breadcrumbs breadcrumbs--dark wp-block-paragraph\"><a href=\"\/en\/projects\/\">Work<\/a><span>\/<\/span><span>E-shop Development \u2013 bastardvinyl.com<\/span><\/p>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<p class=\"eyebrow eyebrow--light wp-block-paragraph\"><span aria-hidden=\"true\"><\/span> Case study \u00b7 eCommerce<\/p>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<h1 class=\"wp-block-heading\">Bastard Vinyl: eCommerce designed for music search and discovery.<\/h1>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<p class=\"case-hero__lead wp-block-paragraph\">A specialised OpenCart 3 store that organises a large vinyl catalogue through custom filters, rich release pages and an editorial visual language built for the brand\u2019s audience.<\/p>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<div class=\"wp-block-buttons hero-actions is-layout-flex wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"\/en\/contact\/\">Discuss a similar project <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div><div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"\/en\/projects\/\">All projects<\/a><\/div><\/div>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\n\t\t\t<figure class=\"wp-block-image size-full case-hero__figure motion-reveal motion-delay-1 is-visible\" data-parallax=\"10\"><img loading=\"lazy\" src=\"\/wp-content\/themes\/firstidea\/assets\/images\/projects\/details\/bastardvinyl-cover-4x3-v1.webp\" alt=\"The Bastard Vinyl online store across desktop, laptop, tablet and mobile devices\" width=\"1440\" height=\"1080\" decoding=\"async\"><i aria-hidden=\"true\"><\/i><b aria-hidden=\"true\">OpenCart 3 \u00b7 Custom catalogue<\/b><\/figure>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/div>\n\t\n\n\t\n\t<section class=\"case-facts\" aria-label=\"Project facts\"><dl class=\"site-container case-facts__grid\"><div><dt>Client<\/dt><dd>bastardvinyl.com<\/dd><\/div><div><dt>Sector<\/dt><dd>Music &amp; vinyl records<\/dd><\/div><div><dt>Platform<\/dt><dd>OpenCart 3 \u00b7 Custom catalogue<\/dd><\/div><div><dt>Scope<\/dt><dd>eCommerce UX \u00b7 OpenCart development \u00b7 Catalogue architecture<\/dd><\/div><\/dl><\/section>\n\t\n\n\t\n\t<div class=\"wp-block-group alignfull case-story is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\n\t\t<div class=\"wp-block-group site-container case-story__grid is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\t\n\t\t\t<div class=\"wp-block-group case-story__intro motion-reveal is-layout-flow wp-block-group-is-layout-flow\"><p class=\"eyebrow wp-block-paragraph\"><span aria-hidden=\"true\"><\/span> Project thinking<\/p><h2 class=\"wp-block-heading\">From brief to working system<\/h2><p class=\"wp-block-paragraph\">The decisions behind the interface matter as much as the final screen.<\/p><p class=\"case-story__live wp-block-paragraph\"><a href=\"https:\/\/bastardvinyl.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span>Visit the live website<\/span><strong>bastardvinyl.com<\/strong><i aria-hidden=\"true\">\u2197\ufe0e<\/i><\/a><\/p><\/div>\n\t\t\t\n\t\t\t\n\t\t\t<div class=\"wp-block-group case-story__chapters is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\t\t\t\t\t\n\t\t\t\t<div class=\"wp-block-group case-story__chapter motion-reveal is-layout-flow wp-block-group-is-layout-flow\"><span class=\"case-story__index\" aria-hidden=\"true\">01<\/span><h3 class=\"wp-block-heading\">The brief<\/h3><p class=\"wp-block-paragraph\">A large vinyl catalogue cannot behave like a generic online store. Visitors may arrive looking for a specific artist or label, but they also expect to discover new releases and curated recommendations.<\/p><ul class=\"wp-block-list case-story__list\"><li>Support precise, targeted search<\/li><li>Make new music easier to discover<\/li><li>Preserve the distinctive visual identity of the brand<\/li><\/ul><\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t<div class=\"wp-block-group case-story__chapter motion-reveal is-layout-flow wp-block-group-is-layout-flow\"><span class=\"case-story__index\" aria-hidden=\"true\">02<\/span><h3 class=\"wp-block-heading\">Music catalogue architecture<\/h3><p class=\"wp-block-paragraph\">Navigation was organised around the way music is bought and explored. Artist, label and genre work as meaningful filters, while New Arrivals, Best Sellers, Featured and Pre-orders support different visitor intentions.<\/p><ul class=\"wp-block-list case-story__list\"><li>Custom artist, label and genre filters<\/li><li>New Arrivals, Best Sellers, Featured and Pre-orders<\/li><li>Search for immediate release discovery<\/li><\/ul><\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t<div class=\"wp-block-group case-story__chapter motion-reveal is-layout-flow wp-block-group-is-layout-flow\"><span class=\"case-story__index\" aria-hidden=\"true\">03<\/span><h3 class=\"wp-block-heading\">Release pages with useful depth<\/h3><p class=\"wp-block-paragraph\">Each product presents more than price and availability. Artwork, artist, label, format, genre, release information, video previews and related products support both the buying decision and continued exploration.<\/p><ul class=\"wp-block-list case-story__list\"><li>Detailed metadata for every release<\/li><li>Prominent cover art and embedded video previews<\/li><li>Related products for continued discovery<\/li><\/ul><\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t<div class=\"wp-block-group case-story__chapter motion-reveal is-layout-flow wp-block-group-is-layout-flow\"><span class=\"case-story__index\" aria-hidden=\"true\">04<\/span><h3 class=\"wp-block-heading\">Editorial design with commercial purpose<\/h3><p class=\"wp-block-paragraph\">The visual direction is minimal yet distinctive, combining strong hero imagery, a clear product grid and curated highlights such as Album of the Week. The result works as both an online store and a music platform.<\/p><ul class=\"wp-block-list case-story__list\"><li>Dynamic visuals and featured collections<\/li><li>A product grid with clear hierarchy<\/li><li>Curated highlights that strengthen the brand<\/li><\/ul><\/div>\n\t\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/div>\n\t\n\n\t\t\n\t<div class=\"wp-block-group alignfull case-media case-media--wide\"><div class=\"site-container is-layout-flow wp-block-group-is-layout-flow\"><figure class=\"wp-block-image size-full case-media__figure motion-reveal\"><img src=\"\/wp-content\/themes\/firstidea\/assets\/images\/projects\/details\/BASTARD-big-8.webp\" alt=\"Bastard Vinyl curated product presentation on a desktop mockup\" width=\"2048\" height=\"1058\" loading=\"lazy\" decoding=\"async\"><\/figure><\/div><\/div>\n\t\n\t\n\t\n\t<div class=\"wp-block-group alignfull case-outcomes\"><div class=\"site-container case-outcomes__grid\"><div class=\"case-outcomes__copy motion-reveal is-layout-flow wp-block-group-is-layout-flow\"><p class=\"eyebrow eyebrow--light wp-block-paragraph\"><span aria-hidden=\"true\"><\/span> Delivered value<\/p><h2 class=\"wp-block-heading\">What the solution connects<\/h2><p class=\"wp-block-paragraph\">The outcome is described through delivered capabilities\u2014not invented performance figures.<\/p><p class=\"case-outcomes__live wp-block-paragraph\"><a href=\"https:\/\/bastardvinyl.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visit live project <span aria-hidden=\"true\">\u2197\ufe0e<\/span><\/a><\/p><\/div><div class=\"case-outcomes__cards\"><article class=\"case-outcome motion-reveal\"><span>01<\/span><h3>Artist, label and genre filtering<\/h3><i aria-hidden=\"true\"><\/i><\/article><article class=\"case-outcome motion-reveal\"><span>02<\/span><h3>Content-rich music release pages<\/h3><i aria-hidden=\"true\"><\/i><\/article><article class=\"case-outcome motion-reveal\"><span>03<\/span><h3>An editorial storefront with commercial clarity<\/h3><i aria-hidden=\"true\"><\/i><\/article><\/div><div class=\"case-signal-map\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><b>ecommerce \/ connected<\/b><\/div><\/div><\/div>\n\t\n\n\t\t\n\t<div class=\"wp-block-group alignfull case-detail-media case-detail-media--gallery\"><div class=\"site-container case-detail-media__grid\"><div class=\"case-detail-media__note motion-reveal\"><span>UI \/ 01\u201303<\/span><h2>Every record has room to stand out.<\/h2><p>From catalogue filters and content-rich release pages to curated highlights, the experience supports both precise search and the discovery of new music.<\/p><\/div><div class=\"case-detail-media__gallery is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\n\t<figure class=\"wp-block-image size-full case-detail-media__figure motion-reveal motion-delay-1\" data-tilt><img src=\"\/wp-content\/themes\/firstidea\/assets\/images\/projects\/details\/BASTARD-1-8.webp\" alt=\"Custom music catalogue filters inside Bastard Vinyl\" width=\"1142\" height=\"1056\" loading=\"lazy\" decoding=\"async\"><figcaption class=\"wp-element-caption\"><span>UI 01 \/ 03<\/span>Music catalogue filters<\/figcaption><\/figure>\n\t\n\t\t\n\t<figure class=\"wp-block-image size-full case-detail-media__figure motion-reveal motion-delay-1\" data-tilt><img src=\"\/wp-content\/themes\/firstidea\/assets\/images\/projects\/details\/BASTARD-2-8.webp\" alt=\"Bastard Vinyl music release page with detailed metadata and video preview\" width=\"1142\" height=\"1055\" loading=\"lazy\" decoding=\"async\"><figcaption class=\"wp-element-caption\"><span>UI 02 \/ 03<\/span>Detailed release page<\/figcaption><\/figure>\n\t\n\t\t\n\t<figure class=\"wp-block-image size-full case-detail-media__figure motion-reveal motion-delay-1\" data-tilt><img src=\"\/wp-content\/themes\/firstidea\/assets\/images\/projects\/details\/BASTARD-3-8.webp\" alt=\"Editorial featured releases and Album of the Week inside Bastard Vinyl\" width=\"1142\" height=\"1056\" loading=\"lazy\" decoding=\"async\"><figcaption class=\"wp-element-caption\"><span>UI 03 \/ 03<\/span>Curated music discovery<\/figcaption><\/figure>\n\t\n\t\t<\/div><\/div><\/div>\n\t\n\t\n\t\n\t<div class=\"wp-block-group alignfull quality-section case-cta\"><div class=\"site-container quality-section__grid\"><div class=\"case-cta__artifact motion-reveal\" aria-hidden=\"true\"><div class=\"idea-lamp\"><div class=\"idea-lamp__halo\"><\/div><div class=\"idea-lamp__rays\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div><div class=\"idea-lamp__glass\"><i><\/i><\/div><div class=\"idea-lamp__base\"><\/div><b>idea \/ next<\/b><\/div><span>eCommerce<\/span><\/div><div class=\"motion-reveal motion-delay-1 is-layout-flow wp-block-group-is-layout-flow\"><p class=\"eyebrow wp-block-paragraph\"><span aria-hidden=\"true\"><\/span> Your next project<\/p><h2 class=\"wp-block-heading\">The right solution starts with the real operating need.<\/h2><p class=\"quality-section__lead wp-block-paragraph\">Tell us what must change, what needs to connect and what success should look like for your team and customers.<\/p><div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"\/en\/contact\/\">Discuss a similar project <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div><\/div><\/div><\/div><\/div>\n\t\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A specialised OpenCart 3 store that organises a large vinyl catalogue through custom filters, rich release pages and an editorial visual language built for the brand\u2019s audience.<\/p>\n","protected":false},"featured_media":8181,"template":"","project_type":[9],"project_platform":[17],"project_sector":[29],"class_list":["post-153","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","project_type-ecommerce"],"_links":{"self":[{"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/portfolio\/153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":150,"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/portfolio\/153\/revisions"}],"predecessor-version":[{"id":10123,"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/portfolio\/153\/revisions\/10123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/media\/8181"}],"wp:attachment":[{"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/media?parent=153"}],"wp:term":[{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/project_type?post=153"},{"taxonomy":"project_platform","embeddable":true,"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/project_platform?post=153"},{"taxonomy":"project_sector","embeddable":true,"href":"https:\/\/www.firstidea.gr\/en\/wp-json\/wp\/v2\/project_sector?post=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}