Documentation
v.1.6
GETTING STARTED
DYNAMIC ISLAND
Ecommerce
SureCart
SureCart004 product page
A versatile product template designed for wearable technology or premium gadgets. It combines a sleek image gallery with detailed descriptions and highlights key product features like health tracking, adaptive design, and seamless connectivity. Additional benefits like free shipping, secure payments, and easy returns are prominently displayed, making it ideal for showcasing smartwatches, fitness trackers, or tech accessories.
Preview
Open previewOptional Scroll Scale Animation
This product template includes an optional scroll-based image scaling effect to add a dynamic and engaging visual experience for your customers. It’s perfect for showcasing product images in an eye-catching way as users scroll through the page.
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 to Customize the Modals
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, ormodal3). - Make sure this attribute stays in place, it tells the system which modal to show when triggered.
- Each modal has an attribute with a unique identifier (e.g.,
-
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.
- In the element that will trigger the modal (like a button or link), set the same identifier value in the trigger attribute (e.g.,
How it works
-
Enable the Effect
- To activate the animation for an image, simply add the attribute
data-scroll-scaleto the image element. - The animation will be applied automatically.
- To activate the animation for an image, simply add the attribute
-
Customization Options
- Default Behavior: The animation runs out-of-the-box with no additional setup.
- Optional Scaling Factor: The initial scale is set to 1.2, and it smoothly scales down to 1.0 as the image enters view.
-
Disabling the Effect
- If you don’t want the animation on specific images, simply omit the
data-scroll-scaleattribute from those elements.
- If you don’t want the animation on specific images, simply omit the
We're here to help
Choose how you'd like to connect with our support team
Contact Support
Get help from our team of experts
Response within 24 hours