We are talking about the banner width of your Because banners. Here are our best tips:

Let's make sure your banner looks right

You don’t need us to tell you how important product pages are. Your product pages are your babies because they hold your products! They are the core of your store and truly are the last thing a customer sees before they click the glorious “check out” or “add to cart.”

If you've added Because, congrats on taking your product pages to the next level. If you're exploring what Because can do before installing it on your site, then this is the perfect blog for you. We are talking about the banner width of your Because banners. Here are our best tips:

Match your add to cart button length

The default Banner width for Because banners is 100%. What that means is your Because banner will default to 100% of the width of the selector your add to cart button is in. So if your add to cart button is tied to a selector that is longer than the button itself, it will extend beyond the button.

You can make your banner longer or shorter by adjusting the banner width when creating your first campaign. You have tons of flexibility within the Because editor to change the formatting of your banner! If it doesn't look right, try playing around with the banner width in % or px, and the margin top + margin bottom.

PRO Tip: If you right click on your add to cart button, click "inspect" and then hover over the add to cart button in the code to the right (see screenshot below), your px length should come up over your add to cart button!

Pay attention to the line height on your banner

The line height of your banner really just impacts the vertical space between your copy and increases or decreases the height of your banner. Most users don't change this, but if you wanted to play around with different line heights, you might see variations like this:

Depending on your product pages and the message you're adding to your banner (product reviews, promo codes, shipping info, etc.) you may need more or less space for your copy, and playing around with the line height can help you with that.

Don't forget your margin top and bottom

Margin top and Margin bottom also play a big factor in making sure your banner looks right on your product page. Again, most of the time Because users just leave the line height alone, but sometimes it might need adjusting on the top or the bottom if there's too little or not enough space above or below your banner.

Margin top is exactly what it sounds like: the space above your banner. The default is set to 10.

Margin bottom is the space below your banner. The default is set to 15.

Feel free to increase or decrease these as needed, like perhaps to 15 and 20.

Example

This is an example of what you should avoid - leaving dead space between your banner and your add to cart button. Not to mention, this may look like an even bigger space gap on mobile.

The visual below shows the perfect way to leave just the right amount of space between your banner and add to cart button. It will look flawless whether you are shopping on your phone or laptop.


Having banner placement issues?

If your banner isn't showing up in the right place (or at all), give us a ping. Sometimes custom sites or subscription sections like this one can make it tricky to automatically place your banner in the right place. Don't worry we can help.

Get started on adding your Banners, Pop Ups and Top Bars to your Shopify site with the NEW Rules Engine by automating your content, so it shows up at the right time, to the right customer. Be sure to read up on the full guide and FAQ to the Rules Engine in our latest blog post.

Similar posts

Ecommerce
January 19, 2024
4
Min Read

Best Product Page App for Home and Appliances Brands

Ecommerce
January 19, 2024
4
Min Read

Best Product Page App for Coffee Brands

Ecommerce
January 19, 2024
3
Min Read

Best Product Page App for Skincare Brands

Ecommerce
January 19, 2024
4
Min Read

Best Product Page App for High-SKU Stores

Ecommerce
January 19, 2024
3
Min Read

Best Product Page App for Klaviyo

Ecommerce
January 19, 2024
4
Min Read

Best Product Page App for Shopify Brands

Ecommerce
January 19, 2024
4
Min Read

Best Shopify Apps for New Ecommerce Brands

Ecommerce
January 19, 2024
4
Min Read

Best Shopify Apps for Increasing Conversion Lifts

Ecommerce
January 19, 2024
3
Min Read

The Best Shopify App for Conversion

Ecommerce
January 19, 2024
5
Min Read

Best Product Page Apps for Furniture Brands

Ecommerce
January 19, 2024
4
Min Read

Best Product Page App for Apparel Brands

Ecommerce
January 19, 2024
Min Read

The Best Product Page App for Beauty Brands

Ecommerce
January 19, 2024
4
Min Read

Bye Google Optimize, Hello Because—Built For Shopify

Ecommerce
January 19, 2024
5
Min Read

Ditch Your Product Description with Text Elements

Ecommerce
January 19, 2024
6
Min Read

5 Because Banners You Can Create on Your Product Page

Ecommerce
January 19, 2024
3
Min Read

Introducing Dynamic Text Tokens

Ecommerce
January 19, 2024
4
Min Read

New in Because: Analytics Dashboard

Ecommerce
January 19, 2024
6
Min Read

Why (and How) Shopify Store Owners Should Ditch their ‘About Us’ Page

Ecommerce
January 19, 2024
5
Min Read

How to Brand Your Product Pages to Follow Color Accessibility Guidelines

Ecommerce
January 19, 2024
4
Min Read

Perfecting The Right Layout on Your Product Page Banners

Ecommerce
January 19, 2024
3
Min Read

Design Mistakes to Avoid on Your Because Product Page Banners

Ecommerce
January 19, 2024
2
Min Read

New in Because: Schedule Your Shopify Product Page Banners

Ecommerce
January 19, 2024
5
Min Read

New in Because: A/B Test your Shopify Product Page Content

Ecommerce
January 19, 2024
2
Min Read

New in Because: Canva-like Banner Template Library

Ecommerce
January 19, 2024
2
Min Read

New in Because: Custom Banner Placement

Ecommerce
January 19, 2024
3
Min Read

All you need to know about Shopify's Dawn Theme and Because

Ecommerce
January 19, 2024
3
Min Read

3 Ways to Use the Rules Engine

Ecommerce
January 19, 2024
4
Min Read

How Because drove a 38% increase in Add to Carts across 100 Stores

Ecommerce
January 19, 2024
5
Min Read

12 Ways to use the Rules Engine

Ecommerce
January 19, 2024
5
Min Read

How to add Geolocation to your Shopify Banners

Ecommerce
January 19, 2024
4
Min Read

New in Because: Playbooks

Ecommerce
January 19, 2024
5
Min Read

A Powerful New Look for Because

Ecommerce
January 19, 2024
4
Min Read

How to Add a Free Shipping Banner on Shopify

Ecommerce
January 19, 2024
3
Min Read

Drive Conversion with Product Page Messages for BFCM

Ecommerce
January 19, 2024
3
Min Read

Small Business Saturday Marketing with Banners

Ecommerce
January 19, 2024
2
Min Read

Copy-able content for Product Page Conversion during the Holiday Season

Ecommerce
January 19, 2024
4
Min Read

3 Ways to use Promotions to Increase Product Page Conversion