Guidelines for Creating Full Width Banner for Shopify Theme Store

While full width banners and sliders are some of the most popular features on Shopify themes today, these can also be challenging to manage from a design standpoint. Because the image used needs to be able to expand or shrink to accommodate a virtually infinite number of screen sizes, there’s very little precise control over how the image is positioned, cropped or scaled — or how the text on top of it is positioned.

Image selection

When considering images to use in full width banners, it’s typically a good idea to avoid images with a specific focal point and instead think of your image as more of a background.

For example, a photo of your product as a focal point can be problematic for two key reasons:

First, in most cases, your shoppers, you want Shopify banner app need to see the entire image, without any cropping, at a specific size for it to showcase the product clearly and not cut any important bits off. Because it’s difficult to fine-tune how the image appears at all screen sizes, there’s no guarantee how it will end up looking to specific users.

Second, the positioning of any text you chose to display over the image may look great on a particular device or screen size, but could cover up the image or become unreadable at another.

While the images you select don’t necessarily need to be a background image in the traditional sense of something abstract or a repeating pattern, images that don’t require the key focal point to be visible do tend to work better.

A good way to generate ideas for this type of image is to start thinking about your product line and then "take a step back" and think about the imagery and environments that are associated with it, in terms of lifestyle or use contexts.

For Example:

Clothing or leather goods: You might use close-up shots of fabrics or leather or, going the opposite direction, a wide view of your brick-and-mortar shop or images of people using your items in everyday life.

Think thematically

Also keep in mind that the images you use don’t necessarily have to be product-related. Consider everything from your banner app Shopify store name to the brand image or tone you want to convey when selecting or taking photos for your shop.

Beyond photos

Also keep in mind that you’re not limited to just using photos:

A solid color, especially one advertising a sale or special, can actually be more effective than a photo, especially if it’s bright or in high contrast to the rest of your site, as shown above. This option virtually eliminates the issues of image scaling. Note that in some themes, you may need to create a solid color image to achieve this effect.

Similarly, a textural background with an interesting pattern can also work well. For example, if you’re promoting a holiday sale, use a subtle snowflake or holly pattern (just make sure the pattern isn’t too ‘busy’ if you plan on adding text over it). Or, if your store sells shoes, consider a subtle footprint or line art version of a shoe, as shown below.

Shopify banner maker | Create, Design, manage and schedule announcement banners for your e-commerce and achieve an incredible growth in sales. Visit Now!