/** Shopify CDN: Minification failed

Line 8:30 Unexpected bad string token
Line 8:55 Unterminated string token
Line 9:147 Unterminated string token

**/
Homepage Draft for Alfalab Men's Skincare Brand - Manus
I reviewed the product page, noting the layout, custom sections, and CSS details. Next, I'll document design specifics for an exact implementation.

Nu har jeg dokumenteret alle detaljer fra previewet. Bygger nu alle custom liquid blokke og sektioner...
Reviewed the product page preview and documented all design specs. Next, I will build custom liquid snippets and sections to match the layout precisely.

Built the related products section and the step-by-step implementation guide for the product page, progressing towards exact replication of the design preview.

Her er den komplette produktside-pakke — 1:1 med previewet. Guiden er i PRODUKTSIDE-GUIDE-1-1.md.
Hvad der er i pakken
Fil
Formål
alfalab-product.css
Al produktside-styling: breadcrumb, titel, pris, knapper, collapsibles
alfalab-related-products.liquid
Ny sektion: "Komplet rutinen" med produkt-picker blokke
PRODUKTSIDE-GUIDE-1-1.md
Komplet trin-for-trin guide
Nøglepunkter
Breadcrumb: Laves som en Custom Liquid blok øverst i Product information — koden er klar i guiden (Trin 2, Blok 1). Horizon har ikke en native breadcrumb-blok, så dette er den korrekte tilgang.
Alle blokke er Custom Liquid der giver dig præcis kontrol over layout og styling — ingen afhængighed af Horizons color schemes.
"Komplet rutinen" sektionen er en ny custom section med produkt-picker blokke. Tilføj den sidst på produktsiden og vælg NIGHT og GLOW som produkter.
Unikke templates per produkt (Trin 4 i guiden) er nødvendigt for at DAY, NIGHT og GLOW kan have forskellige "Komplet rutinen" produkter.
alfalab-produktside-v2.zip
Archive · 5.89 KB
Alfalab — Produktside Opsætning (1:1 med Preview)
Markdown · 4.57 KB
alfalab-product.css
Code · 8.70 KB
alfalab-related-products.liquid
File · 4.71 KB
View all files in this task
Task completed
How was this result?
Suggested follow-ups


GmailGoogle Drive


/* ============================================================
   ALFALAB — Product Page CSS Overrides
   Targets Horizon's "Product information" section
   ============================================================ */

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb,
.breadcrumbs,
nav[aria-label="breadcrumb"],
.product-breadcrumb {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 20px;
}

.breadcrumb a,
.breadcrumbs a,
nav[aria-label="breadcrumb"] a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
  opacity: 1;
}

/* ── Product eyebrow (category tag above title) ──────────── */
.product__text,
.product-meta__sku-label,
.product__vendor {
  font-family: 'Archivo', sans-serif;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  opacity: 0.55;
  margin-bottom: 8px;
}

/* ── Product title ───────────────────────────────────────── */
.product__title,
h1.product__title {
  font-family: 'Archivo', sans-serif !important;
  font-size: clamp(52px, 7vw, 80px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  color: #1a1a1a !important;
  margin: 0 0 8px 0 !important;
}

/* ── Product subtitle (custom liquid block) ──────────────── */
.alfalab-product-subtitle {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #888;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

/* ── Rating row ──────────────────────────────────────────── */
.product__rating,
.rating,
.spr-badge {
  font-size: 13px !important;
  margin-bottom: 16px;
}

/* ── Separator ───────────────────────────────────────────── */
.product__separator,
.product-form__separator {
  border: none;
  border-top: 1px solid #e6e6e6;
  margin: 20px 0;
}

/* ── Product description ─────────────────────────────────── */
.product__description,
.product-single__description {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #444;
  margin-bottom: 20px;
}

.product__description li,
.product-single__description li {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  padding-left: 4px;
}

/* ── Price ───────────────────────────────────────────────── */
.price,
.product__price,
.price__regular .price-item,
.price__sale .price-item {
  font-family: 'Archivo', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #1a1a1a !important;
}

.price__unit,
.unit-price {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #888 !important;
  letter-spacing: 0 !important;
  margin-left: 8px;
}

/* ── Add to cart button ──────────────────────────────────── */
.product-form__submit,
button[name="add"],
.btn--add-to-cart {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Archivo', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 18px 24px !important;
  width: 100% !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.product-form__submit:hover,
button[name="add"]:hover {
  background: #333 !important;
}

/* ── Bundle CTA (custom liquid block) ───────────────────── */
.alfalab-bundle-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border: 1px solid #e6e6e6;
  background: transparent;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-decoration: none;
  margin-top: 8px;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  box-sizing: border-box;
}

.alfalab-bundle-cta:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* ── Trust badges (custom liquid block) ─────────────────── */
.alfalab-trust-badges {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
  padding: 0;
}

.alfalab-trust-badges span {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  opacity: 0.5;
}

/* ── Collapsible rows ────────────────────────────────────── */
details.accordion,
.accordion,
details[class*="accordion"] {
  border-top: 1px solid #e6e6e6 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

details.accordion:last-of-type,
details[class*="accordion"]:last-of-type {
  border-bottom: 1px solid #e6e6e6 !important;
}

details.accordion summary,
details[class*="accordion"] summary {
  font-family: 'Archivo', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  padding: 18px 0 !important;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details.accordion summary::after,
details[class*="accordion"] summary::after {
  content: '+';
  font-size: 18px;
  font-weight: 300;
  color: #1a1a1a;
  transition: transform 0.2s;
}

details.accordion[open] summary::after,
details[class*="accordion"][open] summary::after {
  content: '−';
}

details.accordion .accordion__content,
details[class*="accordion"] .accordion__content {
  font-size: 14px;
  line-height: 1.65;
  color: #555;
  padding: 0 0 18px 0;
}

/* ── Product media / images ──────────────────────────────── */
.product__media,
.product-single__photo {
  border-radius: 0 !important;
}

.product__media-list {
  gap: 2px !important;
}

/* ── Product info column padding ─────────────────────────── */
.product__info-container,
.product__info-wrapper {
  padding-left: 48px !important;
  padding-right: 32px !important;
}

@media (max-width: 989px) {
  .product__info-container,
  .product__info-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .product__title,
  h1.product__title {
    font-size: clamp(40px, 10vw, 60px) !important;
  }
}

/* ── "Komplet rutinen" section (custom liquid) ───────────── */
.alfalab-related {
  background: #f5f5f5;
  padding: 80px 40px;
}

.alfalab-related__eyebrow {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  opacity: 0.5;
  margin: 0 0 16px;
}

.alfalab-related__heading {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1a1a1a;
  margin: 0 0 48px;
  line-height: 1.05;
}

.alfalab-related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-width: 900px;
}

.alfalab-related__card {
  background: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  text-decoration: none;
  color: #1a1a1a;
  transition: background 0.15s;
}

.alfalab-related__card:hover {
  background: #f0f0f0;
}

.alfalab-related__img {
  width: 80px;
  height: 100px;
  object-fit: cover;
  flex-shrink: 0;
}

.alfalab-related__card-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 2px;
}

.alfalab-related__card-sub {
  font-size: 13px;
  color: #888;
  margin: 0 0 8px;
}

.alfalab-related__card-price {
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .alfalab-related {
    padding: 60px 20px;
  }

  .alfalab-related__grid {
    grid-template-columns: 1fr;
  }
}