Step 1: To do this, click on “Designs” on the left menu of your Swipecart dashboard. Hover the mouse pointer over any layout you want to edit and click on the edit icon. You’ll be taken to the layout dashboard.

Step 2: “Theme Settings” is the default tab. Click on “Product Detail View” on the top navigation menu to go to the product detail screen.

Step 3: In this tab, the center of your screen contains the product detail view screen and the right section has all the elements to customize the screen.

Step 4: Click on the product list drop-down box located at the top of the center section. This product list is fetched from your e-commerce website.

Click on any product you want to be displayed. Its image is displayed on the center screen.

Step 5: Hover the mouse pointer over the image and click on the “Edit View” option. A “Select View” popup opens with variations in the product display style.

Select a variation of your choice. Click on “Save” before you exit.

Step 6: To edit the image style, hover again over the image and click on “Edit Style”. In the popup that opens, you can edit the icon and image style.

In icons, you can change the icon and background color. Click on the “Images” drop-down box to edit the image style. Here, you can edit these parameters-

You can preview the changes you make in the style to your right in the popup screen itself. Click on “Save” when you are done editing the style.

Step 7: Below the image are the product title and price.

Let’s edit some of its features now. Hover over the product title or price and click on the “Edit Style” option.

Here you have four options-

💡 Note: If you enable the strike-through display, your custom tag display format becomes disabled.

4. Product Reviews- If you enable this, the product ratings and the number of

reviews will be displayed next to the product price.

Step 8: Below the product title and price is the section where you display product variations. It is fetched from your existing e-commerce store.

If you want to add new variants, hover over “Size” or “Colors” and click on “+Add Variants”. In the popup that opens, add the product variations.

The process is similar to what you do in App Settings->Product Variants. Please refer to this link for more information about adding product variants.

Step 9: To change the display style of the variant section, hover on it and click on “Edit View”.

A “Select View” popup opens. Here, select one among the style variants for color view, image view, and text view (can convert the text view into product sizes).

Save when you exit the popup.

Step 10: Next is the product description format. Hover over it and click on “Edit Style”. In the popup, enabling the “Expanded” toggle switch displays the entire product description.

Else, only the “Product Description” heading is displayed with a drop-down box for further viewing

Step 11: The “Add To Cart” CTA is at the end of the Product Detail View page.

To customize its looks, hover over it and click on “Edit View”.

In the popup, you have CTA variations. Select one and click on “Save”.

Swipecart gives you the option to add more sections to your Product Detail View page. The additional widgets are in the right section of your screen.

💡 Note:

Integration is required to fetch the product reviews from your e-commerce store.

That’s it.

You are done designing the Product Detail View page on your app.

You can preview the updates you make directly on your mobile app in real time.

Click here to learn how to preview app updates through the Swipecart mobile app on your mobile device.

The no-code app builder Swipecart is the best solution to create a feature-rich app for your e-commerce store. Happy app-building on Swipecart!