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:
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:
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.