SureCart 002 Product Page | Bricksfusion

A minimalist product template, perfect for digital assets like mockups, templates, or software licenses. It emphasizes clarity with a clean layout, detailed descriptions, license options, and a focus on ease of purchase. Ideal for products that require showcasing key features and straightforward user choices.

Preview

Open preview

Vertical Product Gallery

Your product gallery is automatically adjusted to display images in a vertical format, optimized for better usability and visual appeal.
It works flawlessly across devices, ensuring a clean and professional look.
No customization required, it’s ready to use as soon as you activate the template.

Sticky Product Information

Key product information stays visible as users scroll, thanks to a sticky layout for larger screens.
On mobile, the layout adjusts dynamically to provide a seamless experience.
This ensures that important details (like price or product name) are always accessible to potential buyers.

Expandable Product Description

Long product descriptions are neatly displayed with a “Read more” button.
Customers can easily expand the section for more details or collapse it to keep the page clean and focused.
This feature is fully automated, no need for any adjustments.

Vertical Product Variants

If your product has multiple variants, they are displayed in a vertical pill-style layout for better readability and navigation.
The design automatically adapts to different screen sizes and highlights the selected option for clarity.

Customizable Modal Functionality

You can create up to 3 custom modals using Bricks Builder.
These modals will remain hidden until triggered by the included functionality. No manual setup is required, everything is handled dynamically by the code.
You can fully customize the content, style, and behavior of these modals to match your brand.

How it works

Customizing the modals is super easy and doesn’t require any technical skills. The template already includes 3 pre-designed modals at the bottom of the page. Here’s how you can personalize them:

Locate the Modals:
- Scroll to the bottom of the template in Bricks Builder.
- You’ll see the 3 modals already designed and ready to customize.
Design Your Modals:
- Edit the content, style, and layout of each modal directly in Bricks Builder to match your brand.
- You can add images, text, or any other element you like, everything is editable.
Set the Trigger Attribute:
- Each modal has an attribute with a unique identifier (e.g., data-custom-modal="modal1", modal2, or modal3).
- Make sure this attribute stays in place, it tells the system which modal to show when triggered.
Define the Trigger:
- In the element that will trigger the modal (like a button or link), set the same identifier value in the trigger attribute (e.g., data-modal-trigger="modal1").
- This ensures the correct modal will appear when the trigger is clicked.

Documentation

GETTING STARTED

DYNAMIC ISLAND

SURECART

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

TRANSITION PAGES