Home / Blog / How to create a Product details screen

How to create a Product details screen

13 Nov 2024 · 6 min read

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Product Details Screen is a vital element in user interface design, offering users a comprehensive view of a specific product within an application. It plays a pivotal role in providing users with essential information, such as product descriptions, specifications, pricing, and images, to aid in their purchasing decisions. By presenting a visually appealing and informative layout, the Product Details Screen enhances user engagement and facilitates a seamless shopping experience.

This comprehensive guide equips designers and developers with the necessary tools to seamlessly integrate a user-centric Product Details Screen into their applications. Leveraging design components from the Ionic Kit, built upon the solid foundation of the extensive Ionic framework library, ensures effortless integration and consistency in design, ultimately enhancing the overall usability and satisfaction of the application.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start product blank --type=react

3. Get inside the project directory

cd product

4. Create a Product page

Create page Product.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const Product: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Product;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Place the Back button component

Inside the IonToolbar component, add an IonButtons component with the slot set to start, positioning the button at the beginning of the toolbar. Also, add className='ion-padding-start' to provide padding at the start.

Within the IonButtons component, include an IonBackButton component with the properties defaultHref='#' and text=''. This creates a back button that navigates back in the app's history when clicked. To customize the default icon, set the icon property to {arrowBack}. Ensure that {arrowBack} has been imported correctly from Ionic icons.

import { arrowBack } from "ionicons/icons";
...
<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton
                defaultHref="#"
                text=""
                icon={arrowBack}
            ></IonBackButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

7. Put the title on top of the page

After the IonButtons component, place the IonTitle with the text 'Logotype' to add a title for this page.

<IonHeader>
  <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton
                defaultHref="#"
                text=""
                icon={arrowBack}
            ></IonBackButton>
        </IonButtons>
    <IonTitle>Logotype</IonTitle>
  </IonToolbar>
</IonHeader>

8. Place the Like button

Inside the IonToolbar component, add an IonButtons component with the slot set to end, positioning the button at the ending of the toolbar. Also, add className='ion-padding-end' to provide padding at the end.

Within the IonButtons component, incorporate the IonButton with IonIcon component inside with slot property to icon-only and icon to {heartOutline}.

import { heartOutline, arrowBack } from "ionicons/icons";
...
<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton
                defaultHref="#"
                text=""
                icon={arrowBack}
            ></IonBackButton>
        </IonButtons>
        <IonTitle>Profile info</IonTitle>
        <IonButtons slot="end" className="ion-padding-end">
            <IonButton>
                <IonIcon slot="icon-only" icon={heartOutline}></IonIcon>
            </IonButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

9. Place product main information block

Inside the IonList component, add an IonItem component with properties lines set to none and className='ion-padding-top'.

Inside the IonItem component, add the IonThumbnail component with the slot attribute set to start. Use the <img> tag within IonThumbnail to display the product image, specifying the alt attribute for the image description and src for the image path.

Next, use the IonLabel component with className='ion-text-nowrap' to add additional information. Use the <h2> and <p> tags to display the texts 'Wine Familia Bastida, "Finca el Lince" Red Blend, Jumilla DO, 2018' and 'Article: 180286' respectively.

<IonContent>
    <IonItem className="ion-padding-top" lines="none">
        <IonThumbnail slot="start">
            <img src="wine.jpg" alt="image" />
        </IonThumbnail>
        <IonLabel className="ion-text-nowrap">
            <h2>
                Wine Familia Bastida, "Finca el Lince" Red Blend, Jumilla DO, 2018
            </h2>
            <p>Article: 180286</p>
        </IonLabel>
    </IonItem>
</IonContent>

10. Place product price

Add an IonItem component with the properties lines='none'. Inside this IonItem, include an IonText component containing an <p> tag with the text '$50'.

<IonContent>
    ...
    <IonItem lines="full">
        <IonText>
            <p>$50</p>
        </IonText>
    </IonItem>
</IonContent>

11. Add the list of detailed information

Add an IonList component with the properties lines='none' and className='ion-margin-top'.

<IonContent>
    ...
    <IonList lines="none" className="ion-margin-top"></IonList>
</IonContent>

12. Add the list title

Inside the IonList component, add an IonListHeader component containing an <h4> tag with the text 'Details'.

<IonContent>
    ...
    <IonList lines="none" className="ion-margin-top">
        <IonListHeader>
            <h4>Details</h4>
        </IonListHeader>
</IonContent>

13. Add first list item

Add IonItem component with the following components inside:

  1. IonLabel with text 'Country, region'.
  2. IonNote with text 'Spain, Murcia'.
<IonContent>
    ...
    <IonList lines="none" className="ion-margin-top">
    ...
            <IonItem>
                <IonLabel>Country, region</IonLabel>
                <IonNote>Spain, Murcia</IonNote>
            </IonItem>
    </IonList>
</IonContent>

14. Add other items

Repeat the previous step to add additional items.

The only difference is in one place, where the IonNote component should have two lines of text. A <br /> tag is added to create two lines, and the ion-text-right class is added to align the text to the right.

<IonList lines='none' className='ion-margin-top'>
...
    <IonItem>
        <IonLabel>
            Color
        </IonLabel>
        <IonNote>
            White
        </IonNote>
    </IonItem>
    <IonItem>
        <IonLabel>
            Sugar
        </IonLabel>
        <IonNote>
            Dry
        </IonNote>
    </IonItem>
    <IonItem>
        <IonLabel>
            Grape
        </IonLabel>
        <IonNote className='ion-text-right'>
            Monastrell: 100%
            <br />
            Syrah 15%
        </IonNote>
    </IonItem>
    <IonItem>
        <IonLabel>
            Wine strength
        </IonLabel>
        <IonNote>
            14%
        </IonNote>
    </IonItem>
    <IonItem>
        <IonLabel>
            Volume
        </IonLabel>
        <IonNote>
            750ml
        </IonNote>
    </IonItem>
    <IonItem>
        <IonLabel>
            Manufacturer
        </IonLabel>
        <IonNote>
            Bodegas, Bastida
        </IonNote>
    </IonItem>
    <IonItem>
        <IonLabel>
            Innings
        </IonLabel>
        <IonNote>
            16-18°C
        </IonNote>
    </IonItem>
</IonList>

15. Add buttons

After the IonList, add two IonButton components with the following properties:

  1. The first button should have expand set to block, className='ion-margin ion-padding-top', and the text 'Add to cart' inside.
  2. The second button should have expand set to block, fill set to outline, className='ion-margin', and the text 'Buy now' inside.
<IonContent>
    ...
    <IonList lines="none" className="ion-margin-top">
    ...
    </IonList>
    <IonButton expand="block" className="ion-margin ion-padding-top">
        Add to cart
    </IonButton>
    <IonButton expand="block" fill="outline" className="ion-margin">
        Buy now
    </IonButton>
</IonContent>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday