Your Online Store's Banner Images Overlay

Using banners that have text in an overlay on top of them

Dan McCarty avatar
Written by Dan McCarty
Updated over a week ago

Note: We design banners and social media images for monthly releases. Find banners and images here: Go to Downloads > Marketing Materials

The banner overlay is a dynamic, responsive banner with a feature set that makes it incredibly flexible. The banner combines an image, and user-generated text/link(s) to create custom, store-specific displays that funnel customers towards selected main product lines, promotions, or other relevant pages on your site.

Features:

The banner overlay display comes in two layouts: layout A (in use on the Nori theme), and layout B (in use on the Trowa theme). Each of these layouts uses the banner manager app to combine user-specified text, image, and link to drive traffic further into your site. However, each layout differs slightly in implementation.

 Layout A:In layout A, the user needs to click the button in order to follow the link. The link button colors invert on hover.The logo image that appears above the default gray line may be updated by the user. The logo dimensions must be kept reasonably close to this sample logo in order to maintain good usability.Image Dimensions: 3:1 ratio (600 x 200px)The title text ("All Magic Singles and Sealed") is pulled from the Alt Text descriptor in the banner product.The button styles and text ("Shop All Magic") are automatically created around any link that is present in the description. To create the button, type the text that you would like inside of the button into the description, and turn that text into a link by following these instructions

Layout B:In layout B, the entire banner is clickable. On hover, the image darkens, and the title/subtitle elevate.The background image may be changed by updating the banner manager image.Image Dimensions: 1:1 ratio (600 x 600px)The title text ("Friday Night Magic") is pulled from the Alt Text descriptor in the banner product.The subtitle text ("Shop All Magic") is pulled from the product description. 

Specifications:

  • Default Tags: (left to right): “Square Banner 1” “Square Banner 2” “Square Banner 3”

  • Image pulled from banner manager product image

  • Title text pulled from Alt Text descriptor

  • Link Button/Subtitle text pulled from product description

Notes/Limitations:

  • Layouts are only compatible with images that are the correct ratios. Incorrectly sized images will result in unpredictable results.

  • All instances of the banner overlay must be of equal size

Note: We design banners and social media images for monthly releases. Find banners and images here: Go to Downloads > Marketing Materials

Did this answer your question?