At Parallel Commerce, we know your returning customers are your best customers. They deserve more than just a generic “Welcome Back”.
That’s why we’re giving you access completely free to our Welcome Message Section, a custom Shopify section that automatically greets logged-in customers by name and asks for their feedback on recent purchases in a personal, targeted way.
If you’re looking to boost loyalty, increase repeat sales, and show your customers you truly care, this is one of the simplest ways to do it.
What Does It Do?
Think of it as an automated concierge for your shop:
✅ Greets customers by name – makes them feel recognised and valued.
✅ Asks for feedback only if they’ve purchased recently – shows you listen and care about their experience.
✅ Smartly hides feedback after they respond – so they don’t get annoyed by repeat prompts.
✅ Beautiful, responsive design – looks stunning on desktop and mobile.
Why You’ll Love It
⭐ Personalised Experience = Happy Customers
Make your shoppers feel like VIPs. Personal greetings go a long way in building loyalty and increasing repeat purchases.
⭐ Proactive Feedback Collection
Catch issues early, learn what products people love, and reduce customer service headaches.
⭐ Easy to Control
You choose:
- How far back to check for purchases (for example, 30 days)
- Which product to ask about (most expensive, least expensive, or random)
- How long to wait before asking again
⭐ No Developer Headaches
You don’t need to know Liquid, CSS, or JavaScript. We’ve done all the hard work for you. Just add it to your theme and customise the settings to suit your brand.
How It Works for Your Customers
It’s designed to feel natural and never annoying:
✅ If they’re logged in, they see a personal welcome.
✅ If they’ve purchased recently, they see a friendly feedback prompt.
✅ If they give feedback, the section remembers them and hides for a while.
✅ If they haven’t bought anything lately, they just see the welcome.
It’s all about showing the right message to the right customer at the right time.
Beautiful Design, No Compromise
Your brand deserves to look good. This section includes:
🎨 Gradient backgrounds with subtle glass effects
📱 Fully responsive layouts (desktop, tablet, mobile)
✨ Animated, interactive buttons with modern hover effects
Your shop stays professional, modern, and engaging without the need for a designer.
Who Should Use This?
✔️ Shopify brands that want better customer relationships
✔️ Stores looking to reduce support queries by catching issues early
✔️ Merchants who want repeat customers, not just one-time buyers
✔️ Anyone wanting an easy, plug-and-play way to stand out
The Code
Unsure how to use this? Watch this video that shows you how!
{% comment %}
Welcome Message Section
Displays personalized welcome for logged-in customers
Shows feedback prompt for recent purchases (configurable days back)
{% endcomment %}
{% if customer %}
{% comment %} Calculate days ago timestamp based on admin setting {% endcomment %}
{% assign days_back = section.settings.purchase_history_days | default: 30 %}
{% assign seconds_back = days_back | times: 86400 %}
{% assign cutoff_date = 'now' | date: '%s' | plus: 0 | minus: seconds_back %}
{% comment %} Find selected item from recent orders based on admin preference {% endcomment %}
{% assign has_recent_order = false %}
{% assign selected_item = nil %}
{% assign product_selection = section.settings.product_selection | default: 'most_expensive' %}
{% for order in customer.orders limit: 10 %}
{% assign order_date = order.created_at | date: '%s' | plus: 0 %}
{% if order_date > cutoff_date and order.financial_status == 'paid' %}
{% assign has_recent_order = true %}
{% if product_selection == 'random' %}
{% comment %} For random selection, pick a random line item {% endcomment %}
{% assign random_index = order.line_items.size | modulo: 3 %}
{% assign selected_item = order.line_items[random_index] %}
{% else %}
{% comment %} For most/least expensive, compare all items {% endcomment %}
{% assign compare_price = 0 %}
{% if product_selection == 'least_expensive' %}
{% assign compare_price = 999999999 %}
{% endif %}
{% for line_item in order.line_items %}
{% assign item_price = line_item.final_price | times: 100 %}
{% if product_selection == 'most_expensive' %}
{% if item_price > compare_price %}
{% assign compare_price = item_price %}
{% assign selected_item = line_item %}
{% endif %}
{% elsif product_selection == 'least_expensive' %}
{% if item_price < compare_price %}
{% assign compare_price = item_price %}
{% assign selected_item = line_item %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% break %}
{% endif %}
{% endfor %}
<div class="welcome-message-container">
<div class="welcome-message-card">
{% comment %} Basic welcome message {% endcomment %}
<div class="welcome-content">
<div class="welcome-header">
<div class="welcome-icon">👋</div>
<div class="welcome-text">
<h2 class="welcome-title">Welcome back, {{ customer.first_name }}!</h2>
<p class="welcome-subtitle">We're glad to see you again.</p>
</div>
</div>
{% comment %} Recent purchase feedback section {% endcomment %}
{% if has_recent_order and selected_item %}
<div class="feedback-section" id="feedback-section" data-wait-days="{{ section.settings.feedback_wait_days | default: 7 }}">
<div class="feedback-content">
<div class="feedback-icon">💭</div>
<div class="feedback-text">
<h3 class="feedback-title">How are you enjoying your {{ selected_item.product.title }}?</h3>
<p class="feedback-subtitle">We'd love to hear about your experience!</p>
</div>
</div>
<div class="feedback-options">
<a href="{{ section.settings.happy_face_url | default: '#' }}"
class="feedback-emoji happy-emoji"
data-feedback-type="happy"
aria-label="I'm happy with my purchase">
<span class="emoji-text">😊</span>
<span class="emoji-label">Happy</span>
</a>
<a href="{{ section.settings.sad_face_url | default: '#' }}"
class="feedback-emoji sad-emoji"
data-feedback-type="sad"
aria-label="I'm not satisfied with my purchase">
<span class="emoji-text">😞</span>
<span class="emoji-label">Not Satisfied</span>
</a>
</div>
</div>
{% endif %}
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const feedbackSection = document.getElementById('feedback-section');
if (!feedbackSection) return;
const waitDays = parseInt(feedbackSection.dataset.waitDays) || 7;
const storageKey = 'welcome_feedback_clicked';
// Check if user has clicked feedback recently
const lastClicked = localStorage.getItem(storageKey);
if (lastClicked) {
const lastClickedDate = new Date(lastClicked);
const now = new Date();
const daysSinceClick = (now - lastClickedDate) / (1000 * 60 * 60 * 24);
if (daysSinceClick < waitDays) {
feedbackSection.style.display = 'none';
return;
}
}
// Add click handlers to feedback buttons
const feedbackButtons = feedbackSection.querySelectorAll('.feedback-emoji');
feedbackButtons.forEach(button => {
button.addEventListener('click', function(e) {
// Store the click timestamp
localStorage.setItem(storageKey, new Date().toISOString());
// Hide the feedback section
feedbackSection.style.display = 'none';
// Add a smooth fade-out animation
feedbackSection.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
feedbackSection.style.opacity = '0';
feedbackSection.style.transform = 'translateY(-10px)';
setTimeout(() => {
feedbackSection.style.display = 'none';
}, 300);
});
});
});
</script>
{% endif %}
<style>
.welcome-message-container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
}
.welcome-message-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 25px;
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.15);
position: relative;
overflow: hidden;
animation: slideInUp 0.6s ease-out;
}
.welcome-message-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
pointer-events: none;
}
.welcome-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
position: relative;
z-index: 1;
}
.welcome-header {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
max-width: 33.333%;
}
.welcome-icon {
font-size: 2.5rem;
animation: bounce 2s infinite;
flex-shrink: 0;
}
.welcome-text {
flex: 1;
}
.welcome-title {
font-size: 2.2rem;
font-weight: 700;
color: white;
margin-bottom: 5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.welcome-subtitle {
font-size: 1.2rem;
color: rgba(255,255,255,0.9);
margin: 0;
font-weight: 300;
}
.feedback-section {
background: rgba(255,255,255,0.95);
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
animation: fadeInUp 0.8s ease-out 0.3s both;
flex: 2;
min-width: 66.666%;
}
.feedback-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.feedback-icon {
font-size: 1.8rem;
animation: pulse 2s infinite;
flex-shrink: 0;
}
.feedback-text {
flex: 1;
}
.feedback-title {
font-size: 1.3rem;
font-weight: 600;
color: #333;
margin-bottom: 3px;
line-height: 1.3;
}
.feedback-subtitle {
font-size: 1rem;
color: #666;
margin: 0;
font-weight: 400;
}
.feedback-options {
display: flex;
gap: 15px;
flex-shrink: 0;
}
.feedback-emoji {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
padding: 12px 15px;
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 90px;
height: 80px;
position: relative;
overflow: hidden;
justify-content: center;
}
.feedback-emoji::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.happy-emoji {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
}
.sad-emoji {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
color: white;
}
.feedback-emoji:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.feedback-emoji:hover::before {
opacity: 1;
}
.emoji-text {
font-size: 2.5rem;
margin-bottom: 5px;
display: block;
transition: transform 0.3s ease;
line-height: 1;
}
.feedback-emoji:hover .emoji-text {
transform: scale(1.1);
}
.emoji-label {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1;
text-align: center;
}
/* Animations */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.welcome-content {
flex-direction: column;
gap: 20px;
}
.welcome-header {
max-width: 100%;
justify-content: center;
}
.feedback-section {
flex-direction: column;
gap: 15px;
min-width: 100%;
}
.feedback-content {
text-align: center;
}
}
@media (max-width: 768px) {
.welcome-message-container {
padding: 10px;
}
.welcome-message-card {
padding: 25px 20px;
border-radius: 12px;
}
.welcome-content {
gap: 25px;
}
.welcome-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.welcome-icon {
font-size: 3rem;
}
.welcome-title {
font-size: 2rem;
margin-bottom: 8px;
}
.welcome-subtitle {
font-size: 1.1rem;
}
.feedback-section {
padding: 25px 20px;
border-radius: 10px;
gap: 20px;
}
.feedback-content {
flex-direction: column;
gap: 15px;
text-align: center;
}
.feedback-icon {
font-size: 2.2rem;
}
.feedback-title {
font-size: 1.4rem;
margin-bottom: 8px;
}
.feedback-subtitle {
font-size: 1rem;
}
.feedback-options {
gap: 20px;
justify-content: center;
}
.feedback-emoji {
width: 100px;
height: 90px;
padding: 15px;
border-radius: 12px;
}
.emoji-text {
font-size: 2.8rem;
margin-bottom: 8px;
}
.emoji-label {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.welcome-message-container {
padding: 8px;
}
.welcome-message-card {
padding: 20px 15px;
}
.welcome-content {
gap: 20px;
}
.welcome-header {
gap: 12px;
}
.welcome-icon {
font-size: 2.5rem;
}
.welcome-title {
font-size: 1.8rem;
margin-bottom: 6px;
}
.welcome-subtitle {
font-size: 1rem;
}
.feedback-section {
padding: 20px 15px;
gap: 18px;
}
.feedback-content {
gap: 12px;
}
.feedback-icon {
font-size: 1.8rem;
}
.feedback-title {
font-size: 1.2rem;
margin-bottom: 6px;
line-height: 1.4;
}
.feedback-subtitle {
font-size: 0.95rem;
line-height: 1.4;
}
.feedback-options {
gap: 15px;
flex-direction: row;
justify-content: center;
}
.feedback-emoji {
width: 85px;
height: 80px;
padding: 12px;
}
.emoji-text {
font-size: 2.4rem;
margin-bottom: 6px;
}
.emoji-label {
font-size: 0.8rem;
}
}
@media (max-width: 360px) {
.welcome-message-card {
padding: 18px 12px;
}
.welcome-title {
font-size: 1.6rem;
}
.welcome-subtitle {
font-size: 0.95rem;
}
.feedback-section {
padding: 18px 12px;
}
.feedback-title {
font-size: 1.1rem;
}
.feedback-subtitle {
font-size: 0.9rem;
}
.feedback-options {
gap: 12px;
}
.feedback-emoji {
width: 75px;
height: 70px;
padding: 10px;
}
.emoji-text {
font-size: 2.2rem;
}
.emoji-label {
font-size: 0.75rem;
}
}
</style>
{% schema %}
{
"name": "Welcome Message",
"tag": "section",
"class": "section",
"settings": [
{
"type": "range",
"id": "purchase_history_days",
"label": "Purchase History Duration",
"min": 7,
"max": 100,
"step": 1,
"default": 30,
"info": "How many days back to check for recent purchases"
},
{
"type": "select",
"id": "product_selection",
"label": "Product Selection Method",
"options": [
{
"value": "most_expensive",
"label": "Most Expensive Item"
},
{
"value": "least_expensive",
"label": "Least Expensive Item"
},
{
"value": "random",
"label": "Random Item"
}
],
"default": "most_expensive",
"info": "Which product to ask for feedback about"
},
{
"type": "url",
"id": "happy_face_url",
"label": "Happy Face Link URL",
"info": "Where to send customers when they click the happy face"
},
{
"type": "url",
"id": "sad_face_url",
"label": "Sad Face Link URL",
"info": "Where to send customers when they click the sad face"
},
{
"type": "range",
"id": "feedback_wait_days",
"label": "Feedback Wait Duration",
"min": 1,
"max": 14,
"step": 1,
"default": 7,
"info": "How many days to wait before showing the feedback section again"
}
],
"presets": [
{
"name": "Welcome Message"
}
]
}
{% endschema %}Why Free?
We believe great experiences drive sales. When Shopify merchants grow, so do we. Giving you this tool for free is our way of showing the power of smart, personal eCommerce and giving you a taste of what we can do together.
If you’re serious about building loyalty, increasing repeat sales, and delighting your customers, don’t wait.
Parallel Commerce – Let’s transform your eCommerce together.
Need Custom Help?
If you want this section fully installed, styled to match your brand, or customised further, Parallel Commerce offers affordable setup and support packages.
Just ask. We’re here to help.
📩 Ready to Transform Your Customer Experience?
Enter your email now and get started for free.
Looking for other great Shopify Sections? Check out these!
