diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
index 37095169b23..5abf9f0d13f 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { Fragment, useState } from '@wordpress/element';
+import {
+	Fragment,
+	useState,
+	forwardRef,
+	useImperativeHandle,
+	useRef,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Card,
@@ -27,80 +33,100 @@ import { RegisteredChannelCardBody } from './RegisteredChannelCardBody';
 import './Channels.scss';
 
 type ChannelsProps = {
-	addChannelsButtonRef: React.ForwardedRef< HTMLButtonElement >;
 	registeredChannels: Array< RegisteredChannel >;
 	recommendedChannels: Array< RecommendedChannel >;
 	onInstalledAndActivated?: () => void;
 };
 
-export const Channels: React.FC< ChannelsProps > = ( {
-	addChannelsButtonRef,
-	registeredChannels,
-	recommendedChannels,
-	onInstalledAndActivated,
-} ) => {
-	const hasRegisteredChannels = registeredChannels.length >= 1;
-
+export type ChannelsRef = {
 	/**
-	 * State to collapse / expand the recommended channels.
-	 * Initial state is expanded if there are no registered channels in first page load.
+	 * Scroll into the "Add channels" section in the card.
+	 * The section will be expanded, and the "Add channels" button will be in focus.
 	 */
-	const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
+	scrollIntoAddChannels: () => void;
+};
 
-	return (
-		<Card className="woocommerce-marketing-channels-card">
-			<CardHeader>
-				<CardHeaderTitle>
-					{ __( 'Channels', 'woocommerce' ) }
-				</CardHeaderTitle>
-				{ ! hasRegisteredChannels && (
-					<CardHeaderDescription>
-						{ __(
-							'Start by adding a channel to your store',
-							'woocommerce'
-						) }
-					</CardHeaderDescription>
-				) }
-			</CardHeader>
+export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
+	(
+		{ registeredChannels, recommendedChannels, onInstalledAndActivated },
+		ref
+	) => {
+		const hasRegisteredChannels = registeredChannels.length >= 1;
 
-			{ /* Registered channels section. */ }
-			{ registeredChannels.map( ( el, idx ) => {
-				return (
+		/**
+		 * State to collapse / expand the recommended channels.
+		 * Initial state is expanded if there are no registered channels in first page load.
+		 */
+		const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
+		const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
+
+		useImperativeHandle(
+			ref,
+			() => ( {
+				scrollIntoAddChannels: () => {
+					setExpanded( true );
+					addChannelsButtonRef.current?.focus();
+					addChannelsButtonRef.current?.scrollIntoView();
+				},
+			} ),
+			[]
+		);
+
+		return (
+			<Card className="woocommerce-marketing-channels-card">
+				<CardHeader>
+					<CardHeaderTitle>
+						{ __( 'Channels', 'woocommerce' ) }
+					</CardHeaderTitle>
+					{ ! hasRegisteredChannels && (
+						<CardHeaderDescription>
+							{ __(
+								'Start by adding a channel to your store',
+								'woocommerce'
+							) }
+						</CardHeaderDescription>
+					) }
+				</CardHeader>
+
+				{ /* Registered channels section. */ }
+				{ registeredChannels.map( ( el, idx ) => (
 					<Fragment key={ el.slug }>
 						<RegisteredChannelCardBody registeredChannel={ el } />
 						{ idx !== registeredChannels.length - 1 && (
 							<CardDivider />
 						) }
 					</Fragment>
-				);
-			} ) }
+				) ) }
 
-			{ /* Recommended channels section. */ }
-			{ recommendedChannels.length >= 1 && (
-				<div>
-					{ !! hasRegisteredChannels && (
-						<>
-							<CardDivider />
-							<CardBody>
-								<Button
-									ref={ addChannelsButtonRef }
-									variant="link"
-									onClick={ () => setExpanded( ! expanded ) }
-								>
-									{ __( 'Add channels', 'woocommerce' ) }
-									<Icon
-										icon={
-											expanded ? chevronUp : chevronDown
+				{ /* Recommended channels section. */ }
+				{ recommendedChannels.length >= 1 && (
+					<div>
+						{ !! hasRegisteredChannels && (
+							<>
+								<CardDivider />
+								<CardBody>
+									<Button
+										ref={ addChannelsButtonRef }
+										variant="link"
+										onClick={ () =>
+											setExpanded( ! expanded )
 										}
-										size={ 24 }
-									/>
-								</Button>
-							</CardBody>
-						</>
-					) }
-					{ !! expanded &&
-						recommendedChannels.map( ( el, idx ) => {
-							return (
+									>
+										{ __( 'Add channels', 'woocommerce' ) }
+										<Icon
+											icon={
+												expanded
+													? chevronUp
+													: chevronDown
+											}
+											size={ 24 }
+										/>
+									</Button>
+								</CardBody>
+							</>
+						) }
+						{ !! expanded &&
+							recommendedChannels.map( ( el, idx ) => (
 								<Fragment key={ el.plugin }>
 									<SmartPluginCardBody
 										plugin={ el }
@@ -113,10 +139,10 @@ export const Channels: React.FC< ChannelsProps > = ( {
 										<CardDivider />
 									) }
 								</Fragment>
-							);
-						} ) }
-				</div>
-			) }
-		</Card>
-	);
-};
+							) ) }
+					</div>
+				) }
+			</Card>
+		);
+	}
+);
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts
index da0d9c56072..f0e4fcc3762 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts
@@ -1 +1,2 @@
 export { Channels } from './Channels';
+export type { ChannelsRef } from './Channels';
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
index efdd1cbd46c..3919ab5e482 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
@@ -20,7 +20,7 @@ import {
 import { getAdminSetting } from '~/utils/admin-settings';
 import { IntroductionBanner } from './IntroductionBanner';
 import { Campaigns } from './Campaigns';
-import { Channels } from './Channels';
+import { Channels, ChannelsRef } from './Channels';
 import { InstalledExtensions } from './InstalledExtensions';
 import { DiscoverTools } from './DiscoverTools';
 import { LearnMarketing } from './LearnMarketing';
@@ -46,7 +46,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 	const { loading: loadingRecommended, data: dataRecommended } =
 		useRecommendedChannels();
 	const { currentUserCan } = useUser();
-	const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
+	const channelsRef = useRef< ChannelsRef >( null );
 
 	if (
 		loadingIntroductionBanner ||
@@ -77,9 +77,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 				<IntroductionBanner
 					onDismissClick={ dismissIntroductionBanner }
 					onAddChannelsClick={ () => {
-						addChannelsButtonRef.current?.focus();
-						addChannelsButtonRef.current?.click();
-						addChannelsButtonRef.current?.scrollIntoView();
+						channelsRef.current?.scrollIntoAddChannels();
 					} }
 				/>
 			) }
@@ -87,7 +85,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 			{ !! ( dataRegistered && dataRecommended ) &&
 				!! ( dataRegistered.length || dataRecommended.length ) && (
 					<Channels
-						addChannelsButtonRef={ addChannelsButtonRef }
+						ref={ channelsRef }
 						registeredChannels={ dataRegistered }
 						recommendedChannels={ dataRecommended }
 						onInstalledAndActivated={ refetch }