How to Display Products on the Storefront

Displaying individual products on your ClickFunnels storefront helps customers easily browse and purchase items. The product elements you add are dynamic, automatically pulling details—like the name, image, and price—from the products you’ve created. This article explains how to add product elements to your storefront and customize their appearance for a better user experience.

Table of Contents

• Requirements
• Adding Product Elements to the Storefront
• Customizing Product Elements
• Related Articles

Requirements

• An active ClickFunnels account
• At least one product is created
• Ensure that each product included in the “Product Collection” is set to be visible in the Online Store.

Adding Product Elements to the Storefront

1. In the left-hand menu, click Store, then select Overview.
2. Click Edit Store Theme to access the theme editor.
3. Ensure the Store Front page is selected.
4. Add a Section, then add a Row inside that section.
5. Click the + Plus icon or Add New Element button to open Elements menu on the right-hand side.
6. Scroll to the Collection section and select the Products element.
   
7. After adding the “Product” element, you will be prompted to select how many columns you want to add inside the container.

Back to Top

Customizing Product Elements

When you add the Product element to your collection, your store theme might automatically includes some product details, such as the Name, Image, and Price. If you want to customize the display further, you can add additional elements or modify the existing ones. These elements are dynamic and will pull data from the product details you’ve already set up, ensuring your storefront stays up-to-date.

If you want to add more elements or further customize the display:

1. Click Add Element inside the row where the product details are shown.
   
2. From the Product section, add elements like:
   • Name: Displays the product name.
   • Description: Adds a brief description.
   • Price: Shows the product price.
   • Image: Displays the product image.
   • Link: Adds a button linking to the product page or checkout.
     
3. Click on each element to access its settings. You can adjust fonts, colors, spacing, and layout to match your store’s theme and ensure everything looks cohesive.

Back to Top

Related Articles

• How to Customize the Store Product Page
• How to Customize the Store Collection Page
• How to Create a Store Upsell in the Store App
• Products - How to Create and Manage Products
• Orders - How to Manage Orders

Back to Top