Shop Ad Tile Requirements — Sessions Cannabis

1Why the current ads look broken

The current creatives are tall poster shapes, roughly 710 by 886. The shop grid places the ad in one product tile slot, and a product tile is a shorter shape. So on desktop the tall poster towers over the product cards next to it and leaves an awkward gap, and on mobile the same poster shrinks so far that the text and the Shop Now button become hard to read. The fix is simple. Deliver the ad at the exact shape of the slot it sits in for each screen size.

2The one rule for shop ad tiles

Design the ad to the tile shape, not as a tall poster. Keep the brand logo, the product, and the Shop Now button inside a centered safe zone, and place the Shop Now button in the bottom band. The tile has soft rounded corners, so hold all important content a little in from every edge. When the file matches the slot shape exactly, the browser shows it with cover and nothing ever stretches or crops the button.

3Sizes to hand your designer

Design at 2x so it stays sharp. The ad always sits as the first tile in the shop grid, in the top left. On desktop and tablet it spans two columns for presence. On mobile it spans the full width.

Breakpoint	Slot in grid	Delivery file (2x)	Renders at	Shape
Desktop 1024 px and up	Two columns wide, top left	1032 × 1290	516 × 645	Portrait 4 by 5, feature tile
Tablet 768 to 1023 px	Two columns wide, top left	1024 × 1024	512 × 512	Square 1 by 1
Mobile 0 to 767 px	Full width, top of grid	1080 × 720	360 × 240	Landscape 3 by 2, compact banner

One creative idea, delivered in these three shapes. Not one tall poster resized three ways.

4Wireframes

Left shows where the ad sits in the shop grid. Right shows the inside of the ad tile with the safe zone.

Desktop grid · ad is the top left tile, two columns wide

SPONSOREDBRAND LOGOShop Now

product

Mobile grid · ad is full width, above the products

SPONSOREDBRAND LOGOShop Now

product

Inside the ad tile · desktop portrait 4 by 5 shown

1032 × 1290 (shows 516 × 645)

Safe zone · hold content in from the rounded cornersBRAND LOGOPRODUCTShop Now

Top: brand logo. Middle: the product or offer. Bottom band: the Shop Now button. Keep all three inside the dashed safe zone so the soft corners never clip them.

5CTA conditions

The tile is small, so the button rules matter even more here than on the big homepage banner.

Bottom band, always. The Shop Now button lives in the lower part of the tile so it reads at a glance.
Big enough to tap. The button must stay tappable at the small tile size, at least a fingertip tall, with a short label like Shop Now or Shop SHRED.
High contrast plate. Put the button on a solid dark or light plate so it never blends into the artwork behind it.
Inside the safe zone. Hold the button in from the rounded corners so it is never clipped.
One tap target. The whole tile is clickable and goes to that brand, filtered to the current store, so the button and the tile lead to the same place. Never add a second competing button.
Live button preferred. Deliver the art without the button baked in and we place a real Sessions button on top, so we can point each brand to the right filter and track clicks. Baked is acceptable if you want the exact look, but then it cannot be clicked or measured.

6Do and Don't for each file

A quick check before you send each file. Each rule shows the right way, the common mistake, and the reason it matters.

Desktop tile shape

✓ Do

Portrait 4 by 5
1032 × 1290

Deliver a 4 by 5 tile that fits two grid columns. It slots in beside the product cards cleanly.

✗ Don't

Tall poster
710 × 886

Do not send the tall poster for the tile slot.

Why it matters. The poster is taller than the slot, so it towers over the product cards and leaves an awkward gap. A tile shaped file sits flush with the grid.

Mobile shape

✓ Do

Landscape 3 by 2
full width · 1080 × 720

Deliver a short wide banner that spans the full width above the products.

✗ Don't

Portrait poster
in half a column

Do not force the tall poster into a half width phone cell.

Why it matters. At half the phone width the poster becomes a tiny sliver and the button is unreadable. A full width banner gives the ad room to breathe on mobile.

The Shop Now button

✓ Do

Big button in the
bottom band, on a plate

Put a large high contrast button in the bottom band, on a solid plate.

✗ Don't

tiny text
in a corner

Do not tuck a small line of button text into a corner.

Why it matters. The tile is small on screen. A corner button at that size is unreadable and hard to tap, so people miss the click.

Corners and format

✓ Do

content held in
WebP + JPG at 2x

Keep content in from the rounded corners and export WebP with a JPG backup at 2x.

✗ Don't

logo in the corner
1x screenshot

Do not run the logo into a corner or send a soft 1x screenshot.

Why it matters. The tile has soft rounded corners that clip anything at the edge, and 1x files look blurry on modern screens.

7Drop in code for the source

The tile matches the shop grid. The aspect ratio changes per breakpoint, and cover keeps the art sharp with no stretch.

/* the existing shop grid */
.sc-product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:20px; }

/* the sponsored ad tile, first cell */
.sponsored{ grid-column: span 2; align-self:start; border-radius:16px; overflow:hidden; }
.sponsored img{ width:100%; aspect-ratio:1032/1290; object-fit:cover; display:block; }  /* desktop 4x5 */

@media (max-width:1023px){ .sponsored img{ aspect-ratio:1/1; } }               /* tablet square */
@media (max-width:767px){ .sponsored{ grid-column:1 / -1; } .sponsored img{ aspect-ratio:3/2; } } /* mobile banner */

8Deliverables checklist

Three files per ad, one for each shape: desktop 1032 by 1290, tablet 1024 by 1024, mobile 1080 by 720.
WebP as the main format with a JPG backup, exported at 2x.
Shop Now button in the bottom band of every file, large enough to read at the small tile size.
Brand logo, product, and button all inside the safe zone, held in from the rounded corners.
The same creative idea recomposed to fit each shape, never one tall poster stretched to fit.
Art delivered without the button baked in, so we can place a live clickable Sessions button per brand.
Colors within Sessions guidelines, warm orange, deep charcoal, and cream.