“You tell us what you need.We do the research.You get 3 good choices.”
{% comment %}
AFOKKO — Product Finder
Shopify Custom Liquid Section
Concept:
Customer tells Afokko what they need.
Afokko researches the market and returns 3 selected options.
{% endcomment %}
<section id="afokko-product-finder" class="afokko">
<style>
#afokko-product-finder {
--afokko-green: #1f6b4f;
--afokko-dark: #172018;
--afokko-muted: #69716b;
--afokko-light: #eef5f0;
--afokko-border: #dfe5df;
--afokko-white: #ffffff;
background: #f8faf7;
color: var(--afokko-dark);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#afokko-product-finder * {
box-sizing: border-box;
}
.afokko-container {
max-width: 1180px;
margin: auto;
padding: 0 24px;
}
/* HERO */
.afokko-hero {
padding: 90px 20px 100px;
text-align: center;
}
.afokko-label {
display: inline-block;
color: var(--afokko-green);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 20px;
}
.afokko-hero h1 {
max-width: 900px;
margin: auto;
font-size: clamp(42px, 7vw, 76px);
line-height: 1;
letter-spacing: -3px;
font-weight: 800;
}
.afokko-hero h1 span {
color: var(--afokko-green);
}
.afokko-hero p {
max-width: 680px;
margin: 28px auto;
color: var(--afokko-muted);
font-size: 18px;
line-height: 1.7;
}
.afokko-button {
border: 0;
background: var(--afokko-green);
color: white;
padding: 16px 24px;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: .2s;
}
.afokko-button:hover {
background: #174d39;
transform: translateY(-1px);
}
/* TRUST */
.afokko-trust {
display: flex;
justify-content: center;
gap: 35px;
flex-wrap: wrap;
margin-top: 35px;
color: var(--afokko-muted);
font-size: 13px;
}
/* PROCESS */
.afokko-process {
background: white;
border-top: 1px solid var(--afokko-border);
border-bottom: 1px solid var(--afokko-border);
padding: 80px 0;
}
.afokko-section-title {
text-align: center;
margin-bottom: 50px;
}
.afokko-section-title h2 {
font-size: 40px;
letter-spacing: -1.5px;
margin: 10px 0;
}
.afokko-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.afokko-step {
border-top: 2px solid var(--afokko-dark);
padding-top: 20px;
}
.afokko-step-number {
color: var(--afokko-green);
font-size: 12px;
font-weight: 800;
margin-bottom: 30px;
}
.afokko-step h3 {
font-size: 20px;
margin-bottom: 10px;
}
.afokko-step p {
color: var(--afokko-muted);
line-height: 1.6;
font-size: 14px;
}
/* REQUEST */
.afokko-request-wrapper {
padding: 90px 0;
}
.afokko-request {
max-width: 750px;
margin: auto;
background: white;
padding: 40px;
border-radius: 18px;
border: 1px solid var(--afokko-border);
box-shadow: 0 20px 60px rgba(20,40,30,.08);
}
.afokko-request h2 {
font-size: 34px;
letter-spacing: -1px;
margin-top: 0;
}
.afokko-request-intro {
color: var(--afokko-muted);
margin-bottom: 30px;
line-height: 1.6;
}
.afokko-field {
margin-bottom: 20px;
}
.afokko-field label {
display: block;
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
}
.afokko-field input,
.afokko-field textarea,
.afokko-field select {
width: 100%;
border: 1px solid var(--afokko-border);
border-radius: 9px;
padding: 14px;
font-size: 14px;
background: white;
outline: none;
}
.afokko-field textarea {
min-height: 120px;
resize: vertical;
}
.afokko-field input:focus,
.afokko-field textarea:focus,
.afokko-field select:focus {
border-color: var(--afokko-green);
box-shadow: 0 0 0 3px rgba(31,107,79,.1);
}
.afokko-two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.afokko-submit {
width: 100%;
margin-top: 10px;
}
.afokko-note {
margin-top: 15px;
padding: 14px;
border-radius: 9px;
background: var(--afokko-light);
color: var(--afokko-muted);
font-size: 12px;
line-height: 1.5;
}
/* SUCCESS */
.afokko-success {
display: none;
text-align: center;
padding: 30px 10px;
}
.afokko-success-icon {
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background: var(--afokko-light);
color: var(--afokko-green);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 800;
}
.afokko-success h2 {
margin-top: 20px;
}
.afokko-success p {
color: var(--afokko-muted);
line-height: 1.6;
}
/* CTA */
.afokko-final {
background: var(--afokko-dark);
color: white;
text-align: center;
padding: 90px 20px;
}
.afokko-final h2 {
font-size: 45px;
letter-spacing: -2px;
margin: 0 0 15px;
}
.afokko-final p {
color: #b8c2ba;
max-width: 600px;
margin: 0 auto 25px;
line-height: 1.6;
}
.afokko-final .afokko-button {
background: white;
color: var(--afokko-dark);
}
/* MOBILE */
@media(max-width: 800px) {
.afokko-hero {
padding: 65px 15px;
}
.afokko-hero h1 {
letter-spacing: -2px;
}
.afokko-steps {
grid-template-columns: 1fr 1fr;
}
.afokko-request {
padding: 25px;
}
}
@media(max-width: 550px) {
.afokko-steps {
grid-template-columns: 1fr;
}
.afokko-two {
grid-template-columns: 1fr;
}
.afokko-section-title h2 {
font-size: 31px;
}
.afokko-final h2 {
font-size: 34px;
}
.afokko-trust {
flex-direction: column;
gap: 10px;
}
}
</style>
<!-- HERO -->
<div class="afokko-hero">
<div class="afokko-label">
AFOKKO
</div>
<h1>
Tell us what you need.
<span>We find the best options.</span>
</h1>
<p>
Stop wasting hours comparing products.
Tell Afokko what you're looking for, your budget and your priorities.
We research the market and give you three carefully selected choices.
</p>
<button
class="afokko-button"
onclick="document.getElementById('afokko-request').scrollIntoView({behavior:'smooth'})">
Find My Product →
</button>
<div class="afokko-trust">
<span>✓ Quality researched</span>
<span>✓ Price compared</span>
<span>✓ 3 selected choices</span>
<span>✓ You make the final decision</span>
</div>
</div>
<!-- HOW IT WORKS -->
<div class="afokko-process">
<div class="afokko-container">
<div class="afokko-section-title">
<div class="afokko-label">
HOW AFOKKO WORKS
</div>
<h2>
From your need to the right choice.
</h2>
</div>
<div class="afokko-steps">
<div class="afokko-step">
<div class="afokko-step-number">
01
</div>
<h3>
Tell us
</h3>
<p>
Describe the product you need,
your budget and the features that matter to you.
</p>
</div>
<div class="afokko-step">
<div class="afokko-step-number">
02
</div>
<h3>
We research
</h3>
<p>
We compare quality, reviews,
specifications, sellers, shipping and prices.
</p>
</div>
<div class="afokko-step">
<div class="afokko-step-number">
03
</div>
<h3>
Get 3 choices
</h3>
<p>
We select three strong candidates:
Best Overall, Premium and Best Value.
</p>
</div>
<div class="afokko-step">
<div class="afokko-step-number">
04
</div>
<h3>
You choose
</h3>
<p>
You make the final decision.
Afokko then helps you complete the purchase.
</p>
</div>
</div>
</div>
</div>
<!-- REQUEST FORM -->
<div
id="afokko-request"
class="afokko-request-wrapper">
<div class="afokko-container">
<div class="afokko-request">
<div id="afokko-form-content">
<div class="afokko-label">
FIND MY PRODUCT
</div>
<h2>
What are you looking for?
</h2>
<p class="afokko-request-intro">
Give us the details below.
Our team will research the available options
and prepare three recommendations for you.
</p>
{% form 'contact', id: 'AfokkoProductRequest' %}
<input
type="hidden"
name="contact[subject]"
value="New Afokko Product Request">
<div class="afokko-field">
<label>
What product are you looking for? *
</label>
<input
type="text"
name="contact[product_request]"
placeholder="Example: ergonomic office chair"
required>
</div>
<div class="afokko-two">
<div class="afokko-field">
<label>
Your budget *
</label>
<select
name="contact[budget]"
required>
<option value="">
Select budget
</option>
<option>
Under €50
</option>
<option>
€50 – €100
</option>
<option>
€100 – €250
</option>
<option>
€250 – €500
</option>
<option>
€500+
</option>
<option>
Flexible
</option>
</select>
</div>
<div class="afokko-field">
<label>
Delivery country
</label>
<input
type="text"
name="contact[country]"
value="Italy">
</div>
</div>
<div class="afokko-field">
<label>
What matters most to you?
</label>
<textarea
name="contact[requirements]"
placeholder="Example: high quality, comfortable, specific size, brand preference, fast delivery..."></textarea>
</div>
<div class="afokko-field">
<label>
Your email *
</label>
<input
type="email"
name="contact[email]"
placeholder="you@example.com"
required>
</div>
<div class="afokko-note">
🔒 Your information is used only to process
your product request and contact you about the selected options.
</div>
<button
type="submit"
class="afokko-button afokko-submit">
Send My Request →
</button>
{% endform %}
</div>
<!-- SUCCESS MESSAGE -->
<div
id="afokko-success"
class="afokko-success">
<div class="afokko-success-icon">
✓
</div>
<h2>
Request received.
</h2>
<p>
Thank you for choosing Afokko.
We will research your request and prepare
three carefully selected options.
</p>
<button
class="afokko-button"
onclick="location.reload()">
Submit another request
</button>
</div>
</div>
</div>
</div>
<!-- FINAL CTA -->
<div class="afokko-final">
<div class="afokko-container">
<h2>
You don't need more choices.
You need the right ones.
</h2>
<p>
Afokko does the research.
You make the final choice.
</p>
<button
class="afokko-button"
onclick="document.getElementById('afokko-request').scrollIntoView({behavior:'smooth'})">
Find My Product →
</button>
</div>
</div>
<script>
document.addEventListener(
"DOMContentLoaded",
function() {
const form =
document.getElementById("AfokkoProductRequest");
if (!form) return;
form.addEventListener(
"submit",
function() {
setTimeout(function() {
const content =
document.getElementById("afokko-form-content");
const success =
document.getElementById("afokko-success");
if (content && success) {
content.style.display = "none";
success.style.display = "block";
}
}, 800);
}
);
}
);
</script>
</section>
{% schema %}
{
"name": "Afokko Product Finder",
"settings": [],
"presets": [
{
"name": "Afokko Product Finder"
}
]
}
{% endschema %}
