Best practices for building a PDP details section above the fold
Introduction
Nyla’s no-code tooling and deep integration with Shopify makes building and updating product detail pages easy.
This document walks you through:
- How to build PDPs in Nyla according to best practices
- The blocks and templates available for you
Building a PDP Details Section
- Add a page source and set the URL and SEO etc to pull from Shopify. This enables you to quickly scale your PDP template across different products quickly and easily.
- Start from a Nyla Section Template (choose from these starting points)
While it’s possible to start from scratch with an empty section, we strongly suggest that you use a Nyla Template as a starting point. Our templates come with the core functionality for PDPs built in, so you can use them as a place to jump off from in order to accelerate building your PDP.
Nyla has the following templates that cover the most common best practice PDP layouts:-
- PDP 1: This template has a classic slider on left and details on right pdp setup
- PDP 2: A grid of images with concise product details on the right side
- PDP 3 - A vertical list of images with sticky product details
-
- Use pre-made Blocks to replace parts of your design.
Nyla’s pre-configured PDP blocks come with best practices and UX out of the box so that you can simply drop them into the template you have used as a starting point in order to adapt your design to your needs.- PDP blocks enable you to drop in or replace UI commonly used on product detail page layouts. See the list of blocks here.
- App & feature blocks for PDPs enable you to drop on features or app UI directly out of the box depending on your needs. See here for a list of product app blocks available.
- Map your product data to Nyla
Once you have added the layout and features that you want, you should map the data that you use on your products to the Nyla fields.
Each site has different data needs and existing setups. Using metafields and properties within source product, you can make sure that your data stored on your product pages is surfaced on your product pages. - Update your styling
Now that you have the layout and the features added to your page in the way you want them you can update the design settings of the section in order to apply the design customizations that you want for your site.
Common things to update on the template at this stage include:
- Spacing
- Alignment
- Background colours
- Setting Image Ratios
- Adjusting column widths
- Slider settings
- Animations and transitions
- Before launching your PDP, make sure to look at adding:
App & feature blocks:
- Back in stock. To add back in stock notifications to your site, you should use either Klaviyo back in stock, or the Back in stock notifications app. Both have blocks that you can drop in to your PDP with some minor configuration:
- Pre Order: Add pre-order messaging to your PDP.
- Low stock messaging: Automatically display the number of units remaining for your products once they pass a certain stock threshold.
- Ribbons
- Payment apps
Blocks: A detailed breakdown
Adding Product Options and Shoppable Elements:
Product options: This block is the perfect starting point for your product options. It includes layouts for Size, Color and Shade, as well as a custom layout that you can use to target any option you have that is unique to your products. This also includes a layout that hides options for products that don’t have any.
Showing the price and stars
- Product price: Use this block to show the product price on the product page or on a product listing page. This block contains three key price elements:
- The compare at price for products that have a discount (shown only if on sale)
- The product price
- A hidden % savings that auto-calculates the percentage saved (shown only if on sale)
- Rating stars: Use this block to show 5 stars and the number of reviews. It can be customised to automatically show/hide stars based on a metafield or app
- Product price and ratings: Both of these blocks combined into one
Product details
- Product details - Accordion: 3 accordion items with the default of Description, Material and Shipping. Easily add content via properties like product.description or add manual content (or overrides) to add unique content for every product
- Product details - Tabs: 3 tabs with the default of Description, Material and Shipping. Easily add content via properties like product.description or add manual content (or overrides) to add unique content for every product
Add to Cart:
- Add to cart: A block setup with all of the default states for Add to cart ready to go.
- Add to cart with price: An add to cart button that includes the product price
- Add to cart with quantity: Add to cart with a quantity selector that allows the user to add multiple items to the cart at one time.
Feature icons
- Feature icons list: A list of 3 features with icons - great for trust signals or product features / callouts.
- Feature icons grid: A grid of 4 features with icons - great for trust signals or product features / callouts.
Product images
There are 6 product image layout blocks that give you an easy way to change the look and feel of your images in Nyla. All of these blocks will reference the product.variant.media - so they will use Nyla image filtering to show only the selected variant images (or images that are not tagged and therefore visible for all selections)
- Product image slider with arrows: A slider of product images with dots and arrows to change the images
- Product image slider with left thumbnails: An images slider with thumbnails on the left
- Product images slider with bottom thumbnails: An images slider with thumbnails on the right
- Product image grid: A grid of product images with images in 2 columns. You can add unique layouts to customize this image structure.
- Product image list with sticky thumbnails: A list of images with clickable thumbnails on the left side for easy navigation
- Product image list with mobile slider: A list of images for a more editorial look and feel on your PDP