Episode 16: Content Snippets & Localization
Managing Reusable Content and Building Multilingual Portal Experiences
Introduction
Creating scalable, maintainable portals requires effective content management and global accessibility. Content snippets provide centralized control over reusable text and HTML elements, while localization ensures your portal serves diverse audiences effectively. This episode teaches you how to implement robust content management systems using Power Pages’ content snippets and create comprehensive multilingual experiences that maintain consistency across languages while adapting to local requirements and cultural nuances.
Key Concepts
- Content Snippets: Centralized, reusable content blocks for consistent messaging and easy maintenance
- Localization Strategy: Comprehensive approach to multilingual content, cultural adaptation, and regional customization
- Translation Management: Systematic processes for managing multilingual content lifecycle
- Cultural Adaptation: Beyond translation - adapting UI, formats, and content for local preferences
- Content Governance: Establishing workflows for content approval, updates, and quality assurance
Learning Objectives
By the end of this episode, you will be able to:
- Create and manage sophisticated content snippet systems for scalable content maintenance
- Implement comprehensive localization strategies supporting multiple languages and regions
- Build translation management workflows that ensure content quality and consistency
- Design cultural adaptation systems that go beyond simple text translation
- Establish content governance processes for multilingual portal management
Why Content Snippets & Localization Matter
Professional portals serve diverse audiences with varying language needs and cultural expectations. Content snippets eliminate content duplication, reduce maintenance overhead, and ensure message consistency across your portal. Effective localization expands market reach, improves user engagement, and demonstrates cultural sensitivity, while proper content management reduces errors and streamlines updates across multiple languages.
Step-by-Step Guide
1. Advanced Content Snippet Architecture
Strategic Content Snippet Organization:
<!-- Content Snippet Categories and Naming Conventions -->
<!-- Navigation and UI Elements -->
{{ snippets['nav.main.home'] }} <!-- "Home" -->
{{ snippets['nav.main.products'] }} <!-- "Products" -->
{{ snippets['nav.main.support'] }} <!-- "Support" -->
{{ snippets['nav.breadcrumb.separator'] }} <!-- " > " -->
<!-- Form Labels and Messages -->
{{ snippets['form.label.first-name'] }} <!-- "First Name" -->
{{ snippets['form.label.email-required'] }} <!-- "Email Address *" -->
{{ snippets['form.validation.email-invalid'] }} <!-- "Please enter a valid email address" -->
{{ snippets['form.success.contact-submitted'] }}<!-- "Thank you! Your message has been sent." -->
<!-- Business Content -->
{{ snippets['content.company.tagline'] }} <!-- "Your trusted technology partner" -->
{{ snippets['content.legal.privacy-notice'] }} <!-- Privacy policy snippet -->
{{ snippets['content.support.business-hours'] }}<!-- "Monday-Friday, 9 AM - 5 PM EST" -->
<!-- Error Messages and System Notifications -->
{{ snippets['error.access-denied'] }} <!-- "Access denied. Please contact support." -->
{{ snippets['error.session-expired'] }} <!-- "Your session has expired. Please log in again." -->
{{ snippets['notification.maintenance-mode'] }} <!-- Maintenance notification -->
<!-- Marketing and Promotional Content -->
{{ snippets['promo.current.banner'] }} <!-- Current promotional banner -->
{{ snippets['cta.newsletter.signup'] }} <!-- Newsletter signup call-to-action -->
{{ snippets['testimonial.featured.quote'] }} <!-- Featured customer testimonial -->Dynamic Content Snippets with Variables:
<!-- Parameterized Snippets for Flexible Content -->
<!-- Snippet: 'welcome-message-personalized' -->
<!-- Content: "Welcome back, {name}! You have {count} new {items}." -->
<!-- Usage with variables -->
{% assign snippet_content = snippets['welcome-message-personalized'] %}
{% assign personalized_message = snippet_content
| replace: '{name}', user.fullname
| replace: '{count}', new_notifications.size
| replace: '{items}', new_notifications.size | pluralize: 'notification', 'notifications' %}
<div class="welcome-banner">
{{ personalized_message }}
</div>
<!-- Snippet: 'product-availability-notice' -->
<!-- Content: "Only {quantity} left in stock for {product}! Order by {date} for {shipping}." -->
{% for product in featured_products %}
{% assign availability_notice = snippets['product-availability-notice']
| replace: '{quantity}', product.stock_quantity
| replace: '{product}', product.name
| replace: '{date}', shipping_cutoff_date
| replace: '{shipping}', shipping_method %}
<div class="product-notice">{{ availability_notice }}</div>
{% endfor %}Advanced Snippet Management System:
<!-- Snippet Registry for Organized Management -->
{% assign snippet_registry = site.data.snippet_registry %}
<div class="page-header">
<!-- Dynamic header based on page type -->
{% case page.template %}
{% when 'product-listing' %}
<h1>{{ snippets[snippet_registry.headers.product_catalog] }}</h1>
<p>{{ snippets[snippet_registry.descriptions.product_browsing] }}</p>
{% when 'support-portal' %}
<h1>{{ snippets[snippet_registry.headers.support_center] }}</h1>
<p>{{ snippets[snippet_registry.descriptions.support_help] }}</p>
{% when 'user-profile' %}
<h1>{{ snippets[snippet_registry.headers.profile_management] }}</h1>
<p>{{ snippets[snippet_registry.descriptions.profile_settings] }}</p>
{% else %}
<h1>{{ snippets[snippet_registry.headers.default] }}</h1>
{% endcase %}
</div>
<!-- Contextual Content Based on User Role -->
{% if user.roles contains 'Premium Customer' %}
<div class="premium-notice">
{{ snippets['content.premium.welcome-message'] }}
</div>
{% elsif user.roles contains 'Trial User' %}
<div class="trial-notice">
{{ snippets['content.trial.upgrade-prompt'] }}
</div>
{% endif %}
<!-- Region-Specific Content -->
{% assign user_region = user.address.country | default: 'US' %}
{% assign region_snippet_key = 'content.region.' | append: user_region | downcase %}
{% if snippets[region_snippet_key] %}
<div class="region-specific-content">
{{ snippets[region_snippet_key] }}
</div>
{% endif %}2. Comprehensive Localization Implementation
Multi-Language Site Structure Setup:
<!-- Language Detection and Selection -->
{% assign supported_languages = site.supported_languages %}
{% assign current_language = request.language | default: site.default_language %}
{% assign user_preferred_language = user.preferred_language | default: current_language %}
<!-- Language Switcher Component -->
<div class="language-switcher">
<div class="current-language">
<span class="language-flag">{{ supported_languages[current_language].flag }}</span>
<span class="language-name">{{ supported_languages[current_language].name }}</span>
<span class="dropdown-arrow">▼</span>
</div>
<div class="language-options">
{% for language in supported_languages %}
{% unless language.code == current_language %}
<a href="{{ page.url }}?lang={{ language.code }}" class="language-option">
<span class="language-flag">{{ language.flag }}</span>
<span class="language-name">{{ language.name }}</span>
<span class="language-code">({{ language.code | upcase }})</span>
</a>
{% endunless %}
{% endfor %}
</div>
</div>
<!-- Localized Content Loading -->
{% assign localized_snippets = snippets | where: 'language', current_language %}
{% assign fallback_snippets = snippets | where: 'language', site.default_language %}
<!-- Function to get localized snippet with fallback -->
{% capture get_localized_snippet %}
{% assign snippet_key = include.key %}
{% assign localized_value = localized_snippets[snippet_key] %}
{% if localized_value %}
{{ localized_value }}
{% else %}
{{ fallback_snippets[snippet_key] }}
{% endif %}
{% endcapture %}Advanced Translation Management:
<!-- Translation Status Tracking -->
{% assign translation_status = site.data.translation_status %}
<div class="content-management-dashboard">
<h2>Translation Status Overview</h2>
<div class="translation-stats">
{% for language in supported_languages %}
{% assign lang_code = language.code %}
{% assign total_snippets = snippets | where: 'language', site.default_language | size %}
{% assign translated_snippets = snippets | where: 'language', lang_code | size %}
{% assign completion_percentage = translated_snippets | divided_by: total_snippets | times: 100 %}
<div class="language-status-card">
<div class="language-header">
<span class="language-flag">{{ language.flag }}</span>
<span class="language-name">{{ language.name }}</span>
</div>
<div class="completion-status">
<div class="progress-bar">
<div class="progress-fill" style="width: {{ completion_percentage }}%"></div>
</div>
<span class="progress-text">{{ completion_percentage | round }}% Complete</span>
</div>
<div class="status-details">
<p>{{ translated_snippets }} of {{ total_snippets }} snippets translated</p>
{% assign missing_count = total_snippets | minus: translated_snippets %}
{% if missing_count > 0 %}
<p class="missing-translations">{{ missing_count }} translations needed</p>
{% endif %}
</div>
<div class="language-actions">
<a href="/admin/translations/{{ lang_code }}" class="btn btn-outline-primary btn-sm">
Manage Translations
</a>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- Translation Workflow Management -->
<div class="translation-workflow">
<h3>Recent Translation Updates</h3>
{% assign recent_translations = site.data.translation_logs | sort: 'updated_date' | reverse | limit: 10 %}
<div class="translation-log">
{% for translation in recent_translations %}
<div class="log-entry">
<div class="log-header">
<span class="snippet-name">{{ translation.snippet_name }}</span>
<span class="language-badge">{{ translation.language }}</span>
<span class="update-date">{{ translation.updated_date | date: "%b %d, %Y" }}</span>
</div>
<div class="log-details">
<p>Updated by: {{ translation.updated_by }}</p>
{% if translation.review_status %}
<span class="review-status status-{{ translation.review_status }}">
{{ translation.review_status | capitalize }}
</span>
{% endif %}
</div>
{% if translation.changes %}
<div class="change-summary">
<details>
<summary>View Changes</summary>
<div class="diff-view">
<div class="diff-old">{{ translation.changes.before }}</div>
<div class="diff-new">{{ translation.changes.after }}</div>
</div>
</details>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>3. Cultural Adaptation Beyond Translation
Region-Specific Formatting and Conventions:
<!-- Cultural Adaptation Engine -->
{% assign cultural_settings = site.data.cultural_settings[current_language] %}
<!-- Date and Time Formatting -->
{% assign localized_date_format = cultural_settings.date_format | default: "%B %d, %Y" %}
{% assign localized_time_format = cultural_settings.time_format | default: "%I:%M %p" %}
<div class="event-listing">
{% for event in upcoming_events %}
<div class="event-card">
<h4>{{ event.title }}</h4>
<div class="event-datetime">
<!-- Culturally appropriate date/time display -->
{% case current_language %}
{% when 'en-US' %}
{{ event.date | date: "%m/%d/%Y" }} at {{ event.time | date: "%I:%M %p" }}
{% when 'en-GB' %}
{{ event.date | date: "%d/%m/%Y" }} at {{ event.time | date: "%H:%M" }}
{% when 'de-DE' %}
{{ event.date | date: "%d.%m.%Y" }} um {{ event.time | date: "%H:%M" }} Uhr
{% when 'fr-FR' %}
{{ event.date | date: "%d/%m/%Y" }} à {{ event.time | date: "%H:%M" }}
{% else %}
{{ event.date | date: localized_date_format }} {{ event.time | date: localized_time_format }}
{% endcase %}
</div>
</div>
{% endfor %}
</div>
<!-- Currency and Number Formatting -->
{% assign currency_symbol = cultural_settings.currency.symbol %}
{% assign currency_position = cultural_settings.currency.position %}
{% assign decimal_separator = cultural_settings.number_format.decimal %}
{% assign thousands_separator = cultural_settings.number_format.thousands %}
<div class="pricing-table">
{% for plan in subscription_plans %}
<div class="pricing-card">
<h4>{{ plan.name }}</h4>
<div class="price">
{% if currency_position == 'before' %}
{{ currency_symbol }}{{ plan.price | number_format: 2, decimal_separator, thousands_separator }}
{% else %}
{{ plan.price | number_format: 2, decimal_separator, thousands_separator }}{{ currency_symbol }}
{% endif %}
<span class="price-period">{{ snippets['pricing.period.' | append: current_language] }}</span>
</div>
</div>
{% endfor %}
</div>
<!-- Address and Contact Information Formatting -->
<div class="contact-info">
{% case cultural_settings.address_format %}
{% when 'us' %}
<address>
{{ company.street }}<br>
{{ company.city }}, {{ company.state }} {{ company.zip }}<br>
{{ company.country }}
</address>
{% when 'uk' %}
<address>
{{ company.street }}<br>
{{ company.city }}<br>
{{ company.postcode }}<br>
{{ company.country }}
</address>
{% when 'de' %}
<address>
{{ company.street }}<br>
{{ company.zip }} {{ company.city }}<br>
{{ company.country }}
</address>
{% else %}
<address>
{{ company.street }}<br>
{{ company.city }} {{ company.postal_code }}<br>
{{ company.country }}
</address>
{% endcase %}
</div>4. Dynamic Content Personalization with Localization
User-Centric Content Adaptation:
<!-- Advanced Personalization Engine -->
{% assign user_profile = user.extended_profile %}
{% assign user_preferences = user_profile.preferences %}
{% assign user_location = user_profile.location %}
<!-- Content Adaptation Matrix -->
{% assign content_matrix = site.data.content_personalization %}
{% assign user_segment = content_matrix.segments[user.customer_type] %}
{% assign regional_content = content_matrix.regions[user_location.country] %}
<div class="personalized-dashboard">
<!-- Localized Welcome Message with Personalization -->
<div class="welcome-section">
{% assign welcome_template = snippets['welcome.template.' | append: current_language] %}
{% assign personalized_welcome = welcome_template
| replace: '{name}', user.fullname
| replace: '{location}', user_location.city
| replace: '{weather}', user_location.current_weather
| replace: '{local_time}', 'now' | date: cultural_settings.time_format %}
<h1>{{ personalized_welcome }}</h1>
</div>
<!-- Culturally Relevant Product Recommendations -->
<div class="recommendations-section">
<h2>{{ snippets['recommendations.header.' | append: current_language] }}</h2>
{% assign regional_products = products
| where: 'available_regions', user_location.country
| where: 'cultural_relevance', cultural_settings.preferences %}
<div class="product-grid">
{% for product in regional_products limit: 6 %}
<div class="product-card">
<img src="{{ product.image }}" alt="{{ product.name }}">
<h4>{{ product.localized_names[current_language] | default: product.name }}</h4>
<!-- Localized Description -->
<p>{{ product.descriptions[current_language] | default: product.description | truncate: 100 }}</p>
<!-- Cultural Price Display -->
<div class="price">
{% assign localized_price = product.regional_pricing[user_location.country] | default: product.price %}
{% include 'format-currency', amount: localized_price, currency: regional_content.currency %}
</div>
<!-- Localized Call-to-Action -->
<button class="btn btn-primary">
{{ snippets['product.cta.' | append: current_language] }}
</button>
</div>
{% endfor %}
</div>
</div>
<!-- Region-Specific Services and Offers -->
<div class="regional-services">
<h2>{{ snippets['services.regional.header.' | append: current_language] }}</h2>
{% assign available_services = services
| where: 'regions', user_location.country
| where: 'languages', current_language %}
{% for service in available_services %}
<div class="service-card">
<div class="service-icon">{{ service.icon }}</div>
<h4>{{ service.names[current_language] | default: service.name }}</h4>
<p>{{ service.descriptions[current_language] | default: service.description }}</p>
<!-- Regional Availability Information -->
<div class="availability-info">
{% assign availability_text = snippets['service.availability.' | append: current_language] %}
{{ availability_text | replace: '{location}', user_location.region }}
</div>
<!-- Contact Information in Local Format -->
<div class="contact-details">
{% assign local_phone = service.contact.phones[user_location.country] %}
{% if local_phone %}
<p>{{ snippets['contact.phone.' | append: current_language] }}:
{{ local_phone | format_phone: cultural_settings.phone_format }}</p>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>5. Content Management Workflow Integration
Automated Translation Workflow:
<!-- Translation Management Dashboard -->
<div class="translation-management-system">
<!-- Content Review Queue -->
<div class="review-queue">
<h3>{{ snippets['admin.review.queue.title.' | append: current_language] }}</h3>
{% assign pending_reviews = site.data.translation_queue | where: 'status', 'pending_review' %}
<div class="queue-items">
{% for item in pending_reviews %}
<div class="queue-item" data-item-id="{{ item.id }}">
<div class="item-header">
<span class="snippet-name">{{ item.snippet_name }}</span>
<span class="target-language">{{ item.target_language }}</span>
<span class="submission-date">{{ item.submitted_date | date: "%b %d, %Y" }}</span>
</div>
<div class="item-content">
<div class="original-content">
<h5>Original ({{ item.source_language }}):</h5>
<p>{{ item.original_content }}</p>
</div>
<div class="translated-content">
<h5>Translation ({{ item.target_language }}):</h5>
<p>{{ item.translated_content }}</p>
</div>
</div>
<div class="item-actions">
<button class="btn btn-success btn-sm" onclick="approveTranslation('{{ item.id }}')">
{{ snippets['admin.action.approve.' | append: current_language] }}
</button>
<button class="btn btn-warning btn-sm" onclick="requestRevision('{{ item.id }}')">
{{ snippets['admin.action.revise.' | append: current_language] }}
</button>
<button class="btn btn-danger btn-sm" onclick="rejectTranslation('{{ item.id }}')">
{{ snippets['admin.action.reject.' | append: current_language] }}
</button>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- Translation Analytics -->
<div class="translation-analytics">
<h3>{{ snippets['admin.analytics.title.' | append: current_language] }}</h3>
<div class="analytics-grid">
{% assign analytics = site.data.translation_analytics %}
<div class="analytics-card">
<div class="metric-value">{{ analytics.total_snippets }}</div>
<div class="metric-label">{{ snippets['analytics.total.snippets.' | append: current_language] }}</div>
</div>
<div class="analytics-card">
<div class="metric-value">{{ analytics.completion_rate }}%</div>
<div class="metric-label">{{ snippets['analytics.completion.rate.' | append: current_language] }}</div>
</div>
<div class="analytics-card">
<div class="metric-value">{{ analytics.pending_translations }}</div>
<div class="metric-label">{{ snippets['analytics.pending.count.' | append: current_language] }}</div>
</div>
</div>
</div>
</div>
<!-- Bulk Translation Management -->
<div class="bulk-translation-tools">
<h3>{{ snippets['admin.bulk.tools.title.' | append: current_language] }}</h3>
<div class="bulk-actions">
<div class="action-group">
<label for="sourceLanguage">{{ snippets['admin.source.language.' | append: current_language] }}:</label>
<select id="sourceLanguage">
{% for language in supported_languages %}
<option value="{{ language.code }}">{{ language.name }}</option>
{% endfor %}
</select>
</div>
<div class="action-group">
<label for="targetLanguages">{{ snippets['admin.target.languages.' | append: current_language] }}:</label>
<select id="targetLanguages" multiple>
{% for language in supported_languages %}
<option value="{{ language.code }}">{{ language.name }}</option>
{% endfor %}
</select>
</div>
<div class="action-group">
<button class="btn btn-primary" onclick="exportForTranslation()">
{{ snippets['admin.export.translation.' | append: current_language] }}
</button>
<button class="btn btn-secondary" onclick="importTranslations()">
{{ snippets['admin.import.translation.' | append: current_language] }}
</button>
</div>
</div>
</div>Practical Example: Global E-commerce Portal
Let’s implement a complete multilingual e-commerce product page:
<!-- multilingual-product-page.html -->
{% extends "localized-layout.html" %}
{% assign product_id = request.params.id %}
{% assign product = entities.product[product_id] %}
<!-- SEO and Meta Tags with Localization -->
{% block title %}{{ product.localized_names[current_language] | default: product.name }} - {{ snippets['site.name.' | append: current_language] }}{% endblock %}
{% block description %}{{ product.descriptions[current_language] | default: product.description | truncate: 160 }}{% endblock %}
{% block content %}
<div class="product-detail-page">
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb" aria-label="{{ snippets['nav.breadcrumb.label.' | append: current_language] }}">
<a href="/">{{ snippets['nav.home.' | append: current_language] }}</a>
{{ snippets['nav.breadcrumb.separator'] }}
<a href="/products">{{ snippets['nav.products.' | append: current_language] }}</a>
{{ snippets['nav.breadcrumb.separator'] }}
<span class="current">{{ product.localized_names[current_language] | default: product.name }}</span>
</nav>
<!-- Product Information Grid -->
<div class="product-grid">
<!-- Product Images -->
<div class="product-images">
<div class="main-image">
<img src="{{ product.primary_image }}" alt="{{ product.localized_names[current_language] | default: product.name }}">
</div>
<div class="thumbnail-gallery">
{% for image in product.gallery_images %}
<img src="{{ image.thumbnail }}" alt="{{ snippets['product.image.alt.' | append: current_language] }} {{ forloop.index }}"
onclick="showMainImage('{{ image.full_size }}')">
{% endfor %}
</div>
</div>
<!-- Product Details -->
<div class="product-details">
<h1>{{ product.localized_names[current_language] | default: product.name }}</h1>
<!-- Product Rating (with Cultural Considerations) -->
<div class="product-rating">
{% assign rating_display = cultural_settings.rating_system | default: 'stars' %}
{% case rating_display %}
{% when 'stars' %}
<div class="star-rating" data-rating="{{ product.average_rating }}">
{% for i in (1..5) %}
<span class="star {% if i <= product.average_rating %}filled{% endif %}">★</span>
{% endfor %}
</div>
{% when 'numeric' %}
<div class="numeric-rating">
{{ product.average_rating | round: 1 }}/5.0
</div>
{% when 'percentage' %}
<div class="percentage-rating">
{{ product.average_rating | times: 20 | round }}%
</div>
{% endcase %}
<span class="review-count">
({{ product.review_count }} {{ snippets['product.reviews.' | append: current_language] }})
</span>
</div>
<!-- Localized Description -->
<div class="product-description">
{{ product.descriptions[current_language] | default: product.description | newline_to_br }}
</div>
<!-- Regional Pricing -->
<div class="pricing-section">
{% assign user_region = user.location.country | default: 'US' %}
{% assign regional_price = product.regional_pricing[user_region] | default: product.base_price %}
{% assign regional_currency = regional_content.currency %}
<div class="price-display">
{% include 'format-currency', amount: regional_price, currency: regional_currency %}
</div>
{% if product.original_price and product.original_price > regional_price %}
<div class="original-price">
<del>{% include 'format-currency', amount: product.original_price, currency: regional_currency %}</del>
<span class="savings">{{ snippets['product.save.' | append: current_language] }}
{{ product.original_price | minus: regional_price | divided_by: product.original_price | times: 100 | round }}%
</span>
</div>
{% endif %}
<!-- Tax Information (Region-Specific) -->
<div class="tax-info">
{{ snippets['product.tax.info.' | append: user_region | append: '.' | append: current_language] }}
</div>
</div>
<!-- Availability and Shipping -->
<div class="availability-section">
{% assign regional_stock = product.regional_inventory[user_region] %}
{% if regional_stock > 0 %}
<div class="in-stock">
<span class="status-icon">✓</span>
{{ snippets['product.in.stock.' | append: current_language] }}
{% if regional_stock < 10 %}
({{ snippets['product.low.stock.' | append: current_language] | replace: '{count}', regional_stock }})
{% endif %}
</div>
<!-- Shipping Information -->
<div class="shipping-info">
{% assign shipping_method = shipping_options[user_region].standard %}
{{ snippets['product.shipping.standard.' | append: current_language] | replace: '{days}', shipping_method.delivery_days }}
</div>
{% else %}
<div class="out-of-stock">
<span class="status-icon">✗</span>
{{ snippets['product.out.of.stock.' | append: current_language] }}
</div>
{% endif %}
</div>
<!-- Add to Cart Section -->
<div class="purchase-section">
<form class="add-to-cart-form" method="post" action="/cart/add">
<input type="hidden" name="product_id" value="{{ product.id }}">
<input type="hidden" name="region" value="{{ user_region }}">
<div class="quantity-selector">
<label for="quantity">{{ snippets['product.quantity.' | append: current_language] }}:</label>
<input type="number" id="quantity" name="quantity" value="1" min="1" max="{{ regional_stock }}">
</div>
{% if regional_stock > 0 %}
<button type="submit" class="btn btn-primary btn-large add-to-cart-btn">
{{ snippets['product.add.to.cart.' | append: current_language] }}
</button>
{% else %}
<button type="button" class="btn btn-outline-primary btn-large notify-btn">
{{ snippets['product.notify.available.' | append: current_language] }}
</button>
{% endif %}
</form>
<!-- Wishlist -->
<button type="button" class="btn btn-outline-secondary wishlist-btn" data-product="{{ product.id }}">
<span class="wishlist-icon">♡</span>
{{ snippets['product.add.wishlist.' | append: current_language] }}
</button>
</div>
<!-- Product Features (Localized) -->
<div class="product-features">
<h3>{{ snippets['product.features.title.' | append: current_language] }}</h3>
<ul class="features-list">
{% for feature in product.features %}
<li>
<span class="feature-name">{{ feature.names[current_language] | default: feature.name }}:</span>
<span class="feature-value">{{ feature.values[current_language] | default: feature.value }}</span>
</li>
{% endfor %}
</ul>
</div>
<!-- Regional Compliance Information -->
{% assign compliance_info = product.compliance[user_region] %}
{% if compliance_info %}
<div class="compliance-section">
<h4>{{ snippets['product.compliance.title.' | append: current_language] }}</h4>
<div class="compliance-badges">
{% for certification in compliance_info.certifications %}
<span class="compliance-badge">
<img src="{{ certification.badge_image }}" alt="{{ certification.name }}">
{{ certification.display_names[current_language] | default: certification.name }}
</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
<!-- Customer Reviews (Localized) -->
<div class="reviews-section">
<h2>{{ snippets['reviews.section.title.' | append: current_language] }}</h2>
{% assign localized_reviews = product.reviews | where: 'language', current_language %}
{% assign fallback_reviews = product.reviews | where: 'language', site.default_language %}
<div class="reviews-list">
{% for review in localized_reviews limit: 5 %}
<div class="review-item">
<div class="review-header">
<div class="reviewer-name">{{ review.author_name }}</div>
<div class="review-rating">
{% for i in (1..5) %}
<span class="star {% if i <= review.rating %}filled{% endif %}">★</span>
{% endfor %}
</div>
<div class="review-date">{{ review.created_date | date: cultural_settings.date_format }}</div>
</div>
<div class="review-content">
<h4>{{ review.title }}</h4>
<p>{{ review.content }}</p>
</div>
{% if review.verified_purchase %}
<div class="verified-badge">
{{ snippets['reviews.verified.purchase.' | append: current_language] }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% if localized_reviews.size < 5 and fallback_reviews.size > 0 %}
<div class="fallback-reviews">
<h3>{{ snippets['reviews.other.languages.' | append: current_language] }}</h3>
{% for review in fallback_reviews limit: 3 %}
<div class="review-item translated">
<!-- Show fallback reviews with translation notice -->
<div class="translation-notice">
{{ snippets['reviews.translated.from.' | append: current_language] | replace: '{language}', review.language }}
</div>
<!-- Review content here -->
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
// Localized JavaScript functionality
const localizedStrings = {
addedToCart: {{ snippets['js.added.to.cart.' | append: current_language | json }},
addToWishlist: {{ snippets['js.add.to.wishlist.' | append: current_language | json }},
errorOccurred: {{ snippets['js.error.occurred.' | append: current_language | json }},
confirmRemove: {{ snippets['js.confirm.remove.' | append: current_language | json }}
};
// Initialize product page with localized functionality
document.addEventListener('DOMContentLoaded', function() {
initializeProductPage(localizedStrings);
});
</script>
{% endblock %}Troubleshooting Common Issues
Content Snippet and Localization Debugging:
- Missing Translations: Implement fallback mechanisms and translation status tracking
- Cultural Formatting Issues: Test date, currency, and address formats across regions
- Performance Impact: Cache localized content and optimize snippet loading
- Content Synchronization: Establish workflows for keeping translations current
- SEO Considerations: Implement hreflang tags and localized URL structures
Content Management Best Practices
Establishing Governance Workflows:
- Content Review Process: Multi-stage approval for sensitive or legal content
- Translation Quality Assurance: Native speaker reviews and consistency checks
- Update Propagation: Automated notification of content changes requiring translation
- Version Control: Track content changes and translation history
- Performance Monitoring: Regular audits of localization impact on site speed
Key Takeaways
Content snippets and localization create scalable, maintainable portal experiences that serve global audiences effectively. Focus on comprehensive content architecture, cultural adaptation beyond translation, and robust management workflows to build truly international portals that resonate with users in their preferred language and cultural context.
In the next episode, you’ll learn about Site Settings & Configuration to manage global portal behavior and customize functionality across your entire portal infrastructure.