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-

• Image orientation
• Minimum and maximum image height if you select dynamic image height.
• Image height if you select static image height.

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-

1. Product Title- When you click on it, you can change the font size, font weight, and letter spacing.
2. Product Price- Click on it to change the product price display format. You can change the font size, font weight, and letter spacing.
3. Product Price Display- This allows you to attract customers with custom discounted price displays. The four tags displayed here are:

• {PRICE}- The selling price of the product
• {COMPARE_PRICE}- The actual cost price of the product.
• Each box has a copy icon to copy the tags and paste them in the format you want in the text box below.
• For example: {COMPARE_PRICE} Now At {PRICE}
• If you want to display the strike-through price- Enable the “Show price with strikethrough” toggle switch. Select one variant from among the 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”.

How to add more fields to the Product Detail View screen on Swipecart?

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.

• Banner:
• Drag and drop the banner widget to the desired position on the Product Detail View screen layout.
• Click here to add an image and link to the banner.
• You can even customize the banner style to suit the app theme.

• Quantity:
• Drag and drop this quantity widget to the desired position.
• Hover over it and click on “Edit View” to pick one from among the display style variants.
• Again, hover and click on “Edit Style” to change the title, and its styling parameters such as font size, letter spacing, font weight, and font style.
• 
  
• 
• 
  
• Reviews:
• Drag and drop the review widget to the desired position on the Product Detail View screen layout.
• Hover over it and click on “Edit View” to pick one from among the display style variants.

💡 Note:

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

• Additional details:
• This is to add additional details regarding shipping information, refund & cancellation, return & exchanges, and contact us.
• Drag and drop the widget to the desired position on the Product Detail View screen layout.
• Hover over it and click on “Edit View” to select a display style variation.
• Hover over it again and click on “Add/Edit Content” to add URL links for these.

• Extra Products Display
• Drag and drop the product carousel slider to the desired position on the Product Detail View screen layout.
• This is usually to upsell or cross-sell products.
• You can display the products in a grid or slider format.
• Hover over the widget and click on “Edit View”.
• Select either Product Grid or Product Slider style and select a variant.
• Hover again and click on “Edit Style” to edit the styling parameters. Click here for more information on styling a product grid variant. Click here for information on styling a product slider widget on Swipecart.

• BNPL Block:
• This is available when you integrate Buy Now Pay Later payment solutions into Swipecart. Drag and drop it into position on the screen.
• Change the display style through the “Edit Style” option.
• Select the payment method from the “Choose Payment Method” drop-down box. Save and exit.

• Custom Form:
• This helps you to take additional details from the customers.
• Drag and drop this block into position on the screen layout.

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!