Loading
Get Started with B2C Commerce
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Create a Product List or Product Detail Page Template for Page Designer

            You are here:

            1. Salesforce Help
            2. Docs
            3. B2C Commerce for Merchandisers and Administrators

            Create a Product List or Product Detail Page Template for Page Designer

            You can create a Product List or Product Detail page template to reuse across multiple categories and products. Create the template page with the structure and components you want to use, and then assign that page to one or more categories. When a Product List or Product Detail page is required in the storefront, the template page assigned to the category is displayed, populated with the appropriate product information. This topic applies to B2C Commerce.

            Required Editions

            Available in: B2C Commerce

            The Storefront Reference Architecture (SFRA) includes reference page layouts and component types for creating Product List and Product Detail templates. The following procedure describes how to use those reference components to create a Product List template.

            Important
            Important The SFRA reference components are only examples of how to implement Product List and Product Detail template pages. Typically, your developer modifies these examples or creates other page types and component types to meet your storefront requirements. The steps to create the page template for your storefront vary depending on how the developer creates the page types and component types. The following procedure assumes you’re using the reference components with no modifications, as they’re provided in SFRA. This procedure is intended only to help you understand the concepts of creating Product List and Product Detail templates.
            Note
            Note If at any point the Promotional Content Banner is the last object on the grid wall, it drops from the page to prevent gaps. For example, If there are 2 products on the grid wall and the Promotional Content Banner is placed in grid 3, it doesn’t appear. This implementation is specific to these components delivered by SFRA. You can use custom component implementations if this example is a problematic implementation.
            1. From the Page Designer Visual Editor, click New.
            2. Select the Product List Page page layout.
            3. Assign one or more categories from your catalog to the page.
              For example, assign the page to the category for men's clothing. All subcategories under men's clothing are implicitly selected.
            4. Enter a name and description for the page, and click Next.
            5. Review the page information, and click Save & Create.
              The page is displayed in the Visual Editor. The Product Listing component is already in the main region of the page because the developer specified that the main region is populated with that component whenever a page is created.
            6. To select which information to display for the Product Listing component:
              1. Click the Preview Settings icon at the top of the pageImage that looks like an eye..
              2. Select the mens-clothing category for Dynamic Attributes, and click Apply.
                The Product Listing component is populated with men's clothing information, using the sorting rules defined in Business Manager.
            7. To add a Dynamic Banner to the page, click the Plus sign. icon to open the Components menu, and then drag the Dynamic Banner into the top region of the page.
              The Dynamic Banner displays the image and text configured in Business Manager for the category displayed on the page, in this case, men's clothing.
            8. (Optional) To specify that the Dynamic Banner uses the image and text from a category other than the one currently displayed in the page, click the edit icon Image of a pencil. next to Value assigned to page. Select a different category.
            9. To override the image or text configured in Business Manager for the category selection, enter Banner Image or Banner Text. For example, you can specify that the text for the banner is Men's Clothing regardless of what's configured for the text in Business Manager.
            10. Open the Components menu by clicking the Plus sign. icon, and then drag the Image With Text component into Product Listing Layout component in the main region of the page.
              Use the Image With Text component to add a static image and text within the product listing. The products displayed on the page now flow around the static image and text.
            11. Configure the Image With Text component with the appropriate image and text.
            12. When you're satisfied with the contents of the Product List template page, click Publish.
              When a category assigned to this Product List template page is rendered in the storefront, the template page is populated with the appropriate content.
             
            Loading
            Salesforce Help | Article