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:
Apart from the layout, you can manage the grid spacing of the products, default product listing order, product listing, and sorting options, product images, product Title/Metadata Font, and many other options.
Manage the Product Listing 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 Store Pages (3) tab, you would see the design options for the product listing page.
This would take you to the layout page, from where you can choose the layout for your product listing page.
The available options here can be categorized as:
- Configure Design for Store Pages
- Product Listing and Sorting.
- Product Images.
- Text
- Product Categories
- Status labels
- Mobile Options
Configure Design for Store Pages
- Layout – Choose the layout for the product listing page (1) and hit the save (2) button.
- Width – Choose the width of the product listing page.
- Grid Spacing – Manage the spacing between the products on the product listing page.
Product Listing and Sorting
- Products Per Page – Choose how many products appear on a page. You can choose from 12, 24, 36, and 48.
- Show Product Sorting – Choose whether the sorting option appears on the product listing page.
- Product Sorting Position – Specify where the sort option appears on the product listing page.
Product Images
- Image Aspect ratio – Choose the image aspect ratio for the product images. It would not be applicable for the Square Block layout.
- Show Flip Over Image – Turn it on if you want the next images of the product to appear when someone hovers over the first image.
See how the flip-over image works:
- Rounded corners – Specify a value to make the product images rounded at corners.
Text
- Change Text Style – Click on this button to customize the fonts used on your website.
- Product Title Font – Choose the font (H1, H2, H3, H4, P, P (large), & P (small)) for the product title.
- Product Metadata Font – Choose the font for the text other than the product title on the product listing page.
- Text Alignment – Choose the alignment (left, center, & right) for the text.
Product Categories
- Show Categories – Choose whether the categories appear on the product listing page.
- Display Style – Choose the display style for product categories. You can choose from Tag cloud style 1 & 2, and dropdown.
- Position – Choose where the product categories appear.
- Font Style – Choose the font for the product categories.
- Horizontal Spacing – Specify the space between the product categories.
Status Labels
- See more Store labels – Click on this button to customize your store labels.
- Show Sale Label – Choose whether the sale label appears or not, and the text for the same.
The sale label appears when you have specified the compare at price for a product. - Show Low on Stock Label – Choose whether the low on stock label appears over your products or not.
This label appears when the inventory level of a product reaches the threshold value specified for low on stock alert. - Show Back/Pre-order Label – Choose whether the Back/Pre-order label appears over your products or not.
This label appears over the products on which you have turned on the back-ordering. - Add to Cart Label – Customize the Add to Cart label that appears on your store.
- Coming Soon Label – Customize the Coming Soon label that appears on your products.
- Label Base Color – Select the base color for the label.
- Label Text Color – Select the text color for the label text.
Mobile Options
- Grid Columns – Choose the number of grid columns in the product listing page for the mobile view.
- Grid Gutter – Specify the grid gutter/spacing for the mobile view.
Hit the Save button to save your changes.
That’s it. Your chosen style will be applied to your store’s product listing pages.
Note: Product listing page layout will also applied on store category pages.