Store Product Page

Pixpa allows you to change the layout of the product listing page and product detailed page. Do check out the below links to see the difference between them:

• Store listing page. 
• Store product page.

Apart from the layout, you can manage the product title/metadata font, related products, and breadcrumb navigation.

In this article:

1. Layout
2. Text
3. Info Sections 
4. Related Products
5. Breadcrumb Navigation

Customize the Product Detail page design:

• Enter store design (1) in the Search Bar.
• From the related results, click on the Store Design option (2) under Studio Links. 

• Now, from the Product Pages (3) tab, you would see the design options for the product page. 

This would take you to the layout page, from where you can choose the layout for your product page.

Layout

1. Layout – Choose the layout for the product detail page.
2. Width – Select the width for the product detail page.
   • Full width‘ will display the product page while covering the entire width without leaving any margin.
   • ‘Site width‘ can be specified in the Design section. You can specify a fixed width there.
     It will display the product page by adhering to the fixed-width specified.
3. Product Images Display – Specify how the product images should display on the product page. You can show them with thumbnails or as a vertical stack.

4. Lightbox for Product Images – Turn it on to allow lightbox mode for product images.
5. Display Product Price as – Select the display price for the products on the product detail page of your store. That is if product options exist for your products, and each variant has a different price, then you can choose the product price to be displayed on the product listing page from here. 
6. Enable Social Sharing – Check in this option to display social icons for sharing on the product detail page.

Text

Click on the Change Text Style button to customize the fonts used on your website.

7. Change Text Style – Click on this button to customize the fonts used on your website.
8. Product Title Font – Choose the font for the product title.
9. Product Price Font – Choose the font for the product price.
10. Product Metadata Font – Choose the font for the text other than the product title & product price on the product detail page.

Info Sections

1. Manage the info section title font. Also Check: Website Text style.
2. Choose the style of Info sections in Product pages. You can either display the info sections in Verticle Accordion or Horizontal (Tabbed) Accordion.
3. Choose to expand the first info section added to the product by default. This will work only with Vertical Accordion option.

Related Products

This is the section that typically displays items that are complementary or similar to the product a customer is currently viewing, encouraging additional purchases and enhancing the shopping experience.

1. Show Related Products – Check this option to display related products on the product detail page.
2. Sort By – Choose how to sort the related products on the product pages. You can choose from four different options:
   • Latest Products – As you add products to the Store, they will be sorted, with most recent product appearing first in the related products section.
   • Most Selling – The related products will be arranged based on the sales performance, with most selling product appearing first.
   • Highest Inventory – The products will be organized according to the remaining inventory, with the product having most inventory displayed first.
   • Random – The related products will be sorted randomly.

3. Number of Products – Choose how many products should appear in the related products section.
4. Label – Specify the label of the related products section.
5. Display – Choose the style in which products will be displayed inside the related products section. You can select from options like Square, Horizontal, Vertical, and Dynamic.

Breadcrumb Navigation

1. Visibility – Specify the visibility/position of the breadcrumb navigation in the product detail page.
2. Top Navigation – Choose the top breadcrumb navigation for the product detail page. You can choose from Breadcrumbs – Left / Right, Breadcrumbs with Category Name, Breadcrumbs with Previous / Next, Previous / Next – Center or Sides, Content Titles, and Back to Store options. 
3. Top Font Style – Choose the font for the top breadcrumb navigation.
4. Bottom Navigation – Choose the bottom breadcrumb navigation for the product detail page. You can choose from Previous/Next – Center or Sides, and Content Titles options. 
5. Bottom Font Style – Choose the font for the bottom breadcrumb navigation.

Also Check: Folder navigation options.

Have a look at the product page breadcrumbs wherein the Breadcrumbs – Left option is selected as the Top Navigation: 

Here’s an example of the breadcrumb navigation in action. 

Finally, hit the Save button to save all your changes.
That’s it. Your chosen style will be applied to your store’s product pages.

Related Articles:

• Store Listing Page
• Using Store Sidebar