×

How to Display Products on the Storefront

Modified on Mon, 4 Nov at 5:50 AM

Store Products Block

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

  • 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 Customize Store 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.
    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.
    Add element
  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.
      product elements
  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


Back to Top

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article