Sliding text and image


Sliding Text and image section allows for text to smoothly scroll across the screen, capturing the attention of your visitors. This section can be customized to fit your brand's style and message, offering various settings for color, motion, and formatting. It's perfect for highlighting important announcements, promotions, or any message you wish to stand out on your site.

Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Sliding Text and Image Section.
    Click on 'Add section' and select 'Sliding text and image'.
  3. Save your changes.
    Once you've set up the section to your liking, click 'Save' to implement your adjustments.

Edit Section Settings

  • Color Scheme: Select a color scheme that fits your site's aesthetic.
  • Text Gradient: Apply a gradient to your text for a striking visual effect.
  • Content Order: Choose how the text appears - either in a single line or stacked.
  • Font Selection: Decide between using a heading or body font for the text.

Motion Settings

  • Direction: Select the movement direction of the content, either from right to left or left to right.
  • Speed: Control the speed at which the content moves across the screen using the percentage slider.
  • Pause animation on hover: Toggle this setting to stop the movement when a user hovers their mouse over the section.

Desktop and mobile layout

Adjust how the section appears across different devices. Separate controls are provided for desktop and mobile environments to ensure a responsive design.

  • Text size modifier / Size modifier: Adjust the size of the text for desktop or mobile screens.
  • Item gap: Set the spacing between each repeating block.
  • Image gap: Set the distance between the image and the text within a single block.
  • Image width: Define the width of the images in pixels.
  • Rounded corners: Enable this to apply rounded corners to the images.
  • Padding: Adjust the vertical padding of the section.
  • Margin top: Set the spacing above the section.
  • Margin bottom: Set the spacing below the section.

Customize with Blocks

Text and image block

  • Image: Select or upload an image to appear alongside your text.
  • Text: Input the message you want to slide across the screen.
  • Link: Paste a link or search for a page to make the entire block clickable.