LIVE NOW

Visual Configurator is now active — Customize 50+ professional animations Visual Configurator is live!

Get Started

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 preview

Optional 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, 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.

How it works

  • Enable the Effect

    • To activate the animation for an image, simply add the attribute data-scroll-scale to the image element.
    • The animation will be applied automatically.

  • 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-scale attribute from those elements.

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