How to Create a Product Page Template in Bricks Builder

This guide will walk you through the key steps for designing a product page template in Bricks Builder using SureCart’s integration. 

This integration allows users to easily create and customize e-commerce product pages by leveraging SureCart’s dynamic elements within Bricks. 

We’ll focus on how to effectively use this setup to build functional, responsive product pages that deliver a smooth shopping experience.

Let’s get started!

SureCart Settings in Bricks Builder

Before you begin designing your product page in Bricks Builder, you’ll need to enable the SureCart Product post type in the Bricks Builder settings.

To do this, navigate to Bricks > Settings. Under the General tab, in the Post types section, activate the toggle for SureCart Product.

That’s all you need to do.

Creating SureCart Single Product Template

To apply a consistent layout to all your product pages in Bricks, you need to create a SureCart Single Product template.

Please note: You can also create different layouts based on taxonomies and/or collections, but that is beyond the scope of this article.

To create the SureCart Single Product template, follow these steps:

• Go to Bricks > Templates (1).
• Click the Add New button (2).

• Give the template a name; in this case, “Product Template” (1).
• In the Template type dropdown, select SureCart – Single Product (2).
• Click the Publish button (3).
• Then click the Edit with Bricks button (4) to start designing your template.

• Search for “section” in the elements panel (1).
• Click on the Section element to add it to the canvas (2).

• Click on the Container (1) in the Structure panel on the right.
• Click on the Elements button (2) to add a SureCart Element to the container.

• Search for “product” (1) in the elements panel for quicker selection.
• Click on the Product Form element (2) to add it to the container.

We provided a full product page similar to the block editor so you can quickly adjust the style as needed. The process in Bricks Builder is straightforward, so we won’t cover it in detail in this article.

• Click the save button to save your changes.
• Make sure to test it on the frontend.

IMPORTANT: For SureCart elements (such as Add To Cart, Collection Tags, Product Media, etc.) to function properly, they must be placed within the Product Form or Product Card block wrappers.

Be creative! If you’d like, share your product page with the community, showcasing what you’ve created using this integration.

FAQ