Mar & Alma Shopify Storefront · Design Plan

Two directions for a brand that has one shot at looking worth $65.

Mar & Alma sells Portuguese heritage menswear at roughly three times what its competitors charge. Nothing on the site can be decorative — every element has to be doing the work of justifying that gap. This plan sets out what we found, what we propose, and two complete design directions, both built on the approved brand palette and the client’s own photography.

Client
tugatees3870
Platform
Shopify · mar-alma.myshopify.com
Primary reference
Kith
Deadline
15 Sep 2026
Prepared
24 Aug 2026
01

Where things stand

Before any design decisions, five findings from the audit that change what the site has to do. Three of them need a client answer before we write production copy.

Both domains currently redirect to Etsy Fix first

marandalma.com and marandalma.net each return a 302 straight to etsy.com/shop/MarAndAlma. There is no holding page and no email capture anywhere. Every visitor the client drives from Instagram lands on a marketplace, pays Etsy's fee, and leaves no address behind. This is the real argument for the Coming Soon page being priority one — it isn't a nicety, it's a leak.

“Supima” may not be accurate Confirm

The product doc and both Etsy listings say 100% Supima cotton. A verified customer review says Peruvian Pima. Supima® is a registered trademark that legally denotes extra-long-staple cotton grown in the United States. Peruvian pima is an equally good fibre and an equally good story — but it cannot be called Supima. Until Hugo confirms the mill, both mockups say “6 oz extra-long-staple cotton”, which is true either way.

No compass exists in the supplied photography Confirm

The product doc describes a Rosa dos Ventos embroidered on the left chest of the Navegador Tee, reading Salt, Soul and Saudade clockwise from true North. There is no compass anywhere in the 8 product photographs. What exists is one tee with an M&A monogram at the left chest and one with a wordmark + moliceiro + tagline chest print. Both mockups are labelled from what the photographs actually show — "The Monogram Tee" and "The Founders Tee" — because guessing here would put wrong copy on a live product page. Hugo needs to say which product is which, and whether the compass is a planned design or a description that no longer matches the goods.

And if the compass does get made: in Portuguese the cardinals are N · E · S · OOeste, not West — with NE, SE, SO, NO between them. An English N/S/E/W rose on a Portuguese heritage garment is the kind of error this exact audience notices first.

Brand Gold on brand Cream fails WCAG outright Fix

Gold #dfaf40 on Cream #fdf0d5 measures 1.80:1 against a 4.5:1 floor. It is not a near miss. Both directions solve it by confining gold to navy and ink grounds and using a deepened #7A6636 for small gold text on cream — but the client should hear it, because it affects the hangtag and packaging too. Full audit in §06.

The garment photographs cool white, not cream Check

The colour swatch on the product page says Cream and the brand cream is #fdf0d5 — a warm, distinctly yellow-leaning tone. The tees photograph at roughly RGB(206,208,206), a cool light grey. Either the garment is a natural white rather than cream, or the shots are a stop under with a cool white balance. We applied a modest white-point and warmth correction to the cut-outs so they read as natural cotton, but the underlying question matters: a customer who orders "Cream" and receives cool white will say so in a review.

The two briefs name different reference brands Decide

The website brief names Kith, Aimé Leon Dore, Buck Mason — New York streetwear-adjacent. The brand-identity brief names Peter Millar, Ralph Lauren, Vineyard Vines, Malbon Golf, Armor Lux, Club de Mare — preppy coastal heritage, and explicitly warns against anything "streetwear-heavy". Those are different rooms, and the client is right that the second set matches the product better. Direction A currently follows the website brief's structure with the brand book's palette; pulling it fully into the Ralph Lauren / Armor Lux register is a half-day change, not a rebuild. Worth settling before templates are built.

The strongest asset in the whole brief is going unused Use it

In 2025 UNESCO inscribed the Moliceiro boat — the naval carpentry art of the Aveiro region — on its List of Intangible Cultural Heritage in Need of Urgent Safeguarding. That is a verifiable, third-party, un-copyable fact that turns a printed graphic into an act of preservation. No competitor has anything remotely like it. Both directions build a section around it.

The hats do not publicly exist yet Noted

No listings, no inventory, no images anywhere. Waitlist-only is correct and already in the brief. Both directions show the snapbacks with “Join the Waitlist” in place of Add to Cart, and a Waitlist marker on the card rather than a sold-out badge — same information, opposite emotional register.

02

Who buys this

Roughly 1.4–1.5 million Americans claimed Portuguese ancestry in the 2020 Census — the first census to give Portuguese its own code, with Azorean and Madeiran subcodes. Add Canada's 448,000 and the addressable diaspora in North America is around 1.9 million. Small, but unusually dense and unusually motivated.

Where the density actually is — 2020 US Census / 2021 Canadian Census
MarketPopulationShareWhy it matters
Providence–Warwick, RI–MA208,33012.4%The single densest Portuguese metro in America. Fall River and New Bedford anchor it.
Rhode Island~85,0008.0%Highest share of any state.
California~350,0000.9%Largest absolute number. Central Valley, Azorean-origin.
Massachusetts~270,0004.0%Second largest, second densest.
New Jersey~76,0001.4%Home state. Newark's Ironbound is walkable retail and pop-up territory.
Ontario300,60067% of CAToronto's Portugal Village. Note the Canadian community shrank 7% from 2016.
The positioning tension

Most of this audience is Azorean. The brand is from Aveiro.

Portuguese America is overwhelmingly Azorean in origin — New England's textile cities, California's Central Valley, Hawaii's plantations. Mar & Alma's story is specifically Torreira, on the mainland's Ria de Aveiro. That is a real distinction and the brand copy already handles it well: universal promise, specific origin. “Clothing for people who carry Portugal with them” is for everyone; “born on the Ria de Aveiro” is the founder's own truth.

Design consequence: never let the site imply Aveiro is Portuguese-America's homeland. Keep place-specific claims attached to the product, and keep the promise attached to the reader.

What the site has to prove

At $65, the website is almost entirely a proof engine.

Every competitor sells a flag graphic for under $25. Nothing about the design can imply “nice t-shirt” — it has to imply object. That means, concretely: fabric weight stated as a spec, embroidery shot at macro, the UNESCO fact given its own moment, the New Jersey ship-time stated on the product page, and small-batch language everywhere.

The competitive advantage nobody else has: the only rival with real brand quality — Home of Saudade — ships from Portugal. Mar & Alma ships from Toms River in 1–3 days. Put that on the product page, not buried in a policy.

03

The competitive field

Encouraging, frankly. The category is almost entirely cheap, flag-led and print-on-demand. Nobody occupies the premium, place-specific, embroidered position.

Portuguese-heritage apparel, August 2026
BrandTee priceShips fromRead
Mar & Alma$65New JerseyUs Embroidered, small-batch, one place of origin. Currently Etsy-only, 9 sales in 4 months.
My Portuguese Culture$19.99USClosest positional rival — explicitly Azorean-American, calls itself “premium”. But it's crest graphics on Big Cartel.
The Luso Clothing Co$18USDormant Every product shows sold out. The “Luso-American, made in USA” slot is vacant.
Home of Saudade€27.50PortugalOwns the word Genuinely good Shopify build, broad and unfocused range, slow shipping to the US.
PortuTees~$20–28USPrint-on-demand, also on TeePublic. Site blocks inspection.
Shop Portuguese$29.99–36US / CAA general store — canned goods and olive oil alongside tees. Not a clothing brand.
Portugalia Marketplace$19.99–230Fall River, MAStockist, not rival Already sells $50–230 Portuguese-made goods, in the most Portuguese city in America.

One commercial note that isn't a design point but is worth raising: Portugalia Marketplace in Fall River carries Burel, Artipel and Companhia Atlantica at $50–230, to exactly this customer, in person. A $65 embroidered tee fits their price architecture. That is the best wholesale lead in the research.

04

What we take from the references

All three reference stores were pulled apart section by section. The useful finding is what they agree on.

Kith — primary

Publish, don't merchandise

Centred wordmark. No announcement bar at all. Five campaign blocks before a single product rail, and the one rail is personalised. Every campaign gets a name, a real paragraph, and two equal CTAs — Shop Now beside A Closer Look. That fork is the single most copyable mechanic in the whole teardown: commerce never gets to be the only door.

What we leave: size buttons and add-to-cart on the collection card. That's a hype-drop mechanic. It adds noise and signals scarcity-urgency, which is against this positioning.

Aimé Leon Dore

Two words of navigation

The entire nav is Shop and Explore. Zero products on the homepage — no prices above the footer. A serif runs deep into the interface, not just the wordmark. Product cards carry name, price and “2 Colors Available” as text — no swatches, no badges. The footer has six links and refuses to be an SEO surface.

The lesson worth the most here: the About page is two sentences. For a heritage brand the temptation to write 800 words about provenance is enormous. Resist it.

Buck Mason

Merchandise by cloth

Shop by Fabric tiles with product counts, above the grid — cloth as the organising principle, which is inherently a quality claim. And PDP accordions whose labels carry the answer: Fit: Classic / Fabric: 100% Cotton / Returns: 365 days. You get the spec without opening anything.

What we leave: the shipping-threshold announcement bar, the New Arrival badges, ~40 priced products on the homepage, and the 20-product Best Sellers dump at the bottom of every PDP.

The other reference set

Peter Millar, Ralph Lauren, Armor Lux — a different room entirely.

The brand-identity brief lists Peter Millar, Malbon Golf, Vineyard Vines, Ralph Lauren, Club de Mare and Armor Lux, and instructs: "luxury without being loud, heritage without being touristy", avoiding anything "streetwear-heavy". That is a coastal-preppy lineage, not a drop-culture one, and it changes concrete decisions: warmer grounds instead of stark white, crests and monograms instead of graphic logos, on-body lifestyle photography instead of flat-lay-on-white, and a nav that reads Men / Women / Journal / Stores rather than Shop / Explore. Armor Lux is the closest analogue of all — a Breton maritime-heritage brand that sells its own coastline the way Mar & Alma wants to sell Aveiro. It is the reference we would actually recommend studying, and it is not in the website brief at all.

Where all three agree

Three absences that read as confidence

1. No reviews or star ratings on any product page. Not one of the three. At this tier, social proof reads as an admission of doubt. 2. No colour swatches on collection cards — colour is stated as text. 3. No sale styling in the default state — no strikethroughs, no red, no percentage badges.

This is worth raising with the client directly, because the brief asks for “premium product reviews with photo uploads”. That is a reasonable request and it does lift conversion for an unknown brand — but it is the one place where the brief and the references pull in opposite directions. Our recommendation is in §08.

05

The two directions

Both are fully built and clickable. Both use the brand's own typefaces and the Navy / Cream / Heritage Gold / Azulejo Blue palette. Both are WCAG 2.1 AA. The difference is what the site is — a well-made shop, or an experience that happens to sell things.

Direction A

Torreira

Reference-faithful to the website brief. If the client says “make it look like Kith,” this is the honest answer — on the real brand palette, with the real photography.

Ground
Warm paper, brand Cream as the alternate band, Navy for the proof band and the footer.
Structure
Centred wordmark, campaign-first homepage, dual-CTA chapter blocks, 1:1 product imagery, sticky split product page.
Motion
Almost none. A 2% image scale on card hover. That is the entire budget.
Risk
Low. Builds on a standard theme in days, scores well on Core Web Vitals by default, ages slowly.
The trade
Nobody will remember it. It will convert.
Direction B

Ria

Awwwards register — every technique ships on a standard Liquid theme. No headless, no WebGL, no re-platform. Same photography, opposite emotional register.

Ground
Ink dominant. Brand Cream becomes the text colour, not the surface. Gold is the one ceremonial accent, and it only ever sits on dark.
Structure
Two-word nav. Full-viewport hero. Pinned three-panel chapter. Horizontal-scroll lookbook. Scroll-driven azulejo wipe.
Motion
Smooth scroll on real scroll position, masked type reveals, scroll-linked parallax, rotating compass, marquee, cursor state, page transitions.
Risk
Medium. Custom theme work, a real performance budget, and page transitions need genuine QA against Shopify's analytics and app scripts.
The trade
People will send it to each other. It costs more to build and more to maintain.
Every technique in Direction B, and what actually builds it
TechniqueProduction approachFeasible on Liquid?
Smooth scrollLenis — animates real scroll position, so position:sticky keeps workingYes
Pinned chapter sceneGSAP ScrollTrigger pin, or pure position:sticky + progressYes
Horizontal lookbookScrollTrigger pin + translateX on a trackYes
Azulejo wipeclip-path: inset() driven by scroll progress. No library.Yes
Masked type revealoverflow:hidden + translateY, staggeredYes
Sticky split product pageposition:sticky on the info column. Zero JS.Yes
Deep faceted filteringShopify Search & Discovery + filter_param in LiquidYes
Shop-by-cloth tiles with countsMetafields + collection.products_countYes
Page transitionsSwup or Taxi.js over LiquidYes, with care — the #1 source of fragility. Cart state, Shopify analytics page_view, and app scripts bound to DOMContentLoaded all need handling. Recommend limiting it to collection → product only.
WebGL hover distortionOGL (~10 kb) fed Shopify CDN image URLsPossible — but not proposed. Adds weight for a effect that photography does better.
Pageless / AI-concierge commerceHydrogen or Next.js on the Storefront APINo — a re-platform, not a theme decision.
Our recommendation

Direction B, with the transition scope trimmed.

The award-winning fashion commerce we surveyed is mostly on Shopify already — Balmoral took Site of the Day on a stock Shopify build with animation scoring only 6.2/10, winning on photography, type and performance instead. That is the useful precedent here: the premium signal in Kith and ALD comes from restraint, typography and photography, not motion. Direction B earns its motion because each moment carries content — the pinned scene is the moliceiro story, the wipe is the horror vacui argument. Keep it, cap the page transitions at one route pair, and hold WebGL in reserve for a campaign microsite if the client ever wants a showpiece.

06

Design system

The brand book is now in hand (ClickUp 869e5rfj0, the May 2026 apparel-print order). Everything below is the real approved palette and type, not a guess — and one item in it needs fixing before launch.

The approved palette

Navy#134686Primary
Azulejo Blue#446a9cSecondary
Gold#dfaf40Accent
Cream#fdf0d5Ground
Ink#0B1C33Extension — dark ground

Red is permitted only as a secondary heritage reference, never as a main product colour. The brand book also rules out the earlier red/green palette. Ink is the one addition we propose: Direction B needs a ground darker than Navy to let Navy itself read as a colour rather than as the background.

Fix before launch

Gold on Cream is 1.80:1. That fails WCAG at every size.

Brand Gold #dfaf40 against brand Cream #fdf0d5 measures 1.80:1. The AA floor is 4.5:1 for body text and 3:1 for large text and UI. This is not a stylistic opinion — it is arithmetic, and it applies to print and packaging as much as to the site. Anything gold on a cream ground is, in practice, invisible to a large number of people.

How both directions solve it. Gold appears only on Navy or Ink grounds, where it measures 4.6:1 and 8.4:1 respectively. On cream grounds, small gold-toned text uses a deepened #7A6636 (4.9:1) and brand Gold is reserved for hairlines, rules and 24px-plus display. The client should know about this — the hangtag already puts gold on white, which is a milder version of the same problem.

Contrast audit of the approved palette — every pair actually used, measured
PairRatioGradePermitted use
Cream on Ink15.2:1AAAEverything (Direction B body)
Navy on White9.3:1AAAEverything
Gold on Ink8.4:1AAALabels, CTAs, small text on dark
Navy on Cream8.3:1AAAEverything
Ink on Gold (button fill)8.4:1AAADirection B primary button
Deep gold #7A6636 on Cream4.9:1AASmall uppercase labels on light grounds
Azulejo on Cream4.9:1AASecondary text, meta
Gold on Navy4.6:1AABody and UI on the navy band
Gold on Cream1.80:1FAILNever. Not even for large display.

Typography

Display — Baskerville / Baskervville
Salt, Soul & Saudade

Headings, product names, pull quotes, the wordmark. The brand book specifies Baskerville; both mockups use Baskervville, the free Google Fonts revival, which is metrically and tonally close and removes a licence dependency. The italic is load-bearing — it is how saudade, azulejo and moliceiro get marked as Portuguese rather than English.

Interface — Harmonia Sans
Modern tailored fit. True to size.

Body, navigation, buttons, specs, forms. The Drive holds only Harmonia-Sans-W01-Bold.ttf — a Monotype web licence for Regular / Medium / Bold still needs buying, or the client approves an alternative. Both mockups use Hanken Grotesk from Google Fonts as a close, freely licensable stand-in.

Micro-label — 10–11px, 0.22em tracking, uppercase
Chapter One — Torreira, Ria de Aveiro

Eyebrows, section markers, size labels, product status. Gold on dark grounds, deep gold on light. Never brand gold on cream.

Grid

12 columns, 1440–1600 max

Gutters clamp(12px, 1.6vw, 24px), page padding clamp(18px, 4.4vw, 64px). Product grids 4-up desktop, 3-up tablet, 2-up mobile — never 1-up, which makes a four-piece collection look emptier than it is.

Imagery

Three ratios, no more

4:5 for product and editorial portrait. 16:9 for location and full-bleed campaign. 2:3 for the lookbook verticals. The supplied library already fits these without recropping.

Motion

Content, or nothing

A moment earns its motion only if it carries meaning. In Direction B the pinned scene is the moliceiro story and the wipe is the saudade line. Everything has a prefers-reduced-motion path — see §09.

The photography you already have

Both mockups run entirely on the client's own images — 23 of them, pulled from the shared Drive. No stock, no illustration, no placeholders except where a product genuinely does not exist yet. This library is a real asset and it is better than most brands at this stage have.

SetCountWhat it coversGap
Product8Both tees front and angled, the chest-print macro, the M&A monogram macro, the woven neck label, the azulejo hangtag. Enough for a full four-shot PDP gallery on each tee.

Three are Photoroom cut-outs (both tees front, the hangtag) — but they were saved as JPEG, so the transparency was flattened to a white rectangle. We keyed the background back out, exported them as WebP with a real alpha channel, and lifted a cool cast in the garment. They now sit on a studio sweep with a silhouette contact shadow rather than inside a white box.
No on-body shots. Every product image is flat lay or macro. A model wearing the garment is the single highest-value addition.

Ask for PNG. If Photoroom still has the originals, re-export as PNG or WebP with alpha — better than any re-key.
Location — the Ria6Painted working boats on the lagoon, the road bridge, mooring poles at dawn, a hauled-out boat, the prow with Our Lady of Fátima, a prow against blue sky.None. This is the brand's whole argument in pictures.
Location — Atlantic & dunes6Sunset surf, dusk beach, the dune path to the sea, marram grass close and wide, the Torreira seafront street.None.
Craft2Fishing nets on the sand; the monogram mark.Nothing of the garments being made, packed or inspected in New Jersey — which is a claim the site makes repeatedly.
Headwear0None exists. Both directions therefore present the two snapbacks as typographic waitlist plates rather than faking a product shot.
Video11Seven .mov clips in the website folder, four in the product folder. Not used in the mockups.Worth reviewing — a six-second silent loop behind the Coming Soon page would be strong.

The shot list, then, is short: on-body for both tees, the two snapbacks once they exist, and something of the New Jersey packing bench. Everything else is already shot.

07

Page-by-page spec

Section order and content for every page in the scope of work. Open a page to see its build.

Coming Soon Priority 1 — ship this week +
  1. Full-viewport lifestyle background from the client's Drive media, with a dark radial veil so the form stays legible at any crop.
  2. Rosa dos Ventos mark, wordmark, and the Salt · Soul · Saudade motto.
  3. Headline — The New Flagship is Loading. Sub — Join the waitlist for exclusive early access and coming soon information. Button — Notify Me. Copy exactly as briefed.
  4. Single email field, posting directly to a Klaviyo list. Not a Shopify form mirrored later — direct, so the list is clean from day one.
  5. Success state in place, no page reload, with a line confirming what they've joined.
  6. Direction B adds a slow-rotating compass and a bottom ticker; both disabled under reduced motion.

This page is worth more than the rest of the build combined right now, because it is the only thing standing between existing Instagram traffic and a dead redirect to Etsy. Publish it the hour the domain resolves.

Home Campaign-first +
  1. Header — centred wordmark (A) or two-word nav (B). No announcement bar. Cart, search, account right.
  2. Hero — full-bleed campaign. Dual CTA: Shop the Collection / A Closer Look.
  3. Chapter 01 — The Navegador Tee. Named block, real paragraph, two CTAs.
  4. Chapter 02 — The Heritage Moliceiro Snapback. Leads on the hidden azulejo under-brim. CTA is Join the Waitlist.
  5. The Collection — all four products, 4-up. Price as plain text. Waitlist marker, not a sold-out badge.
  6. Proof band — three claims: embroidered not printed · UNESCO 2025 · ships from New Jersey in 1–3 days.
  7. Journal teaser — one story, image left, copy right.
  8. Newsletter — with a real reason to subscribe, not “sign up for updates”.
  9. Footer — Shop / Heritage / Help / Legal, plus the returns portal link the brief requires.

Direction B replaces items 3–4 with a single pinned three-panel chapter, and adds the horizontal lookbook and azulejo wipe.

Shop / Collection 5 sections +
  1. 01 · Collection header — breadcrumb, title, two-sentence statement, and a live count split as 4 products · 2 available · 2 on waitlist. Honest about the state of the catalogue rather than hiding it.
  2. 02 · Shop by cloth — four tiles with product counts: ELS Cotton · French Terry · Technical Panel · Azulejo Lining. Buck Mason's mechanic, better provenance. Liquid metafields + collection.products_count.
  3. 03 · Filters & grid — All / Tees / Headwear / Available now / Waitlist via Shopify Search & Discovery. Cards carry image, name, price and colour as text. No swatches, no badges, no in-grid add-to-cart.
  4. 04 · Editorial band — one full-bleed interruption below the grid: "A small collection is a promise you can keep." Turns a four-product page from thin into deliberate.
  5. 05 · About & FAQ — collection copy beside five accordions (sizing, waitlist, shipping, returns, what's next). SEO weight and genuine merchandising education in one block.

With four products, filters are theatre — but the right theatre. They say this is a shop that expects to grow, and they cost nothing now versus retrofitting later.

Product Conversion engine +

Above the fold — fixed for every product.

  1. Sticky split. Gallery scrolls, info column sticks. Pure position:sticky — no JS, works everywhere.
  2. Fixed four-shot gallery, same sequence on every product: flat lay → print macro → label macro → cloth. Enforced as a photography brief, not just a template.
  3. Title · price · style code, with fabric weight and colour as a spec line under the price.
  4. Colour as swatch + name; size as equal-width buttons with Size guide beneath. Unavailable sizes dashed and labelled, not hidden.
  5. Add to Bag carrying the price, plus a Notify me secondary. On the two snapbacks this whole block becomes Join the Waitlist.
  6. Answer-bearing accordions: The Details: 100% ELS cotton · Fit: Modern tailored · True to size · Care: Machine wash cold · hang dry · Delivery & Returns: 1–3 days · 14-day returns.

Below the fold — five modular sections, reorderable and editable per product. Both directions build the same five so a product template can be assembled without a developer. Open the mockups and press Sections in the top bar to see the boundaries.

Product — the five modular sections Per-product +
Each row is one Shopify section with its own schema. Reorder or remove per product.
SectionWhat it doesFields you fill per product
01 · StoryWhy this piece exists — the place, the motif, the claim that justifies the price. Direction A runs it as a quiet split; Direction B as a full-height parallax scene with the copy overlaid.Image · eyebrow · heading · two paragraphs · optional link
02 · Look closerThree detail crops with captions. The gold ampersand, the woven label, the tiled hangtag. This is where an embroidered garment earns $65 over a printed one.3 × (image + caption heading + one sentence)
03 · MadeFour spec rows — Fabric, Construction, Origin, Care — each with a short plain-language note, beside one macro image. Deliberately the same four labels on every product so they become comparable.4 × (label + value + note) · one image
04 · Fit & sizeFit paragraph, how-we-measure note, and the size table. Carries a marked slot for the on-body photography that doesn't exist yet.Fit copy · measuring note · table rows · on-body image (when shot)
05 · Wear it withThree or four related products chosen by styling logic, not popularity. Never a "best sellers" dump.Product picker (3–4)

Two optional extras when the catalogue justifies them: a per-product FAQ accordion (sizing between two sizes, gift wrapping, waitlist timing) and a reviews block — collect from day one, display only past ten reviews, and never on collection cards. See §08.

Why five and not more. Every section is a scroll the customer has to choose to keep making. Five is enough to carry story, proof, spec, fit and cross-sell — and short enough that the fifth still gets read. If a product needs a sixth, something else should come out.

Our Story 5 sections +
  1. 01 · Hero — the Atlantic at sunset with the saudade line. Direction B runs it as a parallax scene with the headline set at 100px+.
  2. 02 · Where it started — Torreira, the lagoon, translating for your parents, desenrasca. The founder's own words; better than anything we'd write.
  3. 03 · The moliceiro — what the boat actually is, the four annually-repainted panels, the UNESCO line. Direction A runs it as a navy band; Direction B pins it as a three-panel scroll scene over the lagoon.
  4. 04 · Timeline — 1911 · 1979 · 2025 · 2026. Four rows. Restraint is the point.
  5. 05 · Craft & close — the azulejo hangtag and horror vacui, then out to Shop or Contact.

Aimé Leon Dore's About page is two sentences. This one is longer because heritage is the product — but every section has to earn its place, and none of it should read as translated marketing.

Contact 5 sections +
  1. 01 · Header"A real person reads these." Plus the response promise: one business day, Mon–Fri, from New Jersey.
  2. 02 · Form & details — name, email, topic dropdown, optional order number, message. Beside it a plain definition list: email, location, response time, order/returns links, wholesale. The physical location is stated, not hidden — for a brand selling on trust that costs less than it saves.
  3. 03 · Before you write — four accordions that deflect the most common emails: between two sizes, when the snapbacks arrive, order hasn't moved, returning a gift.
  4. 04 · Service strip — ships from New Jersey · fourteen-day returns · US/Canada/Portugal. The same three proofs as the homepage, restated where someone is about to ask.
  5. 05 · Stay close — newsletter, same module as everywhere else.

The topic dropdown is doing real work: it routes wholesale and press away from the support queue, and it lets Hugo see at a glance what people actually write in about.

Craftsmanship & Materials Justifies the price +
  1. The cloth — 6 oz extra-long-staple cotton. Weight, hand, opacity, why ELS matters. Name the mill and country once the Supima/Peruvian question is settled.
  2. French Terry — placeholder section, marked Autumn, so the page has somewhere to grow.
  3. Embroidery vs print — macro shots side by side. This is the single most persuasive image on the site.
  4. The finish — custom woven neck label, no scratchy tags. Small detail, disproportionate effect.
  5. Technical panels — laser-cut perforations, why coastal wind is the reason.
  6. Made — small batches, hand-inspected, Toms River NJ, 1–3 day dispatch.
The Journal · Lookbook · Campaigns SEO + brand +
  1. One taxonomy, borrowed from Buck Mason: Stories · Interviews · Lookbooks · Collaborations. It tells whoever writes the content exactly what to make.
  2. Card grid — image, title, date, category tag. Tag filters across the top.
  3. Lookbook lives inside the Journal as a post type, not a separate template — one system to maintain. Direction B renders lookbook posts as the horizontal scroller.
  4. Launch content, three posts: why the striped houses are striped · what a moliceiro actually did · the compass and what it reads clockwise from North. All three are SEO-viable and all three are true.
Contact · Track Order · FAQ · Shipping & Returns · Policies Utility +
  1. Contact — form plus a real email address and the New Jersey location. For a brand selling on trust, hiding the address costs more than it saves.
  2. Track Your Order — Shopify's native order lookup, linked from the footer and the order confirmation email.
  3. FAQ — accordions grouped as Sizing · Shipping · Returns · Product care · Waitlist. The waitlist group matters: people need to know what joining means.
  4. Shipping & Returns — a table, not prose. US standard/expedited, Canada and Portugal standard/expedited international, with the self-serve returns portal linked at the top and in the footer.
  5. Privacy Policy · Terms of Service — from the supplied Mar_and_Alma_Store_Policies.pdf, placed in Shopify's policy fields so they appear at checkout automatically.
  6. Accessibility statement — see §09.
08

Apps & integrations

The brief says to prioritise speed and avoid unnecessary apps. Every app below has to earn its place against that. Six install; four don't.

NeedRecommendationWhy
Email & waitlistKlaviyo InstallRequired by the brief, and its back-in-stock flow is what makes both snapbacks sellable before inventory exists. The Coming Soon form posts here directly.
ReviewsJudge.me Install, but holdPhoto reviews, fast, cheap, and it can be styled to disappear into the theme. But: Kith, ALD and Buck Mason all show zero reviews — at this tier, star ratings read as defensiveness. Our recommendation: install and collect from day one, display only on the product page below the accordions, never on cards, never in the header, and never until there are at least ten. Three reviews looks worse than none.
Size chartShopify's native size chart No appThe measurements are five rows. A native metafield table styled in the theme beats a third-party script that loads on every page. Kiwi only if the client later wants per-collection charts.
Search & filteringShopify Search & Discovery InstallFirst-party, free, no runtime cost. Delivers Kith's facet depth natively.
ReturnsShopify self-serve returns NativeAlready in the brief. Portal linked in the footer and in FAQ.
Cookie consentShopify's native banner NativeShips with the customer privacy API. Selling into the EU (Portugal) makes it necessary.
AccessibilityNone Do not install an overlaySee §09. Overlays do not create legal immunity and have themselves attracted litigation. Build it right instead.
Image optimisationNone SkipShopify's CDN already serves responsive WebP via image_url filters. An app here adds weight to solve a solved problem.
In-cart upsellTheme-native Build, don't installWith four SKUs, an upsell app is absurd. A hand-built “pair it with” block in the cart drawer costs an hour and zero kilobytes.
PaymentsShopify Payments + Shop Pay, Apple Pay, Google Pay NativeBNPL: Shop Pay Instalments is the default recommendation — native, no extra script, US-eligible. Needs client confirmation, it's listed as unspecified in the brief.
MarketsShopify Markets NativeHandles CAD and EUR display, plus duties for Canada and Portugal. Calculated carrier rates where the plan supports them.

Net app count: three third-party apps (Klaviyo, Judge.me, Search & Discovery — the last being first-party). Everything else is native or built into the theme. That is what makes the performance budget in Direction B affordable.

09

ADA & accessibility

The client raised this on 23 August. It is handled as a design constraint from the first pixel, not a compliance patch at the end — which is also the only approach that actually works.

No overlay widget. Accessibility overlays (AccessiBe, accessiBe-likes, one-line-script “compliance” products) do not confer legal immunity, are opposed by most of the disability community, and have themselves been named in US lawsuits. Recommending one would be doing the client a disservice. The honest answer is a site that is built correctly plus a published accessibility statement, which is what both directions deliver.

Already built into both mockups

What's done

  • Contrast — every colour pair measured and tabulated in §06. Two golds exist precisely so small text never falls below 4.5:1.
  • Reduced motion — Direction B's pinned scene unpins into a normal stacked article, the lookbook becomes a plain horizontal scroller, the wipe and preloader disappear entirely. Same content, no motion.
  • Keyboard — visible focus rings on every interactive element, logical tab order, no keyboard traps, skip-safe accordions using native <details>.
  • Semantics — real headings in order, <table> with <caption> and scoped headers for the size chart, labelled form fields, aria-pressed on size and colour selectors.
  • Colour is never the only signal — unavailable sizes are dashed and disabled and labelled, not just greyed.
  • No horizontal page scroll at 390px; wide tables scroll inside their own container.
  • Decorative SVG is aria-hidden; meaningful imagery gets real alt text.
To do during build

What's left

  • Alt text on every product and lifestyle image — written by a person, describing the garment, not the file name. This is the most common failure on fashion stores.
  • Video — if lifestyle video is used, captions and no autoplay-with-sound.
  • Checkout — Shopify's checkout is largely out of our hands; test it anyway and document what we can't change.
  • Third-party scripts — audit Klaviyo pop-ups and Judge.me widgets for focus trapping. Pop-ups are the usual offender.
  • Automated + manual pass — axe DevTools on every template, then a keyboard-only walkthrough and a screen-reader pass on the purchase flow.
  • Accessibility statement page — stating the WCAG 2.1 AA target, known limitations, and a contact route for anyone who hits a barrier. This matters legally more than a widget does.
10

Build sequence

Ordered by dependency and by risk. Phase 1 is the one that should not wait for anything else.

01

Stop the leak

Blocks everything commercial

  • Connect marandalma.com to Shopify as primary; point .net at it as a redirect (Squarespace-side DNS access needed)
  • Publish the Coming Soon password page the same day
  • Wire the form to Klaviyo and test end to end with a real address
  • Kill the existing Etsy redirect only once the page is live
Week 1
02

Decide and set foundations

Needs client answers

  • Client picks Direction A or B
  • Brand book received; hex values and type licence confirmed
  • Supima vs Peruvian Pima resolved; compass artwork checked
  • Theme selected or custom theme scaffolded; design tokens built
Week 1–2
03

Catalogue & commerce

Independent of design

  • Import four products with the supplied copy, SEO titles and meta descriptions
  • Collections, metafields for cloth, size chart from the supplied measurements
  • Shopify Payments, Apple/Google/Shop Pay, BNPL once confirmed
  • Markets for US / CA / PT; standard and expedited rates; self-serve returns on
Week 2
04

Templates

The bulk of the work

  • Home, Shop, Product, Cart drawer
  • Our Story, Craftsmanship & Materials, Journal, Lookbook
  • Contact, Track Order, FAQ, Shipping & Returns, Policies, Accessibility
  • Direction B only: pinned scene, horizontal lookbook, wipe, transitions on one route pair
Week 2–4
05

Content & photography

Client-dependent

  • Shoot to the four-shot brief printed on every placeholder in the mockups
  • Macro embroidery and weave shots — the highest-leverage images on the site
  • Three launch Journal posts
  • Alt text written for every image
Runs parallel
06

QA & launch

Non-negotiable

  • Checkout, waitlist, back-in-stock, returns portal, domain redirect, all payment methods
  • Lighthouse / Core Web Vitals with the real image payload; strip anything that fails the budget
  • axe DevTools per template, keyboard-only walkthrough, screen-reader pass on the purchase flow
  • 390px through 1920px; iOS Safari specifically, for the sticky and 100svh behaviour
Week 4–5
11

Decisions needed

Nothing here blocks starting. Everything here blocks finishing. Tick them off as they land.