Media With Text

The Media with text section allows you to display an image or video with a heading, body text, and an optional button. This section has a flexible layout and is a great way to feature a product, collection, promotion, blog post, or even a customer review.

Frame

Set up section

  1. Select a Template to edit from the dropdown menu in the top bar.
  2. In the side panel, click (+) Add section and select Media with text.
  3. If desired, you can change the section order using the drag and drop handles ⋮⋮
  4. Click the Media with text tab to open its settings.
  5. Click Select image to open the image selector. Select an image from your library or upload a new image.
  6. (Optional) Add a URL in the Video URL field to display a hosted video instead of an image. This option requires a video in .mp4 format that's been uploaded directly to your Shopify Content. We strongly recommend using a video that's under 10MB in size to preserve site speed and performance.

    Upload video to Shopify

    In your Shopify Admin:

    1. Go to Content > Files to open your Shopify Files
    2. Click Upload files to add your .mp4 file from your computer.
    3. Once the file is uploaded, click the link icon to copy the URL.

    4. Paste the URL in the Video URL field.
  7. Select a Media ratio option; Frame offers 9:16, 1:1, 5:4 and 4:5.
  8. Select a maximum Media width between 300px to 1100px using the slider. This is the maximum width your media will have on large screens. Media will automatically scale down to fit on smaller screen sizes.
  9. Select a Text layout option; this determines if your text will display to the left or right of your media.
  10. Select a Content alignment option. This setting determines if the entire section will be aligned to the left, right, or center of the page on large screens. This is useful when the section does not fill the entire page width on large screens. The section will automatically scale down to fit smaller screens. 
  11. Select a Media animation option. This setting controls how your media is revealed to the user upon scroll. Frame offers two options: Fade up or Discover image. Select none if you want to disable the animation.
  12. Click Save.

This section contains three blocks: Heading, Text, and Button.

  1. Click on the block to open its settings.
    • Click + Add block to add a new block.
    • Click Remove block to delete a block, or use the eye icon to hide a block.
  2. To add a title, add text to the Heading field.
  3. To add further information, add text in the Description field.
  4. If desired, add a button by adding a Button label and Button link.
  5. Click Save.

Note: Sections will appear on all pages that use the same template. Make a new custom page template for each page layout. Please refer to our article on Custom page templates to learn more.

Honey

Set up section

  1. Select a Template to edit from the dropdown menu in the top bar.
  2. In the side panel, click (+) Add section and select Media with text.
  3. If desired, change the section order using the drag and drop handles ⋮⋮
  4. Click Media with text tab to open its settings.
  5. Click Select image to open the image selector. Select an image from your library or upload a new image.
  6. (Optional) To display a video instead of an image, click Select video and use the file selector to select a video from your library or upload a new video file. We strongly recommend using a video that's under 10MB in size to preserve site speed and performance.
  7. If you want your video to autoplay, enable the Autoplay video option.
    1. This is only recommended for videos without audio. Due to browser policies, all videos that autoplay are muted. Learn more.
  8. Select your desired Media ratio. We recommend matching your media ratio setting to the actual media ratio of the image or video; media will be cropped if the original ratio does not match the selected setting. If your media ratio is not listed, select Adapt to image.
  9. Select a maximum Media width between 300px to 780px using the slider. This is the maximum width your media will have on large screens. Media will automatically scale down to fit on smaller screen sizes.
  10. Select your desired Vertical text alignment. This setting controls the vertical positioning of your text. Honey offers two options: Top or Center.
    1. This setting will only apply when Overlap text box with image is disabled.
  11. Select your desired Section layout. This setting controls the positioning of your text in relation to your media. Honey offers two options: Left or Right.
  12. Select your desired Section alignment. This setting determines if the entire section is aligned to the left, right, or center of the page on large screens. This is useful when the section does not fill the entire page width on large screens. The section will automatically scale down to fit smaller screens. 
  13. If desired, you can slightly overlay your text on your media. To enable, check the Overlap text box with image option.
  14. Select a Media animation option. This setting controls how your media is revealed to the user upon scroll. Honey offers three options: Fade up, Discover image, or Parallax. Select none if you want to disable the animation.
    1. Note: The parallax option will only apply if Overlap text box with image is enabled.
  15. To change the background color of the text content, use the Color scheme dropdown. If you prefer to have a frosted glass background instead of a solid color, click Enable frosted glass background.
    1. Note: The frosted glass background will be more visible if Overlap text box with image is enabled.
  16. Click Save.

This section contains three blocks: Heading, Text, and Button.

  1. Click on the block to open its settings.
    • Click + Add block to add a new block.
    • Click Remove block to delete a block, or use the eye icon to hide a block.
  2. To add a title, add text to the Heading field.
  3. To add further information, add text in the Description field.
  4. If desired, add a button by adding a Button label and Button link.
  5. Click Save.

Note: Sections will appear on all pages that use the same template. Make a new custom page template for each page layout. Please refer to our article on Custom page templates to learn more.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us