File: /var/www/html/wp-content/mu-plugins/ethnic-magento-web-design-page.php
<?php
/**
* Plugin Name: Ethnic Magento Web Design Page
* Description: Creates and renders the Magento Web Design sub-service page beneath Magento Development.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
function ethnic_magento_web_design_parent_id() {
$parent = get_page_by_path( 'services/ecommerce-development/magento-development' );
return $parent instanceof WP_Post ? (int) $parent->ID : 0;
}
function ethnic_magento_web_design_target_page() {
$page = get_page_by_path( 'services/ecommerce-development/magento-development/magento-web-design' );
return $page instanceof WP_Post ? $page : null;
}
function ethnic_magento_web_design_ensure_page() {
$parent_id = ethnic_magento_web_design_parent_id();
if ( ! $parent_id ) {
return;
}
$page = ethnic_magento_web_design_target_page();
$post = array(
'post_type' => 'page', 'post_title' => 'Magento Web Design', 'post_name' => 'magento-web-design',
'post_parent' => $parent_id, 'post_status' => 'publish', 'post_content' => '',
'comment_status' => 'closed', 'ping_status' => 'closed',
);
if ( $page ) {
if ( (int) $page->post_parent !== $parent_id || 'publish' !== $page->post_status || 'Magento Web Design' !== $page->post_title ) {
$post['ID'] = (int) $page->ID;
wp_update_post( $post );
}
return;
}
wp_insert_post( $post );
}
add_action( 'init', 'ethnic_magento_web_design_ensure_page', 20 );
function ethnic_magento_web_design_is_target() {
if ( is_admin() ) {
return false;
}
$page = ethnic_magento_web_design_target_page();
return $page && (int) get_queried_object_id() === (int) $page->ID;
}
function ethnic_magento_web_design_url( $path ) {
return home_url( '/' . trim( $path, '/' ) . '/' );
}
function ethnic_magento_web_design_contact_url( $intent ) {
$args = array( 'intent' => $intent, 'service' => 'magento-web-design' );
return function_exists( 'ethnic_consultation_route_contact_url' )
? ethnic_consultation_route_contact_url( $args, ethnic_magento_web_design_url( 'contact-us' ) )
: add_query_arg( $args, ethnic_magento_web_design_url( 'contact-us' ) );
}
function ethnic_magento_web_design_icon( $name = 'check' ) {
$paths = array(
'journey' => '<path d="M4 6h5v5H4zM15 13h5v5h-5zM9 8.5h3a4 4 0 0 1 4 4v.5"/><path d="M13 11l3 2 3-2"/>',
'brand' => '<path d="M12 3l8 6-8 12L4 9z"/><path d="M4 9h16M9 9l3 12 3-12"/>',
'mobile' => '<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M10 5h4M11 19h2"/>',
'system' => '<rect x="3" y="4" width="8" height="7" rx="1"/><rect x="13" y="4" width="8" height="7" rx="1"/><rect x="3" y="13" width="8" height="7" rx="1"/><rect x="13" y="13" width="8" height="7" rx="1"/>',
'search' => '<circle cx="10" cy="10" r="6"/><path d="M14.5 14.5L21 21"/>',
'cart' => '<path d="M3 4h2l2 11h11l2-7H6"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/>',
'layout' => '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M9 9v11"/>',
'prototype' => '<path d="M5 3h10l4 4v14H5z"/><path d="M15 3v5h5M9 12l6 3-6 3z"/>',
'access' => '<circle cx="12" cy="5" r="2"/><path d="M4 9h16M12 7v14M7 21l5-7 5 7"/>',
'speed' => '<path d="M5 19a8 8 0 1 1 14 0"/><path d="M12 13l4-5"/>',
'check' => '<circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/>',
);
return '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">' . ( $paths[ $name ] ?? $paths['check'] ) . '</svg>';
}
function ethnic_magento_web_design_heading( $eyebrow, $title, $copy = '' ) {
$html = '<div class="emw-heading"><p class="emw-eyebrow">' . esc_html( $eyebrow ) . '</p><h2>' . esc_html( $title ) . '</h2>';
$html .= $copy ? '<p class="emw-heading__copy">' . esc_html( $copy ) . '</p>' : '';
return $html . '</div>';
}
function ethnic_magento_web_design_cards( $items, $class = '' ) {
$html = '<div class="emw-grid ' . esc_attr( $class ) . '">';
foreach ( $items as $item ) {
$html .= '<article class="emw-card"><span class="emw-icon">' . ethnic_magento_web_design_icon( $item[0] ) . '</span><h3>' . esc_html( $item[1] ) . '</h3><p>' . esc_html( $item[2] ) . '</p>';
if ( ! empty( $item[3] ) ) {
$html .= '<strong class="emw-value">Business relevance</strong><p>' . esc_html( $item[3] ) . '</p>';
}
$html .= '</article>';
}
return $html . '</div>';
}
function ethnic_magento_web_design_render() {
$consult = ethnic_magento_web_design_contact_url( 'consultation' );
$proposal = ethnic_magento_web_design_contact_url( 'proposal' );
$cases = function_exists( 'ethnic_case_studies_archive_url' ) ? ethnic_case_studies_archive_url() : ethnic_magento_web_design_url( 'case-studies' );
$magento = ethnic_magento_web_design_url( 'services/ecommerce-development/magento-development' );
$hyva = $magento;
$speed = $magento;
$seo = $magento;
$support = $magento . '#migration-maintenance';
$headless = ethnic_magento_web_design_url( 'services/ecommerce-development/headless-commerce-development' );
$overview = array(
array( 'journey', 'Commerce UX Strategy', 'Plan journeys around customer intent, catalog structure, buying behavior, and business priorities.' ),
array( 'brand', 'Brand-Aligned Storefront Design', 'Translate the brand into a distinctive commerce interface without compromising shopping clarity.' ),
array( 'mobile', 'Mobile-First Experiences', 'Design navigation, discovery, product selection, and checkout deliberately for touch screens.' ),
array( 'system', 'Development-Ready Design Systems', 'Create reusable components, states, specifications, and assets for consistent implementation.' ),
);
$problems = array(
array( 'brand', 'Outdated visual experience', 'The storefront no longer represents the quality, position, or direction of the brand.' ),
array( 'layout', 'Confusing navigation', 'Category structure and menus make it difficult for customers to orient themselves.' ),
array( 'mobile', 'Weak mobile shopping', 'Key interactions feel compressed, difficult to tap, or unnecessarily slow on smaller screens.' ),
array( 'search', 'Poor product discovery', 'Search, filters, sorting, and product cards do not help customers narrow a complex catalog.' ),
array( 'layout', 'Unclear product pages', 'Information, options, availability, and buying actions compete instead of forming a clear hierarchy.' ),
array( 'cart', 'Cart and checkout friction', 'Totals, delivery choices, validation, or next steps create avoidable uncertainty.' ),
array( 'system', 'Inconsistent layouts', 'Patterns vary between pages and make new storefront changes difficult to govern.' ),
array( 'access', 'Usability barriers', 'Contrast, forms, focus states, or interaction patterns exclude or confuse some customers.' ),
);
$capabilities = array(
array( 'search', 'UX Research and Discovery', 'Review business context, storefront behavior, analytics inputs, and customer needs.', 'Focus design effort on meaningful customer and commercial problems.' ),
array( 'journey', 'Customer Journey Mapping', 'Map entry points, discovery, evaluation, purchase, and repeat-order paths.', 'Expose gaps and dependencies across the complete experience.' ),
array( 'layout', 'Information Architecture', 'Structure navigation, content, categories, and page relationships.', 'Help customers understand where they are and where to go next.' ),
array( 'layout', 'Wireframing', 'Test content hierarchy and interaction patterns before visual polish.', 'Resolve usability questions earlier in the process.' ),
array( 'brand', 'UI Design', 'Create brand-led screens, components, states, and visual systems.', 'Build a coherent storefront customers can recognize and trust.' ),
array( 'mobile', 'Responsive Storefront Design', 'Plan layouts for mobile, tablet, desktop, and realistic content variation.', 'Protect usability and brand quality across devices.' ),
array( 'system', 'Design Systems', 'Document reusable components, tokens, variants, and interaction behavior.', 'Make implementation and future enhancement more consistent.' ),
array( 'prototype', 'Prototype Creation', 'Connect key screens into reviewable, interactive shopping flows.', 'Validate decisions with stakeholders before development.' ),
array( 'cart', 'Checkout UX', 'Clarify cart, delivery, payment, validation, and confirmation steps.', 'Support a confident purchase flow without unsupported promises.' ),
array( 'layout', 'Account and Dashboard Design', 'Organize orders, addresses, preferences, saved items, and account tasks.', 'Make post-purchase and repeat-buying activity easier to manage.' ),
array( 'journey', 'B2B Storefront UX', 'Design for company accounts, role-based users, quotes, bulk orders, and approvals.', 'Reflect the way business buyers actually purchase.' ),
array( 'check', 'Design Handoff and Support', 'Provide specifications, assets, interaction notes, and implementation collaboration.', 'Reduce ambiguity between design intent and Magento delivery.' ),
);
$faqs = array(
array( 'What is included in Magento web design services?', 'Scope can include discovery, UX review, journey mapping, information architecture, wireframes, responsive UI design, prototypes, design systems, specifications, and development support.' ),
array( 'Can you redesign an existing Magento or Adobe Commerce store?', 'Yes. We can assess the current storefront, prioritize usability and visual improvements, redesign key journeys, and plan a phased or complete modernization.' ),
array( 'Do you provide both UX design and frontend development?', 'Yes. Engagements can cover design only, development-ready handoff, or end-to-end design and Magento frontend implementation.' ),
array( 'Can you design Magento stores for mobile-first shopping?', 'Yes. Mobile navigation, filters, product options, forms, cart, and checkout are planned as intentional touch experiences rather than reduced desktop layouts.' ),
array( 'Do you design B2B Magento storefronts?', 'Yes. B2B design can address company accounts, permissions, shared catalogs, custom pricing, quotes, approvals, quick order, and repeat purchasing.' ),
array( 'Can you redesign the cart and checkout experience?', 'Yes. We can review and design cart, mini-cart, guest and account checkout, delivery, payment, validation, errors, review, and confirmation flows.' ),
array( 'Do you work with Hyvä and headless Magento frontends?', 'We can plan storefront experiences for standard Magento themes, Hyvä, and suitable headless or PWA-oriented approaches, based on the project architecture.' ),
array( 'How do you consider performance during design?', 'We review content priority, media usage, responsive imagery, animation, component reuse, third-party elements, and implementation complexity with engineering.' ),
array( 'Will we receive design files and a reusable component system?', 'Deliverables can include editable design files, responsive screens, reusable components, interaction states, specifications, and development-ready assets as agreed in scope.' ),
array( 'Can you support ongoing UX improvements after launch?', 'Yes. Ongoing work can include usability review, experiment design, iterative improvements, new components, and collaboration with Magento development teams.' ),
);
ob_start();
?>
<main class="emw-page">
<section class="emw-hero"><div class="emw-shell emw-hero__grid">
<div><p class="emw-eyebrow">Magento Storefront Experience</p><h1>Magento Web Design</h1><p class="emw-hero__lead">Create a modern, intuitive, conversion-focused Magento storefront that connects a distinctive brand experience with practical commerce performance.</p><div class="emw-actions"><a class="emw-button emw-button--primary" href="<?php echo esc_url( $consult ); ?>">Book a Free Consultation</a><a class="emw-button emw-button--secondary" href="<?php echo esc_url( $cases ); ?>">View Magento Case Studies</a></div><ul class="emw-ticks"><li>Mobile-first Magento storefront design</li><li>Conversion-focused category, product, cart, and checkout UX</li><li>Design systems prepared for scalable development</li></ul></div>
<div class="emw-storefront" aria-label="Layered Magento storefront design mockups"><div class="emw-browser"><div class="emw-browser__bar"><i></i><i></i><i></i><span>Storefront homepage</span></div><div class="emw-browser__hero"><small>New collection</small><b>Commerce with clarity.</b><em>Shop the edit</em></div><div class="emw-products"><i></i><i></i><i></i></div></div><div class="emw-phone"><div class="emw-phone__image"></div><small>Product detail</small><strong>Essential Series</strong><span>Select options</span></div><div class="emw-cart-mini"><small>Checkout flow</small><b>Cart → Delivery → Pay</b><span>Clear next steps</span></div><div class="emw-annotation">Responsive components</div></div>
</div></section>
<section class="emw-trust"><div class="emw-shell emw-trust__grid"><span>Magento Open Source & Adobe Commerce</span><span>B2B and B2C storefront design</span><span>Mobile-first commerce UX</span><span>Performance-aware frontend planning</span><span>Design-to-development delivery</span></div></section>
<section class="emw-section" id="overview"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Magento Web Design Services', 'Storefront design shaped around commerce, not decoration alone.', 'We design new Magento storefronts and support redesign, migration, and modernization programs. The experience is informed by business goals, brand identity, catalog complexity, and customer behavior.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><div class="emw-prose"><p>Magento website design reaches far beyond visual styling. Categories, configurable products, search, promotions, accounts, cart, and checkout all influence how customers understand and buy.</p><p>Our work can include UX planning, wireframes, user-interface design, responsive layouts, prototypes, design systems, and development-ready handoff—balancing usability, maintainability, platform constraints, and performance.</p></div><?php echo ethnic_magento_web_design_cards( $overview, 'emw-grid--four' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div></section>
<section class="emw-section emw-section--soft" id="redesign-signs"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Storefront Review', 'Is Your Magento Storefront Holding Back Growth?', 'These warning signs often indicate that the shopping experience, visual system, or frontend foundation needs focused redesign.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><?php echo ethnic_magento_web_design_cards( $problems, 'emw-grid--four emw-grid--compact' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div></section>
<section class="emw-section" id="capabilities"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Design Capabilities', 'Magento UX and UI services across the complete storefront.', 'Select focused design support or combine capabilities into a coordinated storefront program.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><?php echo ethnic_magento_web_design_cards( $capabilities, 'emw-grid--mixed' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div></section>
<section class="emw-section emw-section--dark" id="journey"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Customer Journey & UX Strategy', 'Design the complete path from arrival to repeat purchase.', 'First-time visitors, repeat buyers, mobile shoppers, B2B customers, and high-intent search users may need different routes through the same Magento storefront.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><p class="emw-narrow">Journey planning helps reduce friction and improve clarity without adding unnecessary visual complexity. We connect key pages, decisions, information needs, and likely points of hesitation.</p><div class="emw-journey"><?php foreach ( array( array('Entry','Orientation'), array('Search','Navigation'), array('Product','Discovery'), array('Evaluate','Options & trust'), array('Purchase','Cart & checkout'), array('Return','Account & reorder') ) as $i => $stage ) : ?><div><span><?php echo esc_html( sprintf( '%02d', $i + 1 ) ); ?></span><strong><?php echo esc_html( $stage[0] ); ?></strong><small><?php echo esc_html( $stage[1] ); ?></small></div><?php endforeach; ?></div></div></section>
<section class="emw-section" id="page-design"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Core Storefront Pages', 'Homepage, category, and product pages designed as one system.', 'Each page has a distinct commercial job, but customers should experience a consistent hierarchy and interaction language throughout.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><div class="emw-page-types"><article><div class="emw-page-shot emw-page-shot--home"><i></i><b></b><span></span><span></span><span></span></div><h3>Homepage Design</h3><p>Bring together brand positioning, merchandising, promotions, category entry points, trust signals, and a clear content hierarchy.</p></article><article><div class="emw-page-shot emw-page-shot--category"><i></i><b></b><span></span><span></span><span></span></div><h3>Category and Search Design</h3><p>Improve navigation, filters, sorting, product-card clarity, discovery, and mobile filtering for complex catalogs.</p></article><article><div class="emw-page-shot emw-page-shot--product"><i></i><b></b><span></span><span></span><span></span></div><h3>Product-Page Design</h3><p>Structure media, options, pricing, availability, delivery, trust, related products, and the add-to-cart action.</p></article></div></div></section>
<section class="emw-section emw-section--soft" id="checkout"><div class="emw-shell emw-split"><div><?php echo ethnic_magento_web_design_heading( 'Cart & Checkout Experience', 'Make the path to purchase clear, direct, and reassuring.', 'Cart and checkout design should communicate totals, delivery, payment, validation, and errors without unnecessary steps or uncertainty.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><p>We consider mini-cart behavior, guest and account checkout, address entry, shipping, payment selection, review, confirmation, and mobile usability. B2B, subscription, multi-address, or complex-product workflows can be planned where the operating model requires them.</p></div><div class="emw-checkout-flow" aria-label="Cart to checkout screen flow"><?php foreach ( array('Cart','Delivery','Payment','Confirm') as $i => $label ) : ?><div><span><?php echo esc_html( $i + 1 ); ?></span><div class="emw-screen-lines"><i></i><i></i><i></i></div><strong><?php echo esc_html( $label ); ?></strong></div><?php endforeach; ?></div></div></section>
<section class="emw-section" id="mobile"><div class="emw-shell emw-split"><div class="emw-devices" aria-label="Responsive desktop tablet and mobile storefront layouts"><div class="emw-device emw-device--desktop"><i></i><span></span><span></span><span></span></div><div class="emw-device emw-device--tablet"><i></i><span></span><span></span></div><div class="emw-device emw-device--mobile"><i></i><span></span><span></span></div></div><div><?php echo ethnic_magento_web_design_heading( 'Mobile-First Commerce', 'Responsive design planned intentionally for every screen.', 'Mobile storefronts are not simply smaller desktop pages. Navigation, filters, product options, touch targets, forms, and checkout need device-aware decisions.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><ul class="emw-checklist"><li>Touch-friendly navigation</li><li>Mobile product discovery</li><li>Responsive product pages</li><li>Simplified mobile checkout</li><li>Cross-device design consistency</li></ul></div></div></section>
<section class="emw-section emw-section--dark" id="accessibility"><div class="emw-shell emw-split"><div><?php echo ethnic_magento_web_design_heading( 'Accessibility & Usability', 'Inclusive design considerations built into the process.', 'Recognized accessibility practices and project-specific requirements can inform design and implementation from the start. Formal compliance should be evaluated independently against the final delivered experience.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><p>We consider readable typography and contrast, meaningful hierarchy, understandable controls, form labels, useful validation, and keyboard-aware interaction patterns where applicable.</p></div><ul class="emw-access-list"><li>Clear content hierarchy</li><li>Readable contrast</li><li>Understandable forms</li><li>Visible focus and interaction states</li><li>Consistent navigation patterns</li><li>Accessible design considerations</li></ul></div></section>
<section class="emw-section" id="performance"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Performance-Aware Design', 'Plan visual richness with frontend performance in view.', 'Excessive media, animation, widgets, and heavy components can affect Magento storefront performance. Design and engineering should align before implementation.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><div class="emw-compare"><article class="emw-compare--overload"><span>Overloaded design</span><h3>Too much competing content</h3><div><i></i><i></i><i></i><i></i><i></i><i></i></div><p>Heavy media, duplicated messages, uncontrolled widgets, and unclear priorities.</p></article><article class="emw-compare--focused"><span>Performance-aware design</span><h3>Focused, reusable patterns</h3><div><i></i><i></i><i></i></div><p>Prioritized content, responsive images, lean components, controlled motion, and practical implementation.</p></article></div><div class="emw-pill-row"><span>Content prioritization</span><span>Responsive image planning</span><span>Lean components</span><span>Controlled animations</span><span>Reusable patterns</span><span>Core Web Vitals awareness</span></div></div></section>
<section class="emw-section emw-section--soft" id="process"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Magento Design Process', 'A structured route from discovery to launch support.', 'The process creates reviewable decisions, useful deliverables, and a clear bridge between design and Magento implementation.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><div class="emw-process"><?php $steps = array( array('Business and Brand Discovery','Brief and priorities'), array('Storefront and Analytics Review','UX findings'), array('Customer Journey Planning','Journey map'), array('Information Architecture','Sitemap and structure'), array('Wireframing','Core page wireframes'), array('UI Design','Visual direction and screens'), array('Responsive Design','Device-ready layouts'), array('Prototype and Review','Interaction notes and decisions'), array('Development Handoff','Components, assets, specifications'), array('QA and Launch Support','Design validation and launch checklist') ); foreach ( $steps as $i => $step ) : ?><article><span><?php echo esc_html( sprintf( '%02d', $i + 1 ) ); ?></span><div><h3><?php echo esc_html( $step[0] ); ?></h3><p><?php echo esc_html( $step[1] ); ?></p></div></article><?php endforeach; ?></div></div></section>
<section class="emw-section" id="before-after"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Before & After', 'See how clearer design decisions reshape the storefront.', 'Illustrative placeholders show the kinds of structural changes a redesign may address. They do not represent claimed performance results.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><div class="emw-before-after"><article><div class="emw-ba-shot emw-ba-shot--before"><i></i><i></i><i></i><i></i><i></i><i></i></div><span>Before</span><h3>Competing merchandising hierarchy</h3><p>Promotions, navigation, and product content demand attention at the same time.</p></article><article><div class="emw-ba-shot emw-ba-shot--after"><i></i><i></i><i></i></div><span>After</span><h3>Clearer paths into the catalog</h3><p>Focused messaging and structured category entry points guide the next action.</p></article></div></div></section>
<section class="emw-section emw-section--dark" id="frontend"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Frontend Approaches', 'Choose an implementation path that fits the design and operating model.', 'The right approach depends on performance goals, flexibility, budget, extensions, integrations, content needs, and long-term maintainability.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><div class="emw-approaches"><?php $approaches = array( array('Standard Magento Theme','A conventional Magento theme approach that can suit established extension and workflow requirements.','Existing stores and controlled redesign scope'), array('Hyvä Theme','A modern Magento frontend approach focused on a leaner theme stack; it is not a fully decoupled headless architecture.','Performance-conscious Magento modernization'), array('Adobe Commerce Frontend','A storefront designed around Adobe Commerce capabilities and enterprise workflows.','Complex Adobe Commerce programs'), array('Headless Commerce','A decoupled frontend with Magento serving commerce capabilities through APIs.','Distinct experiences needing architectural flexibility'), array('GraphCommerce','A React and GraphQL-oriented storefront option for Magento projects.','Teams aligned with its ecosystem and delivery model'), array('ScandiPWA','A PWA-oriented Magento storefront approach with its own component architecture.','Projects suited to a PWA delivery model'), array('Adobe PWA Studio (Venia)','Adobe tooling and reference components for PWA-oriented Commerce storefronts.','Adobe-aligned PWA requirements') ); foreach ( $approaches as $approach ) : ?><article><h3><?php echo esc_html( $approach[0] ); ?></h3><p><?php echo esc_html( $approach[1] ); ?></p><small>Suitable for</small><strong><?php echo esc_html( $approach[2] ); ?></strong></article><?php endforeach; ?></div></div></section>
<section class="emw-section" id="engagement"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Ways to Work Together', 'Choose an engagement model around your current priority.', 'Start with focused UX direction or bring design and frontend implementation into one coordinated program.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><?php echo ethnic_magento_web_design_cards( array( array('search','Storefront UX Audit','For teams that need evidence-led usability and design recommendations before committing to redesign.'), array('layout','Fixed-Scope Magento Redesign','For a clearly defined storefront, journey, or set of page templates.'), array('system','Design and Development Engagement','For end-to-end UX, UI, design-system, and Magento frontend delivery.'), array('journey','Continuous UX and CRO Support','For ongoing review, experiment design, and iterative storefront enhancement.') ), 'emw-grid--four' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div></section>
<section class="emw-section emw-section--soft" id="case-studies"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Selected Work', 'Relevant Magento and commerce case studies.', 'Explore published project work relevant to storefront design, commerce UX, Magento delivery, and frontend modernization.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><?php if ( function_exists( 'ethnic_case_studies_service_page_cards' ) && function_exists( 'ethnic_shared_case_study_showcase_render' ) ) { $items = ethnic_case_studies_service_page_cards( array( 'page_id' => get_queried_object_id(), 'limit' => 3, 'filters' => array( 'service' => array('ecommerce-development','ui-ux-design'), 'platform' => array('magento','adobe-commerce','hyva'), 'category' => array('magento') ), 'fallback_items' => array() ) ); if ( $items ) { echo ethnic_shared_case_study_showcase_render( $items, array( 'carousel_label' => 'Magento web design case studies' ) ); /* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped */ } else { ?><div class="emw-empty"><p>No matching published case study is configured yet.</p><a href="<?php echo esc_url( $cases ); ?>">Browse Case Studies →</a></div><?php } } else { ?><div class="emw-empty"><p>Browse our published work for relevant Magento and commerce delivery examples.</p><a href="<?php echo esc_url( $cases ); ?>">Browse Case Studies →</a></div><?php } ?></div></section>
<section class="emw-section" id="why-us"><div class="emw-shell emw-split"><div><?php echo ethnic_magento_web_design_heading( 'Why Ethnic?', 'Design decisions grounded in commerce and Magento delivery.', 'We connect brand experience and customer needs with the practical realities of complex catalogs, frontend architecture, implementation, and ongoing improvement.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div><ul class="emw-reasons"><li>Magento and commerce-focused design understanding</li><li>Design quality balanced with platform realities</li><li>Mobile-first UX planning</li><li>Close design and development alignment</li><li>Support for complex catalogs and workflows</li><li>Performance-aware design decisions</li><li>Structured review and handoff</li><li>Long-term enhancement support</li></ul></div></section>
<section class="emw-section emw-section--soft" id="related"><div class="emw-shell"><?php echo ethnic_magento_web_design_heading( 'Related Magento Services', 'Connect storefront design with the wider Magento roadmap.', 'Explore implementation, performance, search visibility, support, and architecture services relevant to a modern storefront.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><div class="emw-related"><a href="<?php echo esc_url( $magento ); ?>"><h3>Magento Development</h3><p>Build and extend the platform behind the storefront experience.</p><span>Explore Service →</span></a><a href="<?php echo esc_url( $hyva ); ?>"><h3>Hyvä Theme Development</h3><p>Pair a modern Magento theme approach with a tailored design system.</p><span>Explore Service →</span></a><a href="<?php echo esc_url( $speed ); ?>"><h3>Magento Speed Optimization</h3><p>Review frontend and platform factors influencing storefront performance.</p><span>Explore Service →</span></a><a href="<?php echo esc_url( $seo ); ?>"><h3>Magento SEO Services</h3><p>Align discovery, content structure, and technical search requirements.</p><span>Explore Service →</span></a><a href="<?php echo esc_url( $support ); ?>"><h3>Magento Support Services</h3><p>Maintain and improve the storefront after launch.</p><span>Explore Service →</span></a><a href="<?php echo esc_url( $headless ); ?>"><h3>Headless Commerce</h3><p>Explore a decoupled storefront architecture where requirements support it.</p><span>Explore Service →</span></a></div></div></section>
<section class="emw-section" id="faqs"><div class="emw-shell emw-faq-layout"><div><?php echo ethnic_magento_web_design_heading( 'Frequently Asked Questions', 'Magento web design FAQs.', 'Direct answers for teams evaluating a new storefront, redesign, or UX modernization program.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div><div class="emw-faqs"><?php foreach ( $faqs as $i => $faq ) : ?><details <?php echo 0 === $i ? 'open' : ''; ?>><summary><?php echo esc_html( $faq[0] ); ?></summary><p><?php echo esc_html( $faq[1] ); ?></p></details><?php endforeach; ?></div></div></section>
<section class="emw-final"><div class="emw-shell"><div class="emw-final__panel"><p class="emw-eyebrow">Start the Conversation</p><h2>Planning a Magento Storefront Redesign?</h2><p>Discuss Magento UX, mobile design, product discovery, category and product pages, checkout improvements, Hyvä design, or complete storefront modernization with our team.</p><div class="emw-actions"><a class="emw-button emw-button--light" href="<?php echo esc_url( $consult ); ?>">Talk to a Magento Expert</a><a class="emw-button emw-button--outline" href="<?php echo esc_url( $proposal ); ?>">Request a Proposal</a></div></div></div></section>
</main>
<?php
return ob_get_clean();
}
function ethnic_magento_web_design_styles() {
return <<<'CSS'
body.ethnic-magento-web-design-target #page-title.page-title-block.custom-page-title{display:none}body.ethnic-magento-web-design-target .block-content{padding:0!important}body.ethnic-magento-web-design-target .block-content>.container{width:100%;max-width:none;padding:0}body.ethnic-magento-web-design-target .block-content>.container>.panel.row{margin:0}body.ethnic-magento-web-design-target .block-content>.container>.panel>.panel-center{width:100%;padding:0}body.ethnic-magento-web-design-target .entry-content.post-content{margin:0}.emw-page{--ink:#151b27;--muted:#626b7a;--soft:#f6f7fa;--line:#e1e4ea;--accent:#f26322;color:var(--ink);font-family:inherit;overflow:hidden}.emw-page *{box-sizing:border-box}.emw-shell{width:min(1180px,calc(100% - 40px));margin:auto}.emw-section{padding:100px 0}.emw-section--soft{background:var(--soft)}.emw-section--dark{background:#141927;color:#fff}.emw-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:var(--accent);margin:0 0 16px}.emw-heading{max-width:820px;margin-bottom:38px}.emw-heading h2,.emw-final h2{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-.035em;margin:0 0 18px;color:inherit}.emw-heading__copy,.emw-hero__lead{font-size:18px;line-height:1.7;color:var(--muted);margin:0}.emw-section--dark .emw-heading__copy,.emw-section--dark p{color:#b9c1d1}body.ethnic-magento-web-design-target .emw-hero h1,body.ethnic-magento-web-design-target .emw-section--dark h2,body.ethnic-magento-web-design-target .emw-section--dark h3,body.ethnic-magento-web-design-target .emw-final h2{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}.emw-hero{background:linear-gradient(135deg,#121723,#1b1830 60%,#271649);color:#fff;padding:110px 0 96px}.emw-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.emw-hero h1{font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-.05em;margin:0 0 25px}.emw-hero__lead{color:#c9cfda}.emw-actions{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0}.emw-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:9px;font-weight:800;text-decoration:none!important;transition:.2s}.emw-button:hover{transform:translateY(-2px)}.emw-button--primary{background:var(--accent);color:#fff!important}.emw-button--secondary{color:#fff!important;border:1px solid #656b78;background:#ffffff0a}.emw-ticks,.emw-checklist{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}.emw-ticks li,.emw-checklist li{padding-left:27px;position:relative}.emw-ticks li{color:#d8dce5}.emw-ticks li:before,.emw-checklist li:before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:900}.emw-storefront{height:520px;position:relative}.emw-browser,.emw-phone,.emw-cart-mini{position:absolute;border:1px solid #ffffff2b;background:#22283a;box-shadow:0 25px 60px #0006}.emw-browser{inset:30px 42px 80px 0;border-radius:20px;overflow:hidden}.emw-browser__bar{height:42px;padding:0 14px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #ffffff18}.emw-browser__bar i{width:7px;height:7px;border-radius:50%;background:#768096}.emw-browser__bar span{margin-left:auto;color:#9da6b8;font-size:11px}.emw-browser__hero{height:180px;background:linear-gradient(135deg,#57315f,#d66a37);padding:32px;display:grid;align-content:center}.emw-browser__hero small,.emw-browser__hero b{display:block}.emw-browser__hero b{font-size:26px;margin:8px 0 18px}.emw-browser__hero em{background:#fff;color:#2d2234;padding:8px 12px;width:max-content;border-radius:5px;font-style:normal;font-size:11px;font-weight:800}.emw-products{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:18px}.emw-products i{height:110px;border-radius:8px;background:linear-gradient(#3a4255 70%,#2b3141 70%)}.emw-phone{right:0;bottom:16px;width:165px;height:300px;border-radius:24px;padding:14px;z-index:2}.emw-phone__image{height:145px;border-radius:12px;background:linear-gradient(145deg,#694165,#f2834e)}.emw-phone small,.emw-phone strong{display:block;margin-top:11px}.emw-phone small{color:#9da6b8}.emw-phone span{display:block;background:var(--accent);text-align:center;padding:9px;margin-top:13px;border-radius:6px;font-size:11px;font-weight:800}.emw-cart-mini{left:40px;bottom:20px;z-index:3;border-radius:12px;padding:16px 18px}.emw-cart-mini small,.emw-cart-mini b,.emw-cart-mini span{display:block}.emw-cart-mini small,.emw-cart-mini span{color:#aeb6c7;font-size:11px}.emw-cart-mini b{margin:6px 0}.emw-annotation{position:absolute;right:3px;top:5px;color:#ff9b6f;font-size:11px;letter-spacing:.08em}.emw-trust{border-bottom:1px solid var(--line)}.emw-trust__grid{display:grid;grid-template-columns:repeat(5,1fr);min-height:88px;align-items:center}.emw-trust span{text-align:center;padding:0 14px;border-right:1px solid var(--line);font-size:13px;font-weight:800;color:#4a5261}.emw-trust span:last-child{border:0}.emw-prose{max-width:920px;display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:42px}.emw-prose p,.emw-split>div>p,.emw-narrow{font-size:17px;line-height:1.75;color:var(--muted);margin-top:0}.emw-narrow{max-width:850px}.emw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.emw-grid--four{grid-template-columns:repeat(4,1fr)}.emw-grid--mixed{grid-template-columns:repeat(6,1fr)}.emw-grid--mixed .emw-card{grid-column:span 2}.emw-grid--mixed .emw-card:nth-child(-n+3){grid-column:span 2}.emw-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:27px;box-shadow:0 10px 32px #20263b0a}.emw-grid--compact .emw-card{padding:23px}.emw-section--dark .emw-card{background:#ffffff08;border-color:#ffffff18}.emw-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#f2632212;color:var(--accent);margin-bottom:20px}.emw-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.emw-card h3{font-size:20px;line-height:1.3;margin:0 0 10px;color:inherit}.emw-card p{color:var(--muted);line-height:1.65;margin:0}.emw-value{display:block;margin:18px 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.emw-journey{display:grid;grid-template-columns:repeat(6,1fr);margin-top:48px}.emw-journey div{position:relative;text-align:center;padding:22px 10px;border:1px solid #ffffff1b;background:#ffffff07}.emw-journey div:not(:last-child):after{content:'→';position:absolute;right:-8px;top:42%;z-index:2;color:#ff8b57}.emw-journey span,.emw-journey strong,.emw-journey small{display:block}.emw-journey span{font-size:11px;color:#ff8b57}.emw-journey strong{margin:12px 0 5px}.emw-journey small{color:#aeb6c7}.emw-page-types{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.emw-page-types article{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.emw-page-types h3,.emw-page-types p{margin-left:25px;margin-right:25px}.emw-page-types h3{margin-top:25px}.emw-page-types p{color:var(--muted);line-height:1.65;margin-bottom:27px}.emw-page-shot{height:250px;background:#ebeef3;padding:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:end}.emw-page-shot i{position:absolute}.emw-page-shot b{grid-column:1/-1;height:95px;border-radius:7px;background:linear-gradient(135deg,#d76c3a,#613d68)}.emw-page-shot span{height:70px;background:#fff;border-radius:6px}.emw-page-shot--category{grid-template-columns:.7fr 1fr 1fr}.emw-page-shot--category b{grid-column:1/2;grid-row:1/3;height:175px;background:#d8dce5}.emw-page-shot--product{grid-template-columns:1.25fr 1fr}.emw-page-shot--product b{grid-column:1/2;grid-row:1/3;height:175px}.emw-page-shot--product span{grid-column:2}.emw-split{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.emw-checkout-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.emw-checkout-flow>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;box-shadow:0 12px 28px #20263b0c}.emw-checkout-flow>div>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff0e9;color:var(--accent);font-weight:800;font-size:11px}.emw-screen-lines{display:grid;gap:7px;margin:18px 0 25px}.emw-screen-lines i{height:8px;background:#e6e8ed;border-radius:4px}.emw-screen-lines i:nth-child(2){width:75%}.emw-checkout-flow strong{font-size:12px}.emw-devices{height:420px;position:relative}.emw-device{position:absolute;border:7px solid #202636;background:#eef0f4;border-radius:12px;padding:18px;display:grid;gap:10px;align-content:start;box-shadow:0 18px 40px #20263b24}.emw-device i{height:45%;border-radius:7px;background:linear-gradient(135deg,#57315f,#ef7940)}.emw-device span{height:17px;background:#fff;border-radius:4px}.emw-device--desktop{inset:20px 45px 65px 0}.emw-device--tablet{width:190px;height:280px;right:10px;bottom:10px}.emw-device--mobile{width:105px;height:210px;right:145px;bottom:0;border-width:5px;padding:10px}.emw-checklist li{color:#424b5b}.emw-access-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.emw-access-list li,.emw-reasons li{position:relative;padding:17px 18px 17px 45px;border-radius:10px;font-weight:700}.emw-access-list li{background:#ffffff08;border:1px solid #ffffff18}.emw-access-list li:before,.emw-reasons li:before{content:'✓';position:absolute;left:17px;color:var(--accent)}.emw-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}.emw-compare article{border:1px solid var(--line);border-radius:18px;padding:30px}.emw-compare article>span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:800}.emw-compare h3{font-size:25px}.emw-compare article>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:25px 0}.emw-compare i{height:55px;border-radius:6px;background:#dfe2e8}.emw-compare--overload{background:#f5f5f6}.emw-compare--overload i:nth-child(even){background:#d4b5b0}.emw-compare--focused{background:#fff;border-top:4px solid var(--accent)!important}.emw-compare--focused i:first-child{grid-column:1/-1;height:100px;background:linear-gradient(135deg,#583b61,#ee7c43)}.emw-compare p{color:var(--muted);line-height:1.6}.emw-pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.emw-pill-row span{padding:10px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px}.emw-process{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.emw-process article{display:grid;grid-template-columns:55px 1fr;gap:17px;padding:27px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.emw-process article>span{font-size:12px;font-weight:900;color:var(--accent)}.emw-process h3{margin:0 0 6px;font-size:18px}.emw-process p{margin:0;color:var(--muted)}.emw-before-after{display:grid;grid-template-columns:1fr 1fr;gap:22px}.emw-before-after article{border:1px solid var(--line);border-radius:18px;padding:20px}.emw-ba-shot{height:270px;border-radius:12px;padding:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.emw-ba-shot i{background:#fff;border-radius:5px}.emw-ba-shot--before{background:#dfe2e8}.emw-ba-shot--before i:nth-child(1),.emw-ba-shot--before i:nth-child(5){grid-column:span 2}.emw-ba-shot--before i:nth-child(3){background:#c78677}.emw-ba-shot--after{background:#202636}.emw-ba-shot--after i:first-child{grid-column:1/-1;background:linear-gradient(135deg,#623e69,#ef7b42)}.emw-before-after article>span{display:block;color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-top:20px}.emw-before-after h3{font-size:23px;margin:8px 0}.emw-before-after p{color:var(--muted);line-height:1.6}.emw-approaches{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.emw-approaches article{grid-column:span 2;border:1px solid #ffffff1b;background:#ffffff07;border-radius:15px;padding:25px}.emw-approaches article:first-child{grid-column:span 3}.emw-approaches article:nth-child(2){grid-column:span 3}.emw-approaches h3{margin-top:0}.emw-approaches p{line-height:1.6}.emw-approaches small,.emw-approaches strong{display:block}.emw-approaches small{color:#ff9b6f;text-transform:uppercase;letter-spacing:.1em;margin-top:20px}.emw-approaches strong{margin-top:7px}.emw-empty{border:1px solid var(--line);border-radius:15px;padding:30px}.emw-empty p{margin-top:0}.emw-empty a{color:var(--accent)!important;font-weight:800;text-decoration:none!important}.emw-reasons{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.emw-reasons li{border:1px solid var(--line);background:#fff}.emw-related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.emw-related a{display:block;padding:26px;border:1px solid var(--line);border-radius:15px;background:#fff;text-decoration:none!important;color:var(--ink)!important}.emw-related h3{font-size:20px;margin:0 0 10px}.emw-related p{color:var(--muted);line-height:1.6;min-height:52px}.emw-related span{color:var(--accent);font-weight:800}.emw-faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}.emw-faqs details{border:1px solid var(--line);border-radius:11px;margin-bottom:12px}.emw-faqs summary{padding:20px 50px 20px 22px;font-weight:800;cursor:pointer;position:relative;list-style:none}.emw-faqs summary:after{content:'+';position:absolute;right:22px;top:14px;font-size:23px;color:var(--accent)}.emw-faqs details[open] summary:after{content:'–'}.emw-faqs details p{padding:0 22px 21px;margin:0;color:var(--muted);line-height:1.7}.emw-final{padding:78px 0}.emw-final__panel{padding:68px;border-radius:25px;background:linear-gradient(135deg,#f26322,#813cce);color:#fff}.emw-final__panel>p:not(.emw-eyebrow){font-size:18px;line-height:1.7;max-width:780px}.emw-final .emw-eyebrow{color:#fff}.emw-button--light{background:#fff;color:#3c254d!important}.emw-button--outline{border:1px solid #ffffffa0;color:#fff!important}.emw-final .emw-actions{margin-bottom:0}
@media(max-width:1024px){.emw-hero__grid,.emw-split,.emw-faq-layout{grid-template-columns:1fr;gap:48px}.emw-storefront{max-width:650px}.emw-grid--four,.emw-related{grid-template-columns:repeat(2,1fr)}.emw-grid--mixed{grid-template-columns:repeat(2,1fr)}.emw-grid--mixed .emw-card,.emw-grid--mixed .emw-card:nth-child(-n+3){grid-column:auto}.emw-trust__grid{grid-template-columns:repeat(3,1fr);padding:16px 0}.emw-trust span{min-height:40px;display:grid;place-items:center}.emw-journey{grid-template-columns:repeat(3,1fr);gap:12px}.emw-journey div:not(:last-child):after{display:none}.emw-page-types{grid-template-columns:1fr}.emw-approaches{grid-template-columns:repeat(2,1fr)}.emw-approaches article,.emw-approaches article:first-child,.emw-approaches article:nth-child(2){grid-column:auto}}
@media(max-width:767px){.emw-shell{width:min(100% - 28px,1180px)}.emw-section{padding:70px 0}.emw-hero{padding:74px 0 62px}.emw-hero h1{font-size:46px}.emw-heading h2,.emw-final h2{font-size:35px}.emw-storefront{height:430px}.emw-browser{right:15px}.emw-phone{width:135px;height:260px}.emw-cart-mini{left:10px}.emw-prose,.emw-grid,.emw-grid--four,.emw-grid--mixed,.emw-process,.emw-before-after,.emw-compare,.emw-related,.emw-approaches{grid-template-columns:1fr}.emw-trust__grid{grid-template-columns:1fr 1fr}.emw-trust span{border:0}.emw-journey{grid-template-columns:1fr 1fr}.emw-checkout-flow{grid-template-columns:1fr 1fr}.emw-devices{height:340px}.emw-device--desktop{right:20px}.emw-device--tablet{width:150px;height:230px}.emw-device--mobile{right:110px}.emw-access-list,.emw-reasons{grid-template-columns:1fr}.emw-final__panel{padding:42px 24px}.emw-actions{flex-direction:column}.emw-button{width:100%}}
CSS;
}
function ethnic_magento_web_design_head() {
if ( ! ethnic_magento_web_design_is_target() ) {
return;
}
$home = home_url( '/' );
$crumbs = array(
array( 'Home', $home ),
array( 'Services', ethnic_magento_web_design_url( 'services' ) ),
array( 'eCommerce Development', ethnic_magento_web_design_url( 'services/ecommerce-development' ) ),
array( 'Magento Development', ethnic_magento_web_design_url( 'services/ecommerce-development/magento-development' ) ),
array( 'Magento Web Design', get_permalink() ),
);
$breadcrumb_items = array();
foreach ( $crumbs as $i => $crumb ) {
$breadcrumb_items[] = array( '@type' => 'ListItem', 'position' => $i + 1, 'name' => $crumb[0], 'item' => $crumb[1] );
}
$faq_data = array(
array( 'What is included in Magento web design services?', 'Discovery, UX planning, wireframes, responsive UI, prototypes, design systems, specifications, and implementation support can be included.' ),
array( 'Can you redesign an existing Magento or Adobe Commerce store?', 'Yes. We support focused and complete storefront modernization for Magento Open Source and Adobe Commerce.' ),
array( 'Do you provide UX design and frontend development?', 'Yes. Work can cover design only, development-ready handoff, or end-to-end frontend delivery.' ),
array( 'Can you design mobile-first Magento stores?', 'Yes. Mobile navigation, discovery, product selection, forms, cart, and checkout are planned intentionally.' ),
array( 'Do you design B2B Magento storefronts?', 'Yes. B2B design can address company accounts, catalogs, pricing, quotes, approvals, and bulk ordering.' ),
array( 'Can you redesign Magento cart and checkout?', 'Yes. We can design cart, delivery, payment, validation, review, confirmation, and mobile checkout flows.' ),
array( 'Do you work with Hyvä and headless frontends?', 'We can plan designs for standard Magento, Hyvä, and suitable headless or PWA-oriented approaches.' ),
array( 'How is performance considered during design?', 'We consider content priority, responsive media, animation, component reuse, third-party elements, and implementation complexity.' ),
array( 'Will we receive reusable design components?', 'Deliverables can include editable files, responsive screens, components, states, specifications, and development-ready assets.' ),
array( 'Can you support ongoing UX improvement?', 'Yes. Ongoing support can cover reviews, experiments, iterative design, new components, and development collaboration.' ),
);
$faq_items = array();
foreach ( $faq_data as $faq ) {
$faq_items[] = array( '@type' => 'Question', 'name' => $faq[0], 'acceptedAnswer' => array( '@type' => 'Answer', 'text' => $faq[1] ) );
}
$schema = array( '@context' => 'https://schema.org', '@graph' => array(
array( '@type' => 'BreadcrumbList', 'itemListElement' => $breadcrumb_items ),
array( '@type' => 'Service', 'name' => 'Magento Web Design Services', 'serviceType' => 'Magento and Adobe Commerce storefront UX and web design', 'url' => get_permalink(), 'description' => 'Mobile-first Magento web design for product discovery, category and product pages, checkout UX, design systems, and performance-aware frontend delivery.', 'provider' => array( '@type' => 'Organization', 'name' => get_bloginfo( 'name' ), 'url' => $home ) ),
array( '@type' => 'FAQPage', 'mainEntity' => $faq_items ),
) );
echo '<style id="ethnic-magento-web-design-css">' . ethnic_magento_web_design_styles() . '</style>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '<meta name="description" content="Create a modern Magento storefront with mobile-first UX, stronger product discovery, conversion-focused page design, checkout improvements, and development-ready design systems." />';
echo '<script type="application/ld+json">' . wp_json_encode( $schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ) . '</script>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
add_action( 'wp_head', 'ethnic_magento_web_design_head', 120 );
function ethnic_magento_web_design_title( $title ) {
return ethnic_magento_web_design_is_target() ? 'Magento Web Design Services | Conversion-Focused Magento Website Design' : $title;
}
add_filter( 'pre_get_document_title', 'ethnic_magento_web_design_title', 50 );
function ethnic_magento_web_design_body_class( $classes ) {
if ( ethnic_magento_web_design_is_target() ) {
$classes[] = 'ethnic-magento-web-design-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_magento_web_design_body_class' );
function ethnic_magento_web_design_content( $content ) {
if ( ! ethnic_magento_web_design_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_magento_web_design_render();
}
add_filter( 'the_content', 'ethnic_magento_web_design_content', 1000 );