Shoshin Docs

Appearance

Parallax media ​

Bring your content to life with immersive media and subtle parallax motion.

The Parallax media section is designed to create a strong visual impact by combining immersive media with a subtle parallax scrolling effect. It's ideal for storytelling, brand moments, or highlighting key campaigns while keeping the layout clean and modern.

This section allows you to display a large media element that moves at a different speed than the page scroll, creating a sense of depth as users navigate through your store.

Parallax media

Configuration ​

The Parallax Media section provides a focused set of options that allow you to control the media, layout, overlay, and content positioning while maintaining a clean and immersive visual experience.

Media ​

You can use either an image or a video as the main background media (not both).

Image

  • Image
    Select an image to use as the main background with the parallax effect enabled. Shopify automatically handles image optimization and cropping, so you don't need to worry about exact image dimensions.

  • Mobile image
    Optional image specifically for mobile devices. Leave this empty to use the same image across all screen sizes.

Video

Note

When a video is selected, image settings are ignored.

  • Video
    Select an MP4 video to use as the background media with the parallax effect enabled.

Media Height ​

  • Height – mobile (px)
    Sets the section height on mobile devices. The media will be centered vertically to respect this value.

  • Height – desktop (px)
    Sets the section height on desktop devices. The media will be centered vertically to respect this value.

Media Overlay ​

  • Overlay color
    Adds a color overlay on top of the media to improve text readability. Default: #000000

  • Opacity (%)
    Controls the transparency of the overlay. Higher values increase text legibility.

  • Blur
    Applies a blur effect to the media for additional contrast and visual refinement.

Content ​

  • Position – mobile
    Controls vertical alignment of the content on mobile devices. Available options:

    • Top
    • Center
    • Bottom

  • Position – desktop
    Controls content alignment on desktop devices. Available options:

    • Left
    • Center
    • Right
    • Bottom

  • Subheading
    Optional text displayed above the main heading.

  • Subheading font size
    Available options: sm, md, lg, xl

  • Heading
    Main title for the section.

  • Heading size
    Available options: H1, H2, H3, H4, H5, H6

  • Description
    Supporting text displayed below the heading.

  • Description font size
    Available options: sm, md, lg, xl

Buttons ​

Primary Button

  • Button label
    Text for the primary button. Leave empty to hide the button.

  • Button URL
    Link destination for the primary button.

  • Button style
    Available options: Primary, Outline, Accent, Link

Secondary Button

  • Button label
    Text for the secondary button. Leave empty to hide the button.

  • Button URL
    Link destination for the secondary button.

  • Button style
    Available options: Primary, Outline, Accent, Link

Spacing ​

  • Padding top
    Adjust the top spacing (margin) of the section.

  • Padding bottom
    Adjust the bottom spacing (margin) of the section.