How do I add a hero banner image to Locksmith's access messages
This guide provides an example of how to add a banner image above your access message content in your Shopify online store.
Locksmith's access messages can be modified using text, HTML, CSS, JavaScript and Liquid code. We cover this and where to edit Locksmith's access messages in our customising messages guide, linked below:
Customizing messagesAdding a hero banner above your access content:
The following code can be added to your "Guest message content" field, above your existing message:
Hero banner CSS and HTML:
<style>
.hero-image {
/* Replace the URL here with the URL to your image */
background-image: url("https://www.w3schools.com/howto/photographer.jpg");
/* Set a specific height */
height: 300px;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
</style>
<div role="banner" class="hero-image">
</div>
The above code is based on an example from W3 School, here: https://www.w3schools.com/howto/howto_css_hero_image.asp

Customising this example:
To replace the example image with your own, replace the URL with the quotes for the
background-image
with the URL of your banner imageAdjusting the height of the hero banner by changing the
height
value (300px in this example) to suit your needs
Modify this code to display a collection-specific banner image (advanced):
Uploading and storing images:
Shopify has some documentation on uploading and managing files here: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads
Related articles:
Customizing messagesCustomizing the passcode formCustomizing the email list signup formLast updated
Was this helpful?