PageTitleBar Component

The PageTitleBar component is a reusable React component that conditionally renders a title bar at the top of your Shopify app pages. It utilizes the TitleBar component from the @shopify/app-bridge-react library and respects the configuration set in your app's config file.

Import

import { PageTitleBar } from './path/to/PageTitleBar';

Usage

<PageTitleBar title="Your Page Title" />

Props

Configuration

The visibility of the PageTitleBar is controlled by the showTitleBar setting in your app's configuration file. To enable or disable the title bar globally:

1. Open your app's configuration file (typically config/app.js or similar).
2. Set the showTitleBar property:

export default {
  // ... other config options
  showTitleBar: true, // Set to false to hide the title bar globally
};

Example

Here's an example of how to use the PageTitleBar component in a page:

import React from 'react';
import { PageTitleBar } from './components/PageTitleBar';
 
const ProductPage = () => {
  return (
    <>
      <PageTitleBar title="Product Details" />
      {/* Rest of your page content */}
    </>
  );
};
 
export default ProductPage;

Notes

• The PageTitleBar will only render if showTitleBar is set to true in your app's configuration.
• This component helps maintain consistency across your app's pages and respects the global configuration for title bar visibility.
• The TitleBar component from @shopify/app-bridge-react is used internally, providing a native look and feel consistent with the Shopify admin interface.