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

by Michael P. Hill 3 min read

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:

Shopify theme banner overlay

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.

Shopify theme banner overlay

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

Shopify theme banner overlay

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

Shopify theme banner overlay

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

Shopify theme banner overlay

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.

Shopify theme banner overlay

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.

Shopify theme banner overlay

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

Shopify theme banner overlay

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

Shopify theme banner overlay

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.

Shopify theme banner overlay

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

Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn. While comments and feedback are always appreciated, Michael regrets that, due to the volume of inquires received, personal responses are not possible. For specific assistance or support with Out of the Sandbox themes, visit the help center.



Also in Shopify Theme Blog

How to increase the value of new customers that bought during BFCM
How to increase the value of new customers that bought during BFCM

by Michael P. Hill 4 min read

Previously, we took a look at some of the basics of lifetime value and cost to acquire — and how this affects your business — but assuming you were able to successfully acquire new customers for Black Friday and Cyber Monday, how can you increase the value of these customers and get them to buy again (and again)?
BFCM is over — but what value do new customers acquired during the boom bring your business?
BFCM is over — but what value do new customers acquired during the boom bring your business?

by Michael P. Hill 5 min read

Black Friday and Cyber Monday are a bit of a Catch-22 for Shopify store owners — the big sales and deals typically bring in tons of orders and new customers, but how can you ensure you maximize a lifetime of value from those shoppers?
How the Shopify community has your back for Black Friday and Cyber Monday
How the Shopify community has your back for Black Friday and Cyber Monday

by Michael P. Hill 3 min read