A good product-page brief is not always a request to start over. Sometimes, the real challenge is translating precise reference-led requirements into an established storefront without making content management more complicated.
For BREE, a Germany-based luxury fashion brand, I implemented a focused product detail page redesign within its heavily customised Shopify Broadcast theme. The brief brought together two references: Verafied for the product-page layout and information hierarchy, and Alohas for the add-on sales experience.
My work centred on four changes: a short product description below the price, hover-based colour labels, variant-specific product recommendations, and a vertical accordion system replacing the existing horizontal tabs. Each needed to work across desktop and mobile and remain manageable through Shopify Admin.
Turning the references into a clear implementation
The client supplied specific behaviours rather than a broad visual direction. That made the task one of translating the brief into both storefront interactions and an editorial workflow.
The Verafied reference guided the placement of introductory copy, the colour-swatch hover behaviour and the stacked product information. The Alohas reference guided the add-on recommendation section.
I implemented these requirements within BREE’s existing Broadcast theme, bringing the new components into the product page rather than treating them as a disconnected layer.
Adding a short description directly below the price
The first addition was a dedicated short product description, positioned directly underneath the price.
I connected this content to a Shopify metafield so BREE’s team could edit the text in Shopify Admin. This separated the concise introduction from the more detailed product information further down the page.
That separation gives each piece of content a clear purpose. The short description introduces the product near the buying controls, while the accordion sections carry the deeper information customers may want before purchasing.
Refining the colour-swatch interaction
The existing swatches displayed the colour name permanently beneath the swatch images. I changed that presentation so the name appears when a customer hovers over a colour swatch, following the interaction specified in the brief.
The change was scoped to the label behaviour. The swatches continued to serve their existing role in variant selection, keeping the interaction connected to the product’s variant functionality.
This part of the project illustrates a useful distinction in theme development: changing how an option is presented does not require replacing the underlying selection behaviour.
Building optional, variant-specific add-on recommendations
The add-on section needed to be selective, not a recommendation block shown indiscriminately on every product.
I implemented variant-level configuration so BREE could assign one or multiple recommended products to a particular variant through Shopify Admin. The displayed recommendations follow the selected variant, allowing the team to curate add-ons at the same level customers make their colour choice.
The visibility rule was equally important: if no products are assigned, the section does not appear. That makes the feature optional through its content configuration, without leaving an empty recommendation area on the PDP.
For the team, the workflow is straightforward: assign relevant products where an add-on recommendation makes sense, and leave the configuration empty where it does not.
Replacing horizontal tabs with metafield-powered accordions
The central structural change was the product information section. BREE previously presented this content in horizontal tabs. I rebuilt it as vertically stacked accordions, using the existing metafields as the content source.
The new structure followed the client’s requested mapping: the former Description content became Details, the former Details content became Size, shipping and returns were brought together under Versand + Retoure, and Payment Options remained its own section.
Each section can be expanded and collapsed, with smooth transitions between states. The accordion layout works across desktop and mobile, giving the product information a consistent vertical structure at both screen sizes.
Reusing the existing metafields was a key part of the implementation. This was a change to how the content was presented, not a requirement for the client to rewrite or migrate the information already managed in Shopify.
Connecting the storefront to the content workflow
The common thread across the build was merchant control. The short description is editable through a metafield. Add-on products are configurable per variant. The accordion sections continue to draw from the existing product information fields.
That approach keeps day-to-day content updates in Shopify Admin rather than turning them into recurring theme-development tasks. BREE can adjust introductory copy, curate recommendations and maintain detailed product information through the content structure behind the page.
It also keeps the implementation closely aligned with the brief: each new storefront component has a defined content source and a clear rule for when and how it appears.
The result
The completed PDP update brought the requested reference-led features into BREE’s customised Broadcast theme: a short description below the price, colour labels revealed on hover, optional variant-specific add-ons, and responsive vertical accordions in place of horizontal tabs.
The outcome was a more structured product-page experience with content the team could continue managing through Shopify Admin. The accordion rebuild, in particular, gave the existing product information a new presentation without replacing its metafield foundation.
The developer takeaway
For me, the value of this project was in the precision of the implementation. A reference-led brief is not simply about making a page look similar to another site. It means understanding the requested interactions, mapping them to the client’s content model, and integrating them into the theme already in use.
For BREE, that meant treating layout, variant behaviour and content management as parts of the same build. The result followed the client’s requirements closely while giving their team practical control over the finished product page.
