apip-styleguide

The hero module is a module at the top of the homepage (not counting the global banner or nav). It's the first thing our customer sees and interacts with. It typically houses large campaigns and offers / flash sales / warehouse sales etc. The hero accepts jpg, gif, png, and also vimeo link for video running in the background.

A typical hero consists of three components:

background image desktop (jpg)

background image mobile (jpg)

offer (png or gif if animated)

Background images are typically optimized jpg. The desktop image covers screensizes beyond 768px wide, while the mobile one covers the sizes below 767.

The most challenging aspect of the background images is keeping in mind the 'safe zone'. This zone is the heart of the image more or less and should have the most important visual elements of the image inside of it. This is harder to do on mobile as its safe zone is rather small. The reason the image itself is large is to accomidate for quasi-tablet mobile phones like the XL android and iphone / phablet devices.

As the name suggests, this image contains the offer. It's typically a transparent png. It also supports animated gif.

This image sits on top of the background image. By default, it is designed to never leave the safe zone and doesn't scale the way the background images do as its a singular image. That said, you'll have to be careful with the amount of information and size of the copy in this image, particularly when you get to mobile sizes.

The button is provided by the shopify module (explained later)

The offer image doesn't have any size requirements like the background images do. Obviously the bigger the image, the more of the background image it will cover up.

Once you have put together your 3 components to create a hero, you're now ready to jump into the shopify homepage editor. Firstly, create a duplicate of a theme. Do not work in the live environment for obvious reasons.

The hero is typically underneath the header module. It's icon is what looks like mountains with 3 dots under it.

Once you are inside the hero module, there will be alot of settings for different things. Just ignore all of them for the time being and scroll down to the image fields near the bottom of the module settings. You'll see two image slots, one for desktop and one for mobile. Drop in your background images you created here and then hit save.

This step is somewhat clunky, it's sort of a workaround to being able to set the promo as art and maximize design control over how it is presented. To do this, you'll create a image module that you'll later hide/delete. You are doing it to upload your offer image and pulling its image path. This will make sense later. For now, create an image + text module.

After creating the module, add your offer image to the image upload and save. Now right click on the offer image and copy its image location.

Once you have the image location, we are done with this module, you can hide or remove it. You can hide it for the time being, sometimes the image path doesn't copy or you get sidetracked so it helps to not have to recreate a new module and do that process again.

Once you're back inside the hero module, head down to the heading field. You'll notice you're there because there will be a bunch of code inside it. Ignore most of it for now, you just want to find the img src and paste in your offer image path from the step before.

I pasted the code below to make it easier to follow, the image path is in highlighted:

After inserting your image location, you should see the offer show up on the site preview window. The offer by default, will be centered inside the safe zone on both mobile and desktop. Sometimes you want more control of where the offer is. In the image below, we want to move the offer to the left so that it isnt covering the model. To do this, we will be adjusting the padding. In this particular case, padding-right.

In the code, the padding is controlled in two places, highlighted below. The top part controls the padding on the desktop and the bottom controls the padding settings on mobile. This is where trial and error is your best friend. Changes to the alignment will be displayed in real time in the preview window.

In the example below, after trial and error, I've found that 20ems worth of right paddding was enough to clear the offer from the model. I'll repeat this process on mobile.

Note: Mobile padding should be verified on actual mobile device, not the viewer on shopify. It will be unreliable.

Once your offer is looking good on desktop and mobile, the final step is to set up the links on your button. Find the fields with Slide link and slide link text to set your button. Alter button style is optional. In the example, we opted for a white button. The default is black button with white text.

Thats it! There are more advanced settings below for even more fine-tuning.

Below is a breakdown of the code and extra settings for more customizations

.on-the-fly-behavior img{}

This class makes the offer image responsive by setting the width to 100%. Setting it to anything else will only affect the size of the offer, both on mobile and desktop.

.hero__text-content

This is the container that the offer + button live in. Adjust paddings to move it around the safe zone. Be careful with top and bottom paddings, to steer clear of the nav bar and clipping near the bottom.

@media

This setting specifies at what point the offer takes on mobile settings. I've found at 600px the design falls apart and needs to change. If for some reason you wanted this at a different point, you can set it here.

Everything below the media settings are for mobile only.

.on-the-fly-behavior

This is set at 210px by default. If you wanted the offer to render smaller on mobile, this is where you would specify. Avoid going below 150px as the button then breaks into two lines.

.hero__text-content

these are paddings for mobile alignment. They are reset to 0 by default.