File: /var/www/html/wp-content/mu-plugins/ethnic-shopify-development-page.php
<?php
/**
* Plugin Name: Ethnic Shopify Development Page
* Description: Creates and renders the Shopify Development sub-service page under eCommerce Development Services.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_shopify_development_page_parent_id' ) ) {
function ethnic_shopify_development_page_parent_id() {
static $parent_id = null;
if ( null !== $parent_id ) {
return $parent_id;
}
$page = get_page_by_path( 'services/ecommerce-development' );
if ( $page instanceof WP_Post ) {
$parent_id = (int) $page->ID;
} else {
$fallback = get_page_by_path( 'ecommerce-development' );
$parent_id = $fallback instanceof WP_Post ? (int) $fallback->ID : 0;
}
return $parent_id;
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_get_target_page' ) ) {
function ethnic_shopify_development_page_get_target_page() {
static $page = false;
if ( false !== $page ) {
return $page instanceof WP_Post ? $page : null;
}
$page = get_page_by_path( 'services/ecommerce-development/shopify-development' );
if ( ! ( $page instanceof WP_Post ) ) {
$fallback = get_page_by_path( 'shopify-development' );
if ( $fallback instanceof WP_Post && (int) $fallback->post_parent === ethnic_shopify_development_page_parent_id() ) {
$page = $fallback;
}
}
return $page instanceof WP_Post ? $page : null;
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_ensure_page' ) ) {
function ethnic_shopify_development_page_ensure_page() {
static $did_run = false;
if ( $did_run ) {
return;
}
$did_run = true;
$parent_id = ethnic_shopify_development_page_parent_id();
if ( ! $parent_id ) {
return;
}
$postarr = array(
'post_type' => 'page',
'post_title' => 'Shopify Development',
'post_name' => 'shopify-development',
'post_parent' => $parent_id,
'post_status' => 'publish',
'post_content' => '',
'comment_status' => 'closed',
'ping_status' => 'closed',
);
$page = get_page_by_path( 'services/ecommerce-development/shopify-development' );
if ( $page instanceof WP_Post ) {
$needs_update = 'Shopify Development' !== $page->post_title
|| (int) $page->post_parent !== $parent_id
|| 'publish' !== $page->post_status;
if ( $needs_update ) {
wp_update_post(
array_merge(
$postarr,
array(
'ID' => (int) $page->ID,
)
)
);
clean_post_cache( (int) $page->ID );
}
return;
}
$fallback = get_page_by_path( 'shopify-development' );
if ( $fallback instanceof WP_Post ) {
wp_update_post(
array_merge(
$postarr,
array(
'ID' => (int) $fallback->ID,
)
)
);
clean_post_cache( (int) $fallback->ID );
return;
}
wp_insert_post( $postarr );
}
add_action( 'init', 'ethnic_shopify_development_page_ensure_page', 5 );
}
if ( ! function_exists( 'ethnic_shopify_development_page_is_target' ) ) {
function ethnic_shopify_development_page_is_target() {
if ( is_admin() ) {
return false;
}
$page = ethnic_shopify_development_page_get_target_page();
if ( ! ( $page instanceof WP_Post ) ) {
return false;
}
return (int) get_queried_object_id() === (int) $page->ID || is_page( (int) $page->ID );
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_url' ) ) {
function ethnic_shopify_development_page_url( $path ) {
return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_contact_url' ) ) {
function ethnic_shopify_development_page_contact_url( $args = array() ) {
return ethnic_consultation_route_contact_url( $args, ethnic_shopify_development_page_url( 'contact-us' ) );
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_case_studies_url' ) ) {
function ethnic_shopify_development_page_case_studies_url() {
return function_exists( 'ethnic_case_studies_archive_url' ) ? ethnic_case_studies_archive_url() : ethnic_shopify_development_page_url( 'case-studies' );
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_data' ) ) {
function ethnic_shopify_development_page_data() {
static $data = null;
if ( null !== $data ) {
return $data;
}
$data = array(
'metaTitle' => 'Shopify Development Services | Store Setup, Custom Builds & Shopify Migration',
'metaDescription' => 'Looking for Shopify development services? We build custom Shopify stores, handle theme customization, app integrations, migration to Shopify, conversion-focused design, and long-term support.',
'heroTitle' => 'Shopify Development',
'heroText' => 'We build scalable, conversion-focused Shopify stores for growing brands, merchants, and modern commerce businesses that need stronger storefronts, cleaner operations, and a platform ready for long-term growth.',
'heroPoints' => array(
'Shopify store setup and custom builds',
'Theme customization and app integrations',
'Migration, optimization, and ongoing support',
),
'overviewParagraphs' => array(
'Our Shopify development services support startups, D2C brands, and growing businesses that need a commerce platform built around usability, merchandising, and day-to-day operational clarity. We help shape Shopify stores around brand goals, catalog structure, content strategy, and conversion priorities rather than forcing a one-size-fits-all setup.',
'That includes new Shopify store builds, redesigns, migration to Shopify, feature enhancements, and post-launch improvements. Whether the need is a first launch or a more mature commerce environment that needs refinement, we focus on storefront performance, customer experience, and the business workflows behind the store.',
'From store setup to launch and ongoing optimization, our role is to deliver Shopify solutions that feel brand-aligned, scalable, integration-ready, and easier to grow over time.',
),
'overviewFeatures' => array(
array(
'icon' => 'store',
'title' => 'Custom Shopify Builds',
'copy' => 'Store architecture, content structure, and shopping journeys aligned to the way your business actually sells.',
),
array(
'icon' => 'spark',
'title' => 'Conversion-Focused Storefronts',
'copy' => 'Design and UX decisions shaped around product discovery, trust, mobile usability, and cleaner checkout momentum.',
),
array(
'icon' => 'plug',
'title' => 'Integration-Ready Setup',
'copy' => 'Support for apps, operations tools, marketing systems, and workflows that keep the store connected after launch.',
),
array(
'icon' => 'growth',
'title' => 'Ongoing Growth Support',
'copy' => 'Launch is followed by optimization, refinements, and technical support to help the store keep improving.',
),
),
'setupParagraphs' => array(
'We support end-to-end Shopify store setup and custom implementation for brands launching new stores or rebuilding existing commerce experiences. That includes store structure planning, product and collection setup, navigation logic, merchandising layouts, and the technical foundations needed for dependable operations.',
'Our goal is to create a Shopify store foundation that supports launch readiness today and scale tomorrow. Brand alignment, storefront flexibility, and maintainability stay part of the implementation so the store can evolve without becoming harder to manage.',
),
'setupCards' => array(
array(
'icon' => 'rocket',
'title' => 'New Shopify store setup',
'copy' => 'A structured launch foundation for brands moving from concept to a working storefront.',
),
array(
'icon' => 'layout',
'title' => 'Custom storefront builds',
'copy' => 'Storefront experiences tailored to merchandising goals, product storytelling, and customer flow.',
),
array(
'icon' => 'grid',
'title' => 'Catalog and navigation structure',
'copy' => 'Collections, filters, menus, and product organization planned for usability and growth.',
),
array(
'icon' => 'palette',
'title' => 'Brand-aligned implementation',
'copy' => 'A visual and structural setup shaped around your identity rather than generic templates alone.',
),
array(
'icon' => 'shield',
'title' => 'Commerce-ready store foundation',
'copy' => 'Launch preparation that supports integrations, conversion improvements, and ongoing operation after go-live.',
),
),
'themeParagraphs' => array(
'Shopify theme customization should improve the shopping experience without making the storefront unnecessarily heavy or harder to maintain. We tailor Shopify themes around brand direction, content needs, merchandising structure, and the parts of the customer journey that matter most for conversion.',
'That can include homepage customization, collection and product page refinement, cart experience improvements, and mobile-first UX adjustments that support both performance and day-to-day storefront management.',
),
'themeAreas' => array(
array(
'icon' => 'home',
'title' => 'Homepage customization',
'copy' => 'Hero sections, merchandising zones, campaign blocks, and brand storytelling structured for stronger first impressions.',
),
array(
'icon' => 'grid',
'title' => 'Collection and product page optimization',
'copy' => 'Layouts refined for discovery, clarity, product education, and higher-intent browsing behavior.',
),
array(
'icon' => 'cart',
'title' => 'Cart and conversion journey improvements',
'copy' => 'Reduce friction across add-to-cart, cart review, and the steps that lead into checkout completion.',
),
array(
'icon' => 'palette',
'title' => 'Brand-aligned UI enhancements',
'copy' => 'Visual details, interaction patterns, and content presentation matched to the brand experience.',
),
array(
'icon' => 'mobile',
'title' => 'Mobile-first storefront refinement',
'copy' => 'Storefront improvements shaped around how modern customers browse and buy on smaller screens.',
),
),
'integrationsIntro' => 'Shopify stores often rely on a broader toolset to run smoothly. We help connect Shopify with the apps, systems, and operational tools that support payments, shipping, marketing, reporting, customer management, and internal workflows based on store complexity and business goals.',
'integrations' => array(
array(
'icon' => 'card',
'title' => 'Payments & Checkout Tools',
'copy' => 'Payment methods, checkout-related tools, fraud support, and trust-building functionality aligned to store requirements.',
),
array(
'icon' => 'truck',
'title' => 'Shipping & Fulfillment Apps',
'copy' => 'Delivery logic, rate handling, fulfillment workflows, tracking, and operational support for post-purchase experiences.',
),
array(
'icon' => 'mail',
'title' => 'Marketing & Email Platforms',
'copy' => 'Campaign systems, email flows, remarketing tools, and customer lifecycle support that tie back to commerce goals.',
),
array(
'icon' => 'users',
'title' => 'CRM / ERP Integrations',
'copy' => 'Customer, order, pricing, and business-system connections that reduce manual work and improve visibility.',
),
array(
'icon' => 'layers',
'title' => 'Inventory & Operations Tools',
'copy' => 'Stock visibility, workflow support, catalog operations, and store management tooling matched to business needs.',
),
array(
'icon' => 'chart',
'title' => 'Analytics & Reporting Tools',
'copy' => 'Tracking, reporting, attribution, and performance visibility that help teams make better commerce decisions.',
),
array(
'icon' => 'chat',
'title' => 'Customer Support & Engagement Apps',
'copy' => 'Support widgets, reviews, loyalty, messaging, and engagement features that strengthen customer confidence.',
),
),
'conversionParagraphs' => array(
'Shopify development is not just about getting a store live. It should support better shopping journeys, clearer merchandising, stronger mobile usability, and the kinds of UX decisions that reduce hesitation across browsing, product pages, cart, and checkout.',
'We refine Shopify storefronts around conversion-focused design choices that improve discovery, reduce friction, and create more confidence throughout the customer journey while preserving performance and maintainability.',
),
'conversionChecklist' => array(
'Mobile-first shopping flows',
'Product page UX improvements',
'Collection and navigation clarity',
'Cart friction reduction',
'Merchandising support',
'Conversion-focused design decisions',
),
'conversionCards' => array(
array(
'label' => 'Storefront',
'value' => 'Clearer',
'copy' => 'Better pathing through homepage, collections, categories, and product detail pages.',
),
array(
'label' => 'Cart',
'value' => 'Smarter',
'copy' => 'Fewer blockers and stronger guidance as users move from product selection to purchase.',
),
array(
'label' => 'Mobile',
'value' => 'Faster',
'copy' => 'Responsive shopping journeys optimized for product discovery and conversion on smaller screens.',
),
),
'migrationParagraphs' => array(
'Migration to Shopify can be the right move for brands that need a simpler operating model, a cleaner storefront, or a better foundation for growth. We help merchants plan the transition path based on catalog size, workflow complexity, existing integrations, and the level of redesign or restructuring needed along the way.',
'That can include moving from Magento or Adobe Commerce, WooCommerce, custom commerce builds, or legacy eCommerce systems while preserving business continuity as much as possible and using the move as an opportunity to modernize the storefront experience.',
),
'migrationHighlights' => array(
'Platform transition planning',
'Store data and structure migration support',
'UX and storefront modernization',
'Post-migration refinement',
),
'migrationSources' => array(
array(
'icon' => 'swap',
'title' => 'Magento / Adobe Commerce',
'copy' => 'Migration paths for merchants moving from more complex commerce setups to a Shopify operating model.',
),
array(
'icon' => 'store',
'title' => 'WooCommerce',
'copy' => 'Support for brands that need a more streamlined commerce stack, faster iteration, or cleaner storefront management.',
),
array(
'icon' => 'api',
'title' => 'Custom platforms',
'copy' => 'Transition planning when legacy business logic or custom workflows need careful evaluation before migrating.',
),
array(
'icon' => 'database',
'title' => 'Legacy eCommerce systems',
'copy' => 'Restructure outdated commerce experiences while preserving operational continuity where it matters.',
),
),
'supportCards' => array(
array(
'label' => 'Ongoing Maintenance',
'icon' => 'shield',
'title' => 'Maintenance and troubleshooting for live Shopify stores',
'description' => 'Keep the storefront stable and easier to manage as the store evolves after launch.',
'items' => array(
'Bug fixes and issue resolution',
'Theme updates and technical troubleshooting',
'Support for storefront and day-to-day store issues',
),
),
array(
'label' => 'Growth Enhancements',
'icon' => 'growth',
'title' => 'Enhancements for UX, conversion, and new feature rollouts',
'description' => 'Improve the store through iterative updates that support growth and better customer experience.',
'items' => array(
'UX improvements and storefront refinements',
'Conversion optimization support',
'New feature rollouts and store enhancements',
),
),
array(
'label' => 'Long-Term Support',
'icon' => 'compass',
'title' => 'Long-term technical partnership for Shopify growth',
'description' => 'Support integrations, performance, and evolving commerce priorities as the store scales.',
'items' => array(
'Integration evolution and app support',
'Performance tuning and store optimization',
'Ongoing technical partnership for growing stores',
),
),
),
'caseStudies' => array(
array(
'title' => 'D2C Shopify Store Launch for a Lifestyle Brand',
'platform' => 'Shopify',
'industry' => 'Lifestyle',
'service' => 'Store Launch',
'challenge' => 'The brand needed a clean launch path with stronger product presentation, mobile usability, and merchandising flexibility.',
'solution' => 'We built a Shopify storefront with brand-led storytelling, clearer collection flows, and a simpler operational setup.',
'outcome' => 'The business launched with a stronger D2C foundation for campaigns, customer acquisition, and repeat purchase growth.',
),
array(
'title' => 'Shopify Redesign for Conversion Improvement',
'platform' => 'Shopify',
'industry' => 'Beauty',
'service' => 'Redesign',
'challenge' => 'The existing storefront lacked clarity across collections, product pages, and mobile shopping flow.',
'solution' => 'We reworked the storefront UX, page structure, and conversion patterns to support product discovery and purchase intent.',
'outcome' => 'The redesigned store gave the team a more conversion-focused storefront and a cleaner base for merchandising growth.',
),
array(
'title' => 'Migration from WooCommerce to Shopify with Integrations',
'platform' => 'Shopify',
'industry' => 'Retail',
'service' => 'Migration',
'challenge' => 'The merchant needed a more manageable commerce setup without losing momentum across catalog and operational workflows.',
'solution' => 'We planned the migration path, modernized the storefront, and supported the Shopify app and system setup around the new store.',
'outcome' => 'The transition created a more streamlined store operation and a stronger platform for future enhancements.',
),
),
'ctaTitle' => 'Looking for Shopify Development Services?',
'ctaText' => 'Discuss Shopify store builds, redesigns, theme customization, app integrations, migration needs, or ongoing support requirements with a team that can align the storefront with your brand and growth goals.',
'ctaHighlights' => array(
'Shopify store setup, custom builds, and theme customization',
'App integrations, migration to Shopify, and operational support',
'Conversion-focused storefront design and long-term growth work',
),
'ctaSteps' => array(
array(
'title' => 'Share your Shopify goals',
'copy' => 'Tell us about your current store, launch plans, redesign needs, integrations, and growth priorities.',
),
array(
'title' => 'Review the right Shopify approach',
'copy' => 'We help map the storefront direction, implementation scope, migration path, and support model that fit best.',
),
array(
'title' => 'Move into planning',
'copy' => 'Leave with clearer next steps for build, optimization, migration, and long-term Shopify growth support.',
),
),
);
return $data;
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_heading' ) ) {
function ethnic_shopify_development_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-shopify-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-shopify-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-shopify-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-shopify-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_icon' ) ) {
function ethnic_shopify_development_page_icon( $icon ) {
ob_start();
switch ( $icon ) {
case 'store':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.2 9.2h15.6l-1.2 10.2H5.4L4.2 9.2z" />
<path d="M6.2 9.2 7.5 5h9l1.3 4.2" />
<path d="M9.2 13h5.6" />
</svg>
<?php
break;
case 'spark':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 3.5l1.8 4.7 4.7 1.8-4.7 1.8-1.8 4.7-1.8-4.7-4.7-1.8 4.7-1.8z" />
<path d="M18.3 15.2l.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4-2.4-.9 2.4-.9z" />
</svg>
<?php
break;
case 'plug':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M9 4.2v4.4" />
<path d="M15 4.2v4.4" />
<path d="M7.2 8.5h9.6v2.7a4.8 4.8 0 0 1-4.8 4.8 4.8 4.8 0 0 1-4.8-4.8z" />
<path d="M12 16v4.2" />
</svg>
<?php
break;
case 'growth':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.5 18.5h15" />
<path d="M7 15.2l3-3 3 3 4.5-5" />
<path d="M14.7 10.2h3.8V14" />
</svg>
<?php
break;
case 'rocket':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M14.6 4.2c2.5.3 4.9 2.7 5.2 5.2l-4.3 4.3-5.2-5.2z" />
<path d="M10.3 8.5 5.7 9.7 4 14.3l3.8-.8" />
<path d="M13.7 16.2 14.5 20 19 18.3l1.3-4.6" />
<path d="M8.2 15.8 5.6 18.4" />
</svg>
<?php
break;
case 'layout':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.8" y="4.2" width="16.4" height="15.6" rx="2" />
<path d="M3.8 9.2h16.4" />
<path d="M10 9.2v10.6" />
</svg>
<?php
break;
case 'grid':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="4" width="6" height="6" rx="1.2" />
<rect x="14" y="4" width="6" height="6" rx="1.2" />
<rect x="4" y="14" width="6" height="6" rx="1.2" />
<rect x="14" y="14" width="6" height="6" rx="1.2" />
</svg>
<?php
break;
case 'palette':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 4c4.4 0 8 2.8 8 6.4 0 3-2.7 5.4-6.1 5.4h-1.2c-.8 0-1.5.6-1.5 1.3 0 .4.1.7.4 1l.7.7c.5.5.2 1.2-.5 1.2C7.5 20 4 16.6 4 12.4 4 7.8 7.6 4 12 4z" />
<circle cx="8.2" cy="10.1" r="1" />
<circle cx="11.1" cy="8.1" r="1" />
<circle cx="14.5" cy="8.3" r="1" />
<circle cx="16.9" cy="10.8" r="1" />
</svg>
<?php
break;
case 'shield':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 3.5 18 6v5.2c0 4-2.4 7.6-6 9.4-3.6-1.8-6-5.4-6-9.4V6L12 3.5z" />
<path d="M9.2 12.2l1.9 1.9 3.7-3.8" />
</svg>
<?php
break;
case 'home':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.8 10.4 12 4.8l7.2 5.6v8.2H4.8z" />
<path d="M9.4 18.6v-5.2h5.2v5.2" />
</svg>
<?php
break;
case 'cart':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.5 5h2l1.6 8h8.7l1.7-5.2H8.7" />
<circle cx="10.2" cy="18.2" r="1.4" />
<circle cx="16.4" cy="18.2" r="1.4" />
</svg>
<?php
break;
case 'mobile':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="7" y="2.8" width="10" height="18.4" rx="2.3" />
<path d="M10 6.2h4" />
<path d="M9.6 14.5l2.1-2.1 2.6 2.6 2-2" />
</svg>
<?php
break;
case 'card':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.5" y="5.5" width="17" height="13" rx="2" />
<path d="M3.5 10h17" />
<path d="M7.5 14.2h3.4" />
</svg>
<?php
break;
case 'truck':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M3.5 7.8h10.8v7.1H3.5z" />
<path d="M14.3 10h3.3l2.9 2.9v2H14.3z" />
<circle cx="7.5" cy="17.2" r="1.5" />
<circle cx="17.5" cy="17.2" r="1.5" />
</svg>
<?php
break;
case 'mail':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.5" y="5.6" width="17" height="12.8" rx="2" />
<path d="m4.8 7.8 7.2 5.2 7.2-5.2" />
</svg>
<?php
break;
case 'users':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="8" cy="9" r="2.4" />
<circle cx="16.4" cy="9.4" r="2" />
<path d="M4.5 18c.6-2.2 2.3-3.5 4.7-3.5s4.1 1.3 4.7 3.5" />
<path d="M13.4 17.6c.4-1.7 1.8-2.7 3.7-2.7 1.4 0 2.6.6 3.4 1.8" />
</svg>
<?php
break;
case 'layers':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 4l8 4.2-8 4.2-8-4.2z" />
<path d="M4 12l8 4.2 8-4.2" />
<path d="M4 15.8l8 4.2 8-4.2" />
</svg>
<?php
break;
case 'chart':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.5 18.5h15" />
<rect x="6.2" y="11" width="2.6" height="7.5" rx=".8" />
<rect x="10.8" y="8" width="2.6" height="10.5" rx=".8" />
<rect x="15.4" y="5.2" width="2.6" height="13.3" rx=".8" />
</svg>
<?php
break;
case 'chat':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 6.2h14A1.8 1.8 0 0 1 20.8 8v6.6A1.8 1.8 0 0 1 19 16.4H10l-4.5 3v-3H5A1.8 1.8 0 0 1 3.2 14.6V8A1.8 1.8 0 0 1 5 6.2z" />
</svg>
<?php
break;
case 'swap':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 7.2h10.2" />
<path d="m14.8 4.8 2.4 2.4-2.4 2.4" />
<path d="M17 16.8H6.8" />
<path d="m9.2 14.4-2.4 2.4 2.4 2.4" />
</svg>
<?php
break;
case 'api':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M8.2 8.2 5 12l3.2 3.8" />
<path d="M15.8 8.2 19 12l-3.2 3.8" />
<path d="M13.2 6.5 10.8 17.5" />
</svg>
<?php
break;
case 'database':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<ellipse cx="12" cy="6.6" rx="6.6" ry="2.8" />
<path d="M5.4 6.6v10.8c0 1.6 3 2.8 6.6 2.8s6.6-1.2 6.6-2.8V6.6" />
<path d="M5.4 12c0 1.6 3 2.8 6.6 2.8s6.6-1.2 6.6-2.8" />
</svg>
<?php
break;
case 'compass':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="8.5" />
<path d="M15.8 8.2 13.6 13.6 8.2 15.8l2.2-5.4z" />
</svg>
<?php
break;
case 'check':
default:
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="8.5" />
<path d="M8.6 12.3 10.8 14.5 15.4 9.9" />
</svg>
<?php
break;
}
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_render' ) ) {
function ethnic_shopify_development_page_render() {
$data = ethnic_shopify_development_page_data();
$consultation_url = ethnic_shopify_development_page_contact_url(
array(
'intent' => 'consultation',
'service' => 'shopify-development',
)
);
$team_url = ethnic_shopify_development_page_contact_url(
array(
'intent' => 'team',
'service' => 'shopify-development',
)
);
$quote_url = ethnic_shopify_development_page_contact_url(
array(
'intent' => 'quote',
'service' => 'shopify-development',
)
);
$case_studies_url = ethnic_shopify_development_page_case_studies_url();
$case_studies = function_exists( 'ethnic_case_studies_service_page_cards' )
? ethnic_case_studies_service_page_cards(
array(
'page_id' => get_queried_object_id(),
'limit' => 3,
'filters' => array(
'service' => array( 'ecommerce-development' ),
'platform' => array( 'shopify' ),
'category' => array( 'shopify' ),
),
'fallback_items' => $data['caseStudies'],
)
)
: (array) $data['caseStudies'];
$case_studies_anchor = ! empty( $case_studies ) ? '#case-studies' : $case_studies_url;
ob_start();
?>
<div class="ethnic-shopify-page">
<section class="ethnic-shopify-section ethnic-shopify-section--hero">
<div class="ethnic-shopify-shell">
<div class="ethnic-shopify-hero">
<div class="ethnic-shopify-hero__copy">
<p class="ethnic-shopify-kicker">Shopify Commerce</p>
<h1 class="ethnic-shopify-hero__title"><?php echo esc_html( $data['heroTitle'] ); ?></h1>
<p class="ethnic-shopify-hero__lead"><?php echo esc_html( $data['heroText'] ); ?></p>
<div class="ethnic-shopify-actions">
<a class="ethnic-shopify-button ethnic-shopify-button--primary" href="<?php echo esc_url( $consultation_url ); ?>">Book a Free Consultation</a>
<a class="ethnic-shopify-button ethnic-shopify-button--secondary" href="<?php echo esc_url( $case_studies_anchor ); ?>">View Case Studies</a>
</div>
<ul class="ethnic-shopify-hero__points" aria-label="Shopify service highlights">
<?php foreach ( (array) $data['heroPoints'] as $point ) : ?>
<li><?php echo esc_html( $point ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-shopify-hero__visual">
<div class="ethnic-shopify-visual">
<div class="ethnic-shopify-visual__window">
<div class="ethnic-shopify-visual__window-bar">
<span></span>
<span></span>
<span></span>
</div>
<div class="ethnic-shopify-visual__window-body">
<div class="ethnic-shopify-visual__toolbar">
<span>Homepage</span>
<span>Collection</span>
<span>Product</span>
</div>
<div class="ethnic-shopify-visual__feature">
<div class="ethnic-shopify-visual__feature-shot"></div>
<div class="ethnic-shopify-visual__feature-copy">
<span class="ethnic-shopify-visual__eyebrow">Storefront mockup</span>
<strong>Shopify product page UI built for merchandising and mobile conversion.</strong>
<p>Clean product education, trust cues, add-to-cart momentum, and a layout that supports both brand and performance goals.</p>
<div class="ethnic-shopify-visual__tags">
<span>Theme-ready</span>
<span>Mobile-first</span>
<span>Fast UX</span>
</div>
</div>
</div>
<div class="ethnic-shopify-visual__collection">
<div class="ethnic-shopify-visual__collection-card">
<small>Collection page</small>
<strong>Navigation and filtering clarity</strong>
</div>
<div class="ethnic-shopify-visual__collection-card">
<small>Product detail</small>
<strong>Trust, content, and cross-sell structure</strong>
</div>
</div>
</div>
</div>
<div class="ethnic-shopify-visual__floating ethnic-shopify-visual__floating--admin">
<p class="ethnic-shopify-visual__floating-label">Admin-style view</p>
<strong>Store setup and app readiness</strong>
<div class="ethnic-shopify-visual__metric-grid">
<div>
<small>Catalog</small>
<strong>Structured</strong>
</div>
<div>
<small>Apps</small>
<strong>Connected</strong>
</div>
</div>
<div class="ethnic-shopify-visual__progress">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="ethnic-shopify-visual__floating ethnic-shopify-visual__floating--checkout">
<p class="ethnic-shopify-visual__floating-label">Conversion support</p>
<strong>Collection, PDP, cart, and checkout-adjacent improvements</strong>
<ul>
<li>Theme customization</li>
<li>App integrations</li>
<li>Merchandising and UX refinement</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-shopify-section" id="overview">
<div class="ethnic-shopify-shell">
<?php echo ethnic_shopify_development_page_heading( 'Service Overview', 'Shopify development services for brands that need more than a basic store setup.', 'We support new builds, redesigns, migrations, integrations, feature enhancements, and post-launch optimization through a delivery model shaped around conversion, performance, and day-to-day usability.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-shopify-overview">
<div class="ethnic-shopify-prose">
<?php foreach ( (array) $data['overviewParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-shopify-card-grid ethnic-shopify-card-grid--overview">
<?php foreach ( (array) $data['overviewFeatures'] as $feature ) : ?>
<article class="ethnic-shopify-card">
<div class="ethnic-shopify-card__icon">
<?php echo ethnic_shopify_development_page_icon( $feature['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $feature['title'] ); ?></h3>
<p><?php echo esc_html( $feature['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<section class="ethnic-shopify-section ethnic-shopify-section--soft" id="store-setup">
<div class="ethnic-shopify-shell">
<div class="ethnic-shopify-split">
<div class="ethnic-shopify-split__content">
<?php echo ethnic_shopify_development_page_heading( 'Shopify Store Setup and Custom Builds', 'Shopify store setup built around launch readiness and long-term scale.', 'We deliver Shopify store setup and custom storefront builds for businesses that need a more structured foundation for content, products, collections, navigation, and growth-focused commerce operations.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['setupParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-shopify-split__visual">
<div class="ethnic-shopify-panel">
<p class="ethnic-shopify-panel__eyebrow">Store Foundation</p>
<div class="ethnic-shopify-panel__grid">
<?php foreach ( (array) $data['setupCards'] as $card ) : ?>
<article class="ethnic-shopify-panel__card">
<div class="ethnic-shopify-card__icon">
<?php echo ethnic_shopify_development_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-shopify-section" id="theme-customization">
<div class="ethnic-shopify-shell">
<?php echo ethnic_shopify_development_page_heading( 'Theme Customization', 'Shopify theme customization that improves UX without unnecessary complexity.', 'We tailor Shopify themes to brand requirements, merchandising needs, and conversion priorities while balancing design flexibility, storefront speed, and maintainability over time.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-shopify-prose ethnic-shopify-prose--narrow">
<?php foreach ( (array) $data['themeParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-shopify-card-grid ethnic-shopify-card-grid--themes">
<?php foreach ( (array) $data['themeAreas'] as $area ) : ?>
<article class="ethnic-shopify-card ethnic-shopify-card--theme">
<div class="ethnic-shopify-card__icon">
<?php echo ethnic_shopify_development_page_icon( $area['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $area['title'] ); ?></h3>
<p><?php echo esc_html( $area['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-shopify-section ethnic-shopify-section--soft" id="integrations">
<div class="ethnic-shopify-shell">
<?php echo ethnic_shopify_development_page_heading( 'App Integrations', 'Shopify app and system integrations that support smoother operations and better customer experience.', $data['integrationsIntro'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-shopify-card-grid ethnic-shopify-card-grid--integrations">
<?php foreach ( (array) $data['integrations'] as $integration ) : ?>
<article class="ethnic-shopify-card ethnic-shopify-card--integration">
<div class="ethnic-shopify-card__icon">
<?php echo ethnic_shopify_development_page_icon( $integration['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $integration['title'] ); ?></h3>
<p><?php echo esc_html( $integration['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-shopify-section" id="conversion-focus">
<div class="ethnic-shopify-shell">
<div class="ethnic-shopify-conversion">
<div class="ethnic-shopify-conversion__copy">
<?php echo ethnic_shopify_development_page_heading( 'Conversion-Focused Design', 'Shopify development shaped around better UX, stronger merchandising, and cleaner customer journeys.', 'We improve Shopify storefronts through conversion-focused design decisions that support mobile shopping, product discovery, trust, and lower friction across the path to purchase.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['conversionParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
<ul class="ethnic-shopify-checklist">
<?php foreach ( (array) $data['conversionChecklist'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-shopify-conversion__visual">
<div class="ethnic-shopify-dashboard">
<p class="ethnic-shopify-dashboard__eyebrow">Conversion View</p>
<div class="ethnic-shopify-dashboard__cards">
<?php foreach ( (array) $data['conversionCards'] as $card ) : ?>
<div class="ethnic-shopify-dashboard__card">
<small><?php echo esc_html( $card['label'] ); ?></small>
<strong><?php echo esc_html( $card['value'] ); ?></strong>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</div>
<?php endforeach; ?>
</div>
<div class="ethnic-shopify-dashboard__journey">
<div class="ethnic-shopify-dashboard__step">
<span>01</span>
<div>
<strong>Improve discovery</strong>
<p>Clearer collections, filtering logic, and product hierarchy for faster browsing decisions.</p>
</div>
</div>
<div class="ethnic-shopify-dashboard__step">
<span>02</span>
<div>
<strong>Reduce friction</strong>
<p>Better product page structure, add-to-cart flow, cart cues, and mobile usability across purchase steps.</p>
</div>
</div>
<div class="ethnic-shopify-dashboard__step">
<span>03</span>
<div>
<strong>Support growth</strong>
<p>Merchandising, design refinement, and post-launch UX improvements tied back to commercial goals.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-shopify-section ethnic-shopify-section--soft" id="migration">
<div class="ethnic-shopify-shell">
<div class="ethnic-shopify-split ethnic-shopify-split--migration">
<div class="ethnic-shopify-split__content">
<?php echo ethnic_shopify_development_page_heading( 'Migration to Shopify', 'Migration to Shopify planned around continuity, modernization, and the right growth stage.', 'We help merchants move to Shopify in a way that reduces disruption, protects the parts of the business that need continuity, and uses the migration as a chance to improve the storefront experience.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['migrationParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
<ul class="ethnic-shopify-checklist">
<?php foreach ( (array) $data['migrationHighlights'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-shopify-split__visual">
<div class="ethnic-shopify-card-grid ethnic-shopify-card-grid--migration">
<?php foreach ( (array) $data['migrationSources'] as $source ) : ?>
<article class="ethnic-shopify-card ethnic-shopify-card--migration">
<div class="ethnic-shopify-card__icon">
<?php echo ethnic_shopify_development_page_icon( $source['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $source['title'] ); ?></h3>
<p><?php echo esc_html( $source['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-shopify-section" id="support">
<div class="ethnic-shopify-shell">
<?php echo ethnic_shopify_development_page_heading( 'Support Plans', 'Post-launch Shopify support built for stability, growth, and long-term improvement.', 'We support bug fixing, theme updates, integration troubleshooting, performance work, conversion improvements, and ongoing technical partnership for growing Shopify stores.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-shopify-card-grid ethnic-shopify-card-grid--support">
<?php foreach ( (array) $data['supportCards'] as $support ) : ?>
<article class="ethnic-shopify-card ethnic-shopify-card--support">
<p class="ethnic-shopify-card__label"><?php echo esc_html( $support['label'] ); ?></p>
<div class="ethnic-shopify-card__icon">
<?php echo ethnic_shopify_development_page_icon( $support['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $support['title'] ); ?></h3>
<p><?php echo esc_html( $support['description'] ); ?></p>
<ul class="ethnic-shopify-checklist">
<?php foreach ( (array) $support['items'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<?php if ( ! empty( $case_studies ) ) : ?>
<section class="ethnic-shopify-section ethnic-shopify-section--contrast" id="case-studies">
<div class="ethnic-shopify-shell">
<?php echo ethnic_shopify_development_page_heading( 'Case Studies', 'Shopify delivery examples for launches, redesigns, migration, and growth.', 'These case study previews reflect the kinds of Shopify build, optimization, and migration outcomes we help commerce teams work toward.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo ethnic_shared_case_study_showcase_render( $case_studies, array( 'carousel_label' => 'Shopify case studies showcase' ) ); ?>
</div>
</section>
<?php endif; ?>
<section class="ethnic-shopify-section ethnic-shopify-section--cta" id="cta">
<div class="ethnic-shopify-shell">
<div class="ethnic-shopify-cta">
<div class="ethnic-shopify-cta__copy">
<div class="ethnic-shopify-cta__intro">
<p class="ethnic-shopify-kicker ethnic-shopify-kicker--light">Ready to Talk</p>
<p class="ethnic-shopify-cta__note">Planning for Shopify store builds, redesigns, migration, integrations, and long-term support.</p>
</div>
<h2><?php echo esc_html( $data['ctaTitle'] ); ?></h2>
<p class="ethnic-shopify-cta__lead"><?php echo esc_html( $data['ctaText'] ); ?></p>
<div class="ethnic-shopify-actions">
<a class="ethnic-shopify-button ethnic-shopify-button--primary" href="<?php echo esc_url( $team_url ); ?>">Talk to Our Team</a>
<a class="ethnic-shopify-button ethnic-shopify-button--secondary" href="<?php echo esc_url( $quote_url ); ?>">Get a Free Quote</a>
</div>
<ul class="ethnic-shopify-cta__highlights" aria-label="Shopify CTA highlights">
<?php foreach ( (array) $data['ctaHighlights'] as $highlight ) : ?>
<li><?php echo esc_html( $highlight ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<aside class="ethnic-shopify-cta__panel" aria-label="What happens next">
<div class="ethnic-shopify-cta__panel-header">
<p class="ethnic-shopify-cta__panel-eyebrow">What Happens Next</p>
<h3 class="ethnic-shopify-cta__panel-title">Shape the right Shopify delivery plan</h3>
</div>
<ol class="ethnic-shopify-cta__steps">
<?php foreach ( (array) $data['ctaSteps'] as $index => $step ) : ?>
<li class="ethnic-shopify-cta__step">
<span class="ethnic-shopify-cta__step-number"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<div class="ethnic-shopify-cta__step-copy">
<strong><?php echo esc_html( $step['title'] ); ?></strong>
<p><?php echo esc_html( $step['copy'] ); ?></p>
</div>
</li>
<?php endforeach; ?>
</ol>
<div class="ethnic-shopify-cta__panel-note"><strong>Focus:</strong> store setup, theme direction, integration scope, migration planning, and ongoing Shopify growth support.</div>
</aside>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_styles' ) ) {
function ethnic_shopify_development_page_styles() {
return <<<'CSS'
body.ethnic-shopify-development-target #page-title.page-title-block.custom-page-title {
display: none;
}
body.ethnic-shopify-development-target .fullwidth-content > .ethnic-shopify-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
body.ethnic-shopify-development-target .block-content > .container {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}
body.ethnic-shopify-development-target .block-content > .container > .panel.row {
margin-left: 0;
margin-right: 0;
}
body.ethnic-shopify-development-target .block-content > .container > .panel > .panel-center {
width: 100%;
padding-left: 0;
padding-right: 0;
}
body.ethnic-shopify-development-target .entry-content.post-content {
margin-bottom: 0;
}
.ethnic-shopify-page {
--ethnic-shopify-text: #0f172a;
--ethnic-shopify-muted: #5d6d83;
--ethnic-shopify-border: rgba(15, 23, 42, 0.09);
--ethnic-shopify-surface: rgba(255, 255, 255, 0.96);
--ethnic-shopify-surface-strong: #ffffff;
--ethnic-shopify-soft: rgba(243, 247, 255, 0.96);
--ethnic-shopify-accent: #63a838;
--ethnic-shopify-accent-dark: #2d5d1f;
--ethnic-shopify-blue: #2f6bff;
--ethnic-shopify-lime: #e7ff89;
--ethnic-shopify-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
--ethnic-shopify-shadow-strong: 0 30px 80px rgba(15, 23, 42, 0.18);
color: var(--ethnic-shopify-text);
overflow-x: clip;
}
.ethnic-shopify-page,
.ethnic-shopify-page *,
.ethnic-shopify-page *::before,
.ethnic-shopify-page *::after {
box-sizing: border-box;
}
.ethnic-shopify-shell {
width: min(1240px, calc(100% - (var(--ethnic-shopify-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-shopify-section + .ethnic-shopify-section {
margin-top: clamp(72px, 8vw, 112px);
}
.ethnic-shopify-section--soft {
padding: clamp(28px, 4vw, 36px) 0;
}
.ethnic-shopify-section--contrast {
padding: clamp(42px, 5vw, 58px) 0;
border-radius: 36px;
background: linear-gradient(180deg, rgba(10, 24, 45, 0.98), rgba(13, 34, 55, 0.98));
}
.ethnic-shopify-page p,
.ethnic-shopify-page li {
color: var(--ethnic-shopify-muted);
font-size: 16px;
line-height: 1.78;
}
.ethnic-shopify-kicker,
.ethnic-shopify-heading__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
min-height: 34px;
margin: 0 0 16px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.ethnic-shopify-kicker::before,
.ethnic-shopify-heading__eyebrow::before,
.ethnic-shopify-cta__panel-eyebrow::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.ethnic-shopify-kicker--light,
.ethnic-shopify-heading__eyebrow {
background: rgba(99, 168, 56, 0.1);
border-color: rgba(99, 168, 56, 0.16);
color: var(--ethnic-shopify-accent) !important;
-webkit-text-fill-color: var(--ethnic-shopify-accent);
text-shadow: none;
}
.ethnic-shopify-heading {
max-width: 820px;
margin-bottom: clamp(28px, 4vw, 40px);
}
.ethnic-shopify-heading__title,
.ethnic-shopify-hero__title,
.ethnic-shopify-cta h2 {
margin: 0;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-shopify-heading__title,
.ethnic-shopify-cta h2 {
color: var(--ethnic-shopify-text);
font-size: clamp(32px, 3vw, 44px);
line-height: 1.06;
}
.ethnic-shopify-heading__copy,
.ethnic-shopify-prose p,
.ethnic-shopify-card p,
.ethnic-shopify-case-card p,
.ethnic-shopify-conversion__copy p,
.ethnic-shopify-cta__lead,
.ethnic-shopify-cta__step-copy p {
margin: 18px 0 0;
}
.ethnic-shopify-prose--narrow {
max-width: 76ch;
}
.ethnic-shopify-section--hero {
position: relative;
background:
radial-gradient(circle at 16% 18%, rgba(99, 168, 56, 0.22), transparent 24%),
radial-gradient(circle at 82% 16%, rgba(47, 107, 255, 0.16), transparent 20%),
linear-gradient(180deg, #091328, #10263f 54%, #12354c);
}
.ethnic-shopify-section--hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 80%);
pointer-events: none;
}
.ethnic-shopify-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.96fr);
gap: clamp(32px, 5vw, 68px);
align-items: center;
min-height: clamp(600px, 72vw, 760px);
padding: clamp(82px, 8vw, 128px) 0;
}
.ethnic-shopify-hero__copy,
.ethnic-shopify-hero__visual {
position: relative;
z-index: 1;
}
.ethnic-shopify-hero__title {
max-width: 8ch;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: clamp(44px, 5.2vw, 72px);
line-height: 0.98;
}
.ethnic-shopify-hero__lead {
max-width: 61ch;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(17px, 1.45vw, 20px);
line-height: 1.82;
}
.ethnic-shopify-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.ethnic-shopify-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 14px 24px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 15px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ethnic-shopify-button:hover,
.ethnic-shopify-button:focus-visible {
transform: translateY(-1px);
text-decoration: none;
}
.ethnic-shopify-button--primary {
background: var(--ethnic-shopify-lime);
color: #0b1730 !important;
box-shadow: 0 20px 44px rgba(5, 14, 28, 0.24);
}
.ethnic-shopify-button--primary:hover,
.ethnic-shopify-button--primary:focus-visible {
background: #f1ffb7;
color: #0b1730 !important;
box-shadow: 0 24px 50px rgba(5, 14, 28, 0.28);
}
.ethnic-shopify-button--secondary {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
color: #ffffff !important;
}
.ethnic-shopify-button--ghost {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
color: #ffffff !important;
}
.ethnic-shopify-button--ghost:hover,
.ethnic-shopify-button--ghost:focus-visible {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.18);
}
.ethnic-shopify-hero__points,
.ethnic-shopify-checklist,
.ethnic-shopify-cta__highlights {
display: grid;
gap: 12px;
padding: 0;
margin: 26px 0 0;
list-style: none;
}
.ethnic-shopify-hero__points {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 860px;
}
.ethnic-shopify-hero__points li,
.ethnic-shopify-checklist li,
.ethnic-shopify-cta__highlights li {
position: relative;
padding-left: 22px;
}
.ethnic-shopify-hero__points li {
padding: 16px 18px 16px 42px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.88);
font-size: 15px;
font-weight: 600;
line-height: 1.5;
}
.ethnic-shopify-hero__points li::before,
.ethnic-shopify-checklist li::before,
.ethnic-shopify-cta__highlights li::before {
content: "";
position: absolute;
left: 0;
top: 0.38em;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ethnic-shopify-lime);
box-shadow: 0 0 0 5px rgba(231, 255, 137, 0.16);
}
.ethnic-shopify-hero__points li::before {
left: 18px;
top: 20px;
}
.ethnic-shopify-visual {
position: relative;
min-height: 560px;
}
.ethnic-shopify-visual__window {
position: relative;
padding: 22px;
border-radius: 34px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
rgba(9, 20, 38, 0.76);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 30px 80px rgba(5, 14, 28, 0.32);
backdrop-filter: blur(18px);
}
.ethnic-shopify-visual__window-bar {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
.ethnic-shopify-visual__window-bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.52);
}
.ethnic-shopify-visual__window-body {
padding: 18px;
border-radius: 26px;
background:
radial-gradient(circle at top right, rgba(99, 168, 56, 0.16), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.96));
border: 1px solid rgba(255, 255, 255, 0.62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.ethnic-shopify-visual__toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.ethnic-shopify-visual__toolbar span,
.ethnic-shopify-visual__tags span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(99, 168, 56, 0.1);
color: var(--ethnic-shopify-accent-dark);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.ethnic-shopify-visual__feature {
display: grid;
grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1fr);
gap: 18px;
padding: 18px;
border-radius: 24px;
background: var(--ethnic-shopify-surface-strong);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.ethnic-shopify-visual__feature-shot {
min-height: 188px;
border-radius: 20px;
background:
radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), transparent 22%),
linear-gradient(150deg, rgba(99, 168, 56, 0.18), rgba(47, 107, 255, 0.08)),
linear-gradient(180deg, #eff6ff, #e9f7dc);
position: relative;
overflow: hidden;
}
.ethnic-shopify-visual__feature-shot::before,
.ethnic-shopify-visual__feature-shot::after {
content: "";
position: absolute;
border-radius: 18px;
}
.ethnic-shopify-visual__feature-shot::before {
inset: 16px;
background: linear-gradient(180deg, #ffffff, #eef7e5);
border: 1px solid rgba(99, 168, 56, 0.14);
}
.ethnic-shopify-visual__feature-shot::after {
left: 34px;
right: 34px;
bottom: 24px;
height: 42px;
background: rgba(99, 168, 56, 0.14);
}
.ethnic-shopify-visual__eyebrow,
.ethnic-shopify-panel__eyebrow,
.ethnic-shopify-dashboard__eyebrow,
.ethnic-shopify-card__label,
.ethnic-shopify-cta__note,
.ethnic-shopify-visual__floating-label {
display: inline-flex;
color: rgba(15, 23, 42, 0.58);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-shopify-visual__feature-copy strong,
.ethnic-shopify-dashboard__step strong,
.ethnic-shopify-cta__step-copy strong {
display: block;
margin: 0;
color: var(--ethnic-shopify-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}
.ethnic-shopify-visual__eyebrow {
margin-bottom: 8px;
color: var(--ethnic-shopify-accent);
}
.ethnic-shopify-visual__feature-copy p {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.7;
}
.ethnic-shopify-visual__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.ethnic-shopify-visual__collection {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
}
.ethnic-shopify-visual__collection-card {
padding: 16px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}
.ethnic-shopify-visual__collection-card small,
.ethnic-shopify-dashboard__card small,
.ethnic-shopify-visual__metric-grid small {
display: block;
color: rgba(15, 23, 42, 0.54);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-shopify-visual__collection-card strong,
.ethnic-shopify-visual__floating strong,
.ethnic-shopify-dashboard__card strong {
display: block;
margin-top: 8px;
color: var(--ethnic-shopify-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
line-height: 1.42;
}
.ethnic-shopify-visual__collection-card strong {
font-size: 16px;
}
.ethnic-shopify-visual__floating {
position: absolute;
padding: 18px;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9)),
var(--ethnic-shopify-surface-strong);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 20px 50px rgba(5, 14, 28, 0.16);
backdrop-filter: blur(16px);
}
.ethnic-shopify-visual__floating strong {
font-size: 17px;
}
.ethnic-shopify-visual__floating ul {
display: grid;
gap: 10px;
padding: 0;
margin: 14px 0 0;
list-style: none;
}
.ethnic-shopify-visual__floating li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.6;
}
.ethnic-shopify-visual__floating li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ethnic-shopify-accent);
box-shadow: 0 0 0 4px rgba(99, 168, 56, 0.12);
}
.ethnic-shopify-visual__floating--admin {
left: -14px;
top: 58px;
width: min(260px, 100%);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
linear-gradient(180deg, #113022, #173728);
border-color: rgba(255, 255, 255, 0.1);
}
.ethnic-shopify-visual__floating--admin .ethnic-shopify-visual__floating-label,
.ethnic-shopify-visual__floating--admin strong,
.ethnic-shopify-visual__floating--admin small {
color: #ffffff;
}
.ethnic-shopify-visual__floating--checkout {
right: -14px;
bottom: 22px;
width: min(320px, 100%);
}
.ethnic-shopify-visual__metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}
.ethnic-shopify-visual__metric-grid div {
padding: 14px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
}
.ethnic-shopify-visual__metric-grid strong {
font-size: 16px;
}
.ethnic-shopify-visual__progress {
display: grid;
gap: 8px;
margin-top: 16px;
}
.ethnic-shopify-visual__progress span {
display: block;
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(231, 255, 137, 0.9), rgba(99, 168, 56, 0.9));
}
.ethnic-shopify-visual__progress span:nth-child(2) {
width: 82%;
}
.ethnic-shopify-visual__progress span:nth-child(3) {
width: 68%;
}
.ethnic-shopify-overview,
.ethnic-shopify-conversion,
.ethnic-shopify-split {
display: grid;
grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
gap: clamp(28px, 4vw, 48px);
align-items: start;
}
.ethnic-shopify-card-grid {
display: grid;
gap: 20px;
}
.ethnic-shopify-card-grid--overview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-shopify-card,
.ethnic-shopify-case-card,
.ethnic-shopify-panel,
.ethnic-shopify-dashboard,
.ethnic-shopify-cta {
border-radius: 28px;
border: 1px solid var(--ethnic-shopify-border);
box-shadow: var(--ethnic-shopify-shadow);
}
.ethnic-shopify-card,
.ethnic-shopify-panel,
.ethnic-shopify-dashboard {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.96)),
var(--ethnic-shopify-surface-strong);
}
.ethnic-shopify-card {
padding: 24px;
}
.ethnic-shopify-card__icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
background: rgba(99, 168, 56, 0.1);
color: var(--ethnic-shopify-accent);
}
.ethnic-shopify-card__icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-shopify-card h3,
.ethnic-shopify-case-card h3 {
margin: 18px 0 0;
color: var(--ethnic-shopify-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
.ethnic-shopify-panel {
padding: 26px;
}
.ethnic-shopify-panel__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 18px;
}
.ethnic-shopify-panel__card {
padding: 18px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.ethnic-shopify-panel__card h3 {
margin: 16px 0 0;
font-size: 18px;
}
.ethnic-shopify-panel__card p {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.68;
}
.ethnic-shopify-card-grid--themes {
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-top: 24px;
}
.ethnic-shopify-card-grid--integrations {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ethnic-shopify-card-grid--migration {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-shopify-card-grid--support,
.ethnic-shopify-card-grid--case-studies {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-shopify-checklist li {
font-size: 14px;
font-weight: 600;
line-height: 1.62;
}
.ethnic-shopify-checklist li::before,
.ethnic-shopify-cta__highlights li::before {
background: var(--ethnic-shopify-accent);
box-shadow: 0 0 0 5px rgba(99, 168, 56, 0.12);
}
.ethnic-shopify-dashboard {
padding: 28px;
background:
radial-gradient(circle at top right, rgba(99, 168, 56, 0.12), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.96));
}
.ethnic-shopify-dashboard__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.ethnic-shopify-dashboard__card {
padding: 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}
.ethnic-shopify-dashboard__card strong {
font-size: 24px;
line-height: 1;
}
.ethnic-shopify-dashboard__card p {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.65;
}
.ethnic-shopify-dashboard__journey {
display: grid;
gap: 0;
margin-top: 20px;
}
.ethnic-shopify-dashboard__step {
display: grid;
grid-template-columns: 42px 1fr;
gap: 14px;
padding: 18px 0;
}
.ethnic-shopify-dashboard__step + .ethnic-shopify-dashboard__step {
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.ethnic-shopify-dashboard__step span {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: rgba(99, 168, 56, 0.1);
color: var(--ethnic-shopify-accent);
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.ethnic-shopify-dashboard__step p {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.7;
}
.ethnic-shopify-card__label {
margin: 0 0 16px;
}
.ethnic-shopify-section--contrast .ethnic-shopify-heading__title,
.ethnic-shopify-section--contrast .ethnic-shopify-heading__copy,
.ethnic-shopify-section--contrast .ethnic-shopify-heading__eyebrow {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-shopify-section--contrast .ethnic-shopify-heading__copy {
opacity: 0.78;
}
.ethnic-shopify-section--contrast .ethnic-shopify-heading__eyebrow {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
}
.ethnic-shopify-case-card {
display: flex;
flex-direction: column;
gap: 16px;
height: 100%;
padding: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 22px 60px rgba(5, 14, 28, 0.2);
}
.ethnic-shopify-case-card h3,
.ethnic-shopify-case-card p,
.ethnic-shopify-case-card strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-shopify-case-card h3 {
margin: 0;
font-size: clamp(24px, 1.9vw, 30px);
line-height: 1.16;
letter-spacing: -0.035em;
text-wrap: balance;
}
.ethnic-shopify-case-card__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ethnic-shopify-case-card__tags span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1;
}
.ethnic-shopify-case-card__summary {
display: grid;
gap: 12px;
margin-top: 0;
}
.ethnic-shopify-case-card__summary p {
margin: 0;
font-size: 15px;
line-height: 1.72;
color: rgba(255, 255, 255, 0.82) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.82);
}
.ethnic-shopify-case-card__summary strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-shopify-case-card .ethnic-shopify-button--ghost {
align-self: flex-start;
margin-top: auto;
}
.ethnic-shopify-section--cta {
padding-top: clamp(16px, 2vw, 24px);
}
.ethnic-shopify-cta {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
gap: clamp(26px, 4vw, 54px);
align-items: stretch;
padding: clamp(34px, 4vw, 52px);
text-align: left;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 12% 18%, rgba(99, 168, 56, 0.18), transparent 25%),
radial-gradient(circle at 84% 12%, rgba(231, 255, 137, 0.28), transparent 20%),
radial-gradient(circle at 78% 72%, rgba(47, 107, 255, 0.08), transparent 24%),
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 1) 50%, rgba(238, 245, 255, 0.98));
border: 1px solid rgba(117, 144, 190, 0.2);
box-shadow:
0 26px 80px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.ethnic-shopify-cta::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(99, 168, 56, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(99, 168, 56, 0.05) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 76%);
pointer-events: none;
z-index: -1;
}
.ethnic-shopify-cta__copy {
position: relative;
display: grid;
align-content: center;
}
.ethnic-shopify-cta__intro {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 14px;
margin-bottom: 4px;
}
.ethnic-shopify-cta .ethnic-shopify-kicker--light {
margin-bottom: 0;
background: rgba(255, 255, 255, 0.92);
border-color: rgba(99, 168, 56, 0.16);
color: var(--ethnic-shopify-accent-dark) !important;
-webkit-text-fill-color: var(--ethnic-shopify-accent-dark);
box-shadow: 0 14px 36px rgba(99, 168, 56, 0.12);
}
.ethnic-shopify-cta__note {
margin: 0;
max-width: 40ch;
}
.ethnic-shopify-cta h2 {
max-width: 10ch;
font-size: clamp(36px, 4.5vw, 60px);
line-height: 0.98;
letter-spacing: -0.06em;
}
.ethnic-shopify-cta__lead {
max-width: 58ch;
color: rgba(15, 23, 42, 0.72);
font-size: clamp(16px, 1.35vw, 18px);
line-height: 1.82;
}
.ethnic-shopify-cta .ethnic-shopify-actions {
gap: 16px;
margin-top: 30px;
}
.ethnic-shopify-section--cta .ethnic-shopify-button--secondary {
background: rgba(255, 255, 255, 0.74);
border-color: rgba(15, 23, 42, 0.12);
color: var(--ethnic-shopify-text) !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(14px);
}
.ethnic-shopify-section--cta .ethnic-shopify-button--secondary:hover,
.ethnic-shopify-section--cta .ethnic-shopify-button--secondary:focus-visible {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(15, 23, 42, 0.18);
}
.ethnic-shopify-cta__highlights {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 24px;
gap: 14px;
}
.ethnic-shopify-cta__highlights li {
display: flex;
align-items: flex-start;
min-height: 100%;
padding: 16px 18px 16px 40px;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 255, 0.76)),
rgba(255, 255, 255, 0.74);
border: 1px solid rgba(255, 255, 255, 0.72);
color: var(--ethnic-shopify-text);
font-size: 14px;
font-weight: 600;
line-height: 1.55;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
backdrop-filter: blur(16px);
}
.ethnic-shopify-cta__highlights li::before {
left: 18px;
top: 20px;
}
.ethnic-shopify-cta__panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 28px;
border-radius: 30px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
linear-gradient(180deg, #102240, #0f1d37 58%, #0b172e);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 30px 70px rgba(15, 23, 42, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ethnic-shopify-cta__panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at top right, rgba(99, 168, 56, 0.18), transparent 34%),
radial-gradient(circle at bottom left, rgba(231, 255, 137, 0.14), transparent 26%);
pointer-events: none;
}
.ethnic-shopify-cta__panel-header {
position: relative;
z-index: 1;
display: grid;
gap: 10px;
margin-bottom: 10px;
}
.ethnic-shopify-cta__panel-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin: 0;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.92) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.92);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-shopify-cta__panel-eyebrow::before {
background: var(--ethnic-shopify-lime);
box-shadow: 0 0 0 5px rgba(231, 255, 137, 0.12);
}
.ethnic-shopify-cta__panel-title {
margin: 0;
color: #f8fbff !important;
-webkit-text-fill-color: #f8fbff;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(22px, 2.3vw, 28px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.1;
}
.ethnic-shopify-cta__steps {
position: relative;
z-index: 1;
display: grid;
gap: 0;
padding: 0;
margin: 0;
list-style: none;
}
.ethnic-shopify-cta__step {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
padding: 18px 0;
align-items: start;
}
.ethnic-shopify-cta__step + .ethnic-shopify-cta__step {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ethnic-shopify-cta__step-number {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #ffffff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 16px 28px rgba(5, 14, 28, 0.18);
}
.ethnic-shopify-cta__step-copy strong,
.ethnic-shopify-cta__step-copy p {
color: #ffffff;
}
.ethnic-shopify-cta__step-copy p {
max-width: none;
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.74);
font-size: 14px;
line-height: 1.7;
}
.ethnic-shopify-cta__panel-note {
position: relative;
z-index: 1;
margin-top: 20px;
padding: 16px 18px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.82);
font-size: 14px;
font-weight: 600;
line-height: 1.6;
}
.ethnic-shopify-cta__panel-note strong {
color: #ffffff;
}
@media (max-width: 1200px) {
.ethnic-shopify-hero__points,
.ethnic-shopify-cta__highlights {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-shopify-card-grid--integrations,
.ethnic-shopify-card-grid--themes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-shopify-card-grid--support,
.ethnic-shopify-card-grid--case-studies {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.ethnic-shopify-hero,
.ethnic-shopify-overview,
.ethnic-shopify-split,
.ethnic-shopify-conversion,
.ethnic-shopify-cta {
grid-template-columns: 1fr;
}
.ethnic-shopify-hero {
min-height: auto;
}
.ethnic-shopify-hero__visual,
.ethnic-shopify-conversion__visual,
.ethnic-shopify-cta__panel {
max-width: 760px;
}
}
@media (max-width: 767px) {
.ethnic-shopify-page {
--ethnic-shopify-shell-padding: 20px;
}
.ethnic-shopify-section + .ethnic-shopify-section {
margin-top: 58px;
}
.ethnic-shopify-hero {
padding: 72px 0 68px;
}
.ethnic-shopify-hero__title {
max-width: 100%;
font-size: clamp(36px, 10vw, 52px);
}
.ethnic-shopify-heading__title,
.ethnic-shopify-cta h2 {
font-size: clamp(28px, 8vw, 38px);
}
.ethnic-shopify-button {
width: 100%;
}
.ethnic-shopify-hero__points,
.ethnic-shopify-card-grid--overview,
.ethnic-shopify-panel__grid,
.ethnic-shopify-card-grid--themes,
.ethnic-shopify-card-grid--integrations,
.ethnic-shopify-dashboard__cards,
.ethnic-shopify-card-grid--migration,
.ethnic-shopify-card-grid--support,
.ethnic-shopify-card-grid--case-studies,
.ethnic-shopify-visual__collection,
.ethnic-shopify-cta__highlights {
grid-template-columns: 1fr;
}
.ethnic-shopify-card,
.ethnic-shopify-panel,
.ethnic-shopify-dashboard,
.ethnic-shopify-case-card,
.ethnic-shopify-cta,
.ethnic-shopify-cta__panel {
border-radius: 24px;
}
.ethnic-shopify-visual {
min-height: auto;
}
.ethnic-shopify-visual__window {
padding: 18px;
}
.ethnic-shopify-visual__window-body {
padding: 14px;
}
.ethnic-shopify-visual__feature {
grid-template-columns: 1fr;
}
.ethnic-shopify-visual__feature-shot {
min-height: 160px;
}
.ethnic-shopify-visual__floating {
position: static;
width: 100%;
margin-top: 16px;
}
.ethnic-shopify-section--contrast {
padding: 40px 0;
border-radius: 28px;
}
.ethnic-shopify-cta__intro {
gap: 10px;
}
.ethnic-shopify-cta__panel {
padding: 24px 22px;
}
.ethnic-shopify-cta__step {
grid-template-columns: 44px 1fr;
gap: 14px;
}
.ethnic-shopify-cta__step-number,
.ethnic-shopify-dashboard__step span {
width: 44px;
height: 44px;
border-radius: 15px;
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_shopify_development_page_body_class' ) ) {
function ethnic_shopify_development_page_body_class( $classes ) {
if ( ethnic_shopify_development_page_is_target() ) {
$classes[] = 'ethnic-shopify-development-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_shopify_development_page_body_class' );
}
if ( ! function_exists( 'ethnic_shopify_development_page_print_head_assets' ) ) {
function ethnic_shopify_development_page_print_head_assets() {
if ( ! ethnic_shopify_development_page_is_target() ) {
return;
}
$data = ethnic_shopify_development_page_data();
?>
<style id="ethnic-shopify-development-page-inline-css" type="text/css">
<?php echo ethnic_shopify_development_page_styles(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</style>
<meta name="description" content="<?php echo esc_attr( $data['metaDescription'] ); ?>" />
<?php
}
add_action( 'wp_head', 'ethnic_shopify_development_page_print_head_assets', 120 );
}
if ( ! function_exists( 'ethnic_shopify_development_page_document_title' ) ) {
function ethnic_shopify_development_page_document_title( $title ) {
if ( ethnic_shopify_development_page_is_target() ) {
$data = ethnic_shopify_development_page_data();
return $data['metaTitle'];
}
return $title;
}
add_filter( 'pre_get_document_title', 'ethnic_shopify_development_page_document_title', 50 );
}
if ( ! function_exists( 'ethnic_shopify_development_page_replace_content' ) ) {
function ethnic_shopify_development_page_replace_content( $content ) {
if ( ! ethnic_shopify_development_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_shopify_development_page_render();
}
add_filter( 'the_content', 'ethnic_shopify_development_page_replace_content', 1000 );
}