Add to your Store
Home Why us? Documentation Privacy Policy Refund Policy Get in Touch

Shopify Split Parallax Section

Learn how to create a Split Parallax section with Sections Pro in Shopify

Description of the Section

The Split Parallax section is a dynamic and visually engaging element designed for Shopify stores. Created using the Sections Pro app, this section allows merchants to feature captivating imagery and custom content that enhances the shopping experience. Perfect for displaying product highlights, promotional content, or brand stories, the Split Parallax section utilizes a split layout where text and images interact with a parallax effect. This not only draws the viewer’s attention but also provides a modern, aesthetic appeal to any page.

Demo of the Section

Installation Instructions

  1. Download the Sections Pro app on the Shopify App Store
  2. Open the app and navigate to Free Sections
  3. Search for "Split Parallax"
  4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-Commerce Store

  1. Product Showcase: Highlight a featured product with images and testimonials. Use the parallax effect to make the product stand out and catch the viewer’s eye.
  2. Promotional Banners: Create visually striking promos with compelling headlines and call-to-action buttons. Perfect for seasonal sales or special offers.
  3. Brand Storytelling: Use imagery and rich text to narrate the story of your brand, its values, or the journey behind your products.
  4. Customer Testimonials: Feature customer reviews, especially those with 5-star ratings, to build trust and credibility.
  5. New Arrivals or Best Sellers Section: Showcase new arrivals or best-selling items in a visually appealing way to entice customers to explore more.

Overview of the Configuration Settings

  1. Font

    • Override theme fonts: Enable or disable custom fonts for the section.
    • Headline Font: Choose the font for headlines.
    • Text Font: Choose the font for the main text.

  2. Text

    • Text Size: Adjust the size of the text (10px - 50px).
    • Text Line Height: Set the line height for text.
    • Text Color: Choose the color for the text.

  3. Headline

    • Headline Size: Adjust the size of the headlines (10px - 50px).
    • Headline Line Height: Set the line height for headlines.
    • Headline Color: Choose the color for the headlines.

  4. Colors

    • Background Color: Set the background gradient or color.
    • Cover Background: Set the overlay gradient or color.
    • Cover Opacity: Adjust the opacity of the cover overlay (0% - 100%).

  5. Image

    • Image: Choose an image for the background.

  6. Dimensions

    • Max Width of Section: Set the maximum width of the section.
    • Height of Section: Set the height of the section.
    • Height of Window on Mobile: Set the height for mobile views.
    • Padding: Adjust the top, bottom, left, and right padding.
    • Gap between Columns: Set the gap between the text and image columns.
    • Spacing between Elements: Adjust the vertical spacing between section elements.

  7. Content

    • Text Location: Choose whether the text appears on the left or right.

  8. Window

    • Round Borders on Window: Set the border radius for the window (0px - 50px).
    • Window Aspect Ratio: Choose the aspect ratio for the image window.

This section offers a range of customization options that allow you to create an engaging and visually appealing element perfectly aligned with your brand’s aesthetic and functional needs.