Build custom product detail page

This tutorial requires a Uniform sandbox with the JavaDrip project. If you need access to one, contact us.

In addition, a video tutorial is available on our Connect portal.

During the first exercise, you went through the process of designing and launching a new Landing Page for the JavaDrip Specialty product launch. Next you will take that a step further.

Like a lot of large sites, JavaDrip is setup to automatically display products, articles, etc., that are managed in the CMS, without a business user designing specific layouts for each one.

But what do you do when you need a very specific layout as a one-off for a particular product, article, or other content? This new coffee maker is an example where the marketing team wants a unique and more compelling layout for the Specialty, rather than the default.

About the Product Detail Page layout#

By default, every product detail page has the same layout, which consists of the following components:

Components that appear on every page, such as the header and footer, are excluded.

This component displays product information.

default-component-1
The default Product Info component.

This component displays a set of images related to the product.

default-component-2
The default Image Gallery component.

This component shows recommended products that JavaDrip wants to sell. All product detail pages (PDPs) show the same recommended products. In this tutorial you will select recommended products for the JavaDrip Speciality Coffee Maker page.

default-component-3
The default Recommendations component.

In this tutorial you will create a specialized PDP for the JavaDrip Speciality product launch. It will be different from the default PDP in the following ways:

  • A Hero component will appear before the Product Info component.
  • A Product Feature Cards component will appear after the Product Info component. It will display features of the coffee machine.
  • The title on the Image Gallery component will be customized for this product.
  • A Reviews component will display customer reviews for this product.
  • A Recommendations component will show products that are recommended for people interested in this product.

  1. In Uniform, open the Project Map.

    project-map-initial
    The Project Map for the Uniform project.

  2. In the Project Map node JavaDrip Speciality, click and select Edit.

    project-map-node-menu
    The menu for a Project Map node.
    project-map-node-edit-drawer
    The Project Map Node Edit Drawer is opened.

  3. Under Node type, click Composition.

    project-map-node-type-composition
    The Project Map node type is changed to Composition.

  4. Under the Composition section, select Product Details Page.

    selecting-new-composition-type
    You might need to scroll down in order to find the Product Details Page option.
    new-composition-type-selected
    The Product Details Page option is selected.

  5. Click Save.

    project-map-node-with-composition-assigned
    The Project Map node has a composition assigned.

    About this step

    This is how you replace a placeholder in the Project Map with a new composition.

Set the page title#

  1. On the Project Map Node, click JavaDrip Specialty.

    composition-in-canvas
    The composition open in Uniform.

    About this step

    This is how you open the composition assigned to a Project Map node.

  2. On the composition, set the parameter Page Title to the following value:

    JavaDrip Specialty
    composition-title-set
    The title is set on the composition.

    About this step

    You do not see this value anywhere on the page, but it is used as the title in the browser tab when a visitor views the page.

  1. Select the Product Info component.

    product-info-component-selected
    The Product Info component is selected.

  2. Set Pattern Data to the record that matches the following search text:

    JavaDrip Specialty Coffee Maker
    product-info-component-pattern-data-set
    Pattern data is set on the component.

  1. Before the Product Info component, add a Hero (uc) component.

    hero-component-added
    Hero component is added to the composition.

  2. Set Pattern Data to the entry that matches the following search text:

    Announcing the JavaDrip Specialty Coffee Maker!!!
    hero-component-pattern-data-set
    Pattern data is set on the component.

  3. Set the parameter Eyebrow text to the following value:

    New Product
    hero-component-eyebrow-text-set
    Eyebrow text is set on the component.

  4. Set the parameter Video to the following Cloudinary asset:

    FolderAsset
    coffee-marketingSpecialty_Animation_co3vth
    hero-component-video-set
    Video is set on the component.

  1. After the Product Info component, add a Product Feature Cards (uc) component.

    About this step

    At this point you will not see the component on the page. This is an example of a component that is basically invisible if no content is set on it.

  2. Set Pattern Data to the following entries:

    TitleContent type
    Fold-away frotherfeature
    6 Brew Sizesfeature
    Thermal Flavor Extractorfeature
    cards-component-pattern-data-set
    Pattern data is set on the component.

    About this step

    The formatting is a little off because, by default, this component expects you to select 4 features. Next you will change the component so it properly handles 3 features.

  3. Set the parameter Columns Count to 3.

    cards-component-columns-count-set
    Column count is set on the component.

  1. After the Product Feature Cards component, add a Image Gallery (alg) component.

    image-gallery-component-added
    Image Gallery component is added to the composition.

  2. Set Pattern Data to the record that matches the following search:

    JavaDrip Specialty Coffee Maker
    image-gallery-component-pattern-data-set
    Image Gallery component is added to the composition.

  3. Set the parameter Title to the following value:

    Specialty Gallery
    image-gallery-component-title-set
    Title is set on the component.

  1. After the Image Gallery component, add a Reviews (uc) component.

    About this step

    This is another component, like the Product Feature Cards component, that is basically invisible if no content is set on it.

  2. Set Pattern Data to the following entries:

    TitleContent type
    I recommendtestimonial
    Great coffee makertestimonial
    reviews-component-pattern-data-set
    Pattern data is set on the component.

  3. Under the section Presentation Settings, change the parameter Background Type to white.

    reviews-component-background-type-set
    Background type is set on the component.

    About this step

    Changing the background to white has created a problem because the review text is also white. You will fix this by changing the color of the review text.

  4. Click on the stars for the first review.

    review-component-selected
    Review component is selected.

    About this step

    The Reviews component has Review components inside of it to display each individual review that is selected. The Review component has its own parameters, which you will change next.

  5. Under the section Presentation Settings, change the parameter Text Color Variant to Dark.

    review-component-text-color-variant-set
    Text color variant is set on the component.

    About this step

    The parameter values you set on the Review component affect every review that is selected, so you do not need to change the text color for each review separately.

  1. Click the component with the title Recommended Products.

    recommended-products-component-selected
    Recommendations component is selected.

  2. Change the parameter Title to the following value:

    Recommended Accessories
    recommended-products-component-title-set
    Title is set on the component.

  3. For Pattern Data, remove the selected records.

    recommended-products-component-remove-selected-records
    How to remove the selected records.

    About this step

    You need to remove the selected records, otherwise, when you select the records you want to display, those new records will be in addition to the records already selected.

  4. Set Pattern Data to the following records:

    Name
    Frother Whisk
    Coffee Removable Filter Holder
    Coffee Permanent Filter
    Water Reservoir with Flip-Top Lid
    Glass Carafe & Brew-Through Lid
    recommended-products-component-pattern-data-set
    Pattern data is set on the component.

  5. Publish the composition.

  1. Visit your PDP page at https://[!!!YOUR HOST!!!]/products/javadrip-specialty-coffee-maker.

    About this step

    You must replace [!!! YOUR HOST !!!] with the host name of the training site you are using. This is a value that Uniform provided you when you were given access to the Uniform project. If you need help, contact us.

  2. The Hero component displays the content from the CMS entry you selected.

    published-hero

  3. The Product Info component displays information about the JavaDrip Specialty Coffee Maker. You did not change this component.

    published-product-info

  4. The Product Feature Cards component displays content from the 3 CMS entries you selected.

    published-product-feature-cards

  5. The Image Gallery component displays images that are related to the product you selected.

    published-image-gallery

  6. The Reviews component displays content from the 2 CMS entries you selected.

    published-reviews

  7. The Recommendations component displays content from the 5 records you selected.

    published-recommendations

In the next lesson, you will see how existing components can be reused in new ways.

Last modified
Next
Reuse component