Section by Section: Getting angular with Artisan's banner overlays

Large, eye-catching images with explanatory text are a popular way to create "hero" elements in your Shopify theme, and the Artisan Shopify theme introduces a new, easy way to generate dynamic background shapes that make your text pop.

Using the same technology that powers the shapes that can be added as background elements behind many sections, Artisan can automatically generate banner overlays that make your text easy to read while still letting the image behind it shine.

Each block (or slide) within each individual slideshow section has a number of settings:

• Preheading text: A smaller snippet of text above the main headline. This can be a great way to label your banner or provide a clever tagline. 
• Headline text: The largest, dominant text element, best used for your most important point or a way to grab attention.
• Subheading text: Another smaller block of text that's ideal for adding a bit more explanation or detail. 
• Button label: A line of text meant as a call to action to encourage users to click.
• Slide link: Where the user should be taken when clicking on the banner. Note that this link works without any button label — and also makes the entire banner clickable, not just the button or other text.
• Background color: The color of the overlay. Note that this color becomes slightly transparent to allow the texture of the photo behind to show and this can affect the color slightly. 
• Text color: The color of the preheading, headline, subheading in the slide.
• Link color: The color of the button label text.
• Overlay type: Select from none, angled down, angled up or pointed.
• Overlay position: Select from left, center or right.

Each slide within a slideshow can have its own, distinct settings. Not only does this give you numerous layout options, but it can accommodate a myriad of background images.

For example, while the samples shown after down in this post use a photograph with a light background, making a black overlay a good choice to create contrast. However, if you need to use a darker image, such as the ones in our Chicago Turbo Shopify theme, a lighter overlay might work better:

Overlays at work

Below are example images, each with the overlay type and position shown on the slide. In these examples, the background color is black and the text is white.

Angled down and positioned to the left creates an interesting layered effect.

Changing the position to center creates a unique but eye-catching pyramid-like overlay.

Moving the image to the right lets you make the left side of your image visible instead.

A similar look to angled down, angled up gives you another option that also has the advantage of drawing the eye down, encouraging users to scroll down.

The center option turns this into a "funnel" — another great way to, quite literally, "point the way" for users to keep scrolling down for more.

Moving the overlay to the right side is a good alternative.

Using the pointed option is a great way to, quite literally, point to your image. 

When set to center alignment, the pointed overlay option creates an elegant diamond-like shape that draw the eye to the center, while allowing your slideshow image to show through on either side.

Flipping the overlay to the right side causes the arrow to "point" left.