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

by Michael P. Hill

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

A key feature to fuel your creativity takes 'shape' even more in Artisan 1.1.0 Shopify theme
A key feature to fuel your creativity takes 'shape' even more in Artisan 1.1.0 Shopify theme

by Michael P. Hill

In addition to a slew of must-have new features such as quick shop and custom page templates, version 1.1.0 of the Artisan Shopify theme greatly expands on one of its original key features — shapes.
Stretch your creative muscles with our latest Shopify theme release: Artisan 1.1.0
Stretch your creative muscles with our latest Shopify theme release: Artisan 1.1.0

by Michael P. Hill

Jumpstart your ecommerce journey by buying an existing Shopify business
Jumpstart your ecommerce journey by buying an existing Shopify business

by Michael P. Hill

Although starting a Shopify store from the ground up with your own products or services can be a great way to begin a side hustle or even a full time job, there’s another way to get your piece of the ecommerce pie — by purchasing an existing ecommerce store.