Shop Pages Customization

Shop pages are where customers browse, search, and purchase your products. Professional banner images on these pages create a cohesive brand experience and improve the overall shopping journey.

Overview

The Shop Pages customization lets you set banner images for four key pages:

Shop Page - Where customers browse all your products
Search Page - Where search results are displayed
Shopping Cart Page - Where customers review items before checkout
Checkout Page - Where customers complete their purchase

Consistent, high-quality banner images across all shop pages create a professional appearance and reinforce your brand identity.

Accessing Shop Pages Settings

Navigate to Customize Store in your admin dashboard and select the Shop Pages tab.

This banner appears at the top of your main shop/catalog page where customers browse all products.

Image Requirements:

Format: JPG, PNG, or WebP
Recommended size: 1920px × 1279px
Maximum file size: 5MB
Aspect ratio: Landscape (roughly 3:2 ratio)

Upload Methods:

Upload New Image: Click Upload new image to upload from your computer
Choose from Library: Click Choose image to browse pre-curated images from Pixabay

The image library features royalty-free, high-quality images perfect for professional storefronts. All images are sourced from Pixabay.

Click the Preview icon (external link button) to view how the banner looks on your live shop page at: https://e2c.store/[your-store-name]/shopall

Save Changes

After selecting or uploading an image, click Save Changes to apply the banner to your shop page.

Content Ideas:

Product photography showcasing your inventory
Lifestyle images of your products in use
Branded graphics with your logo and tagline
Seasonal or promotional imagery
Category-specific imagery (e.g., jewelry, clothing, electronics)

Design Tips:

Keep important content centered (mobile devices crop edges)
Avoid text in the banner (navigation overlays the top)
Use high-quality, professional images
Maintain consistent style across all banners
Choose images that reflect your brand personality

This banner displays at the top of search results when customers use your store's search function.

Use the same process as the shop banner:

Click Upload new image or Choose image
Select an image meeting the specifications (1920px × 1279px, max 5MB)
Preview at: https://e2c.store/[your-store-name]/search

The search page is often a customer's second visit after the homepage. A professional banner reinforces trust and brand recognition.

Click Save Changes to apply the banner to your search results page.

Content Ideas:

Magnifying glass or search-themed imagery
Collage of various products from your store
Generic lifestyle images that match your brand
Same image as shop banner for consistency

Why It Matters: Customers using search are actively looking for something specific—a professional search page reinforces that they're in the right place and encourages them to explore results.

This banner appears at the top of the cart page where customers review items before checkout.

Follow the standard upload process:

Click Upload new image or Choose image
Select appropriate image (1920px × 1279px, max 5MB)
Preview at: https://e2c.store/[your-store-name]/cart

Click Save Changes to apply the banner to your shopping cart page.

Content Ideas:

Shopping bag or cart imagery
Celebration imagery (customers are close to purchasing!)
Trust signals (secure checkout, free shipping icons)
Simplified version of your shop banner

Strategic Considerations:

Cart page is high-intent—customers are close to converting
Keep banner professional but not distracting
Avoid cluttered images that create anxiety
Reassuring imagery builds confidence in the purchase

The cart page is a critical conversion point. A clean, professional banner reduces friction and encourages checkout completion.

This banner displays during the checkout process where customers enter payment and shipping information.

Use the same upload workflow:

Click Upload new image or Choose image
Select appropriate image (1920px × 1279px, max 5MB)
Preview at: https://e2c.store/[your-store-name]/checkout

The checkout page is the final step before purchase. Choose a clean, trustworthy banner that doesn't distract from the checkout process.

Click Save Changes to apply the banner to your checkout pages.

Content Ideas:

Very minimal, clean imagery
Trust and security themed visuals
Subtle branded graphics
Same or simplified version of cart banner for consistency

Critical Considerations:

Don't distract: Checkout is not the time for promotional imagery
Build trust: Use professional, clean images
Maintain focus: The banner should fade into the background
Keep it simple: Less is more on checkout pages

What to Avoid:

Busy, cluttered images
Bright, attention-grabbing colors
Promotional "sale" imagery
Images with text that might confuse users
Anything that doesn't inspire trust

Cohesive Visual Experience

For the best customer experience, consider one of these approaches:

Use the same or very similar banner images across all shop pages for a unified brand experience.

Pros:

Strong brand consistency
Simpler to manage
Professional appearance

Cons:

Less page-specific customization
May seem repetitive

Approach 2: Progressive Journey

Use different but coordinated banners that reflect the customer's journey:

Shop: Inviting, browse-encouraging imagery
Search: Discovery and exploration themed
Cart: Excitement and anticipation
Checkout: Trust and security

Pros:

Tells a visual story
Matches customer intent at each stage
More engaging experience

Cons:

More images to create/manage
Risk of inconsistent branding if not carefully planned

Approach 3: Minimal Checkout

Use branded banners for shop and search, but minimal/simple banners for cart and checkout to reduce distraction during purchase.

Pros:

Balances branding with conversion optimization
Reduces friction at critical conversion points
Professional and purposeful

Cons:

Requires creating multiple banner variations

Most successful stores use Approach 3: engaging banners for browsing, minimal banners for purchasing.

Image Specifications Deep Dive

Technical Requirements

Specification	Requirement
Width	1920px (minimum)
Height	1279px (minimum)
Aspect Ratio	~3:2 (landscape)
File Format	JPG, PNG, or WebP
Max File Size	5MB
Color Space	RGB
Resolution	72-150 DPI

Why These Dimensions?

1920px wide: Covers most desktop monitors (1920×1080 is standard HD)
1279px tall: Provides enough height for visual impact without pushing content too far down
Landscape ratio: Matches typical screen dimensions

Optimization Tips

Compress images: Use tools like TinyPNG or Squoosh to reduce file size without quality loss
Proper format: Use JPG for photos, PNG for graphics with transparency
Responsive design: Important elements should be centered for mobile cropping
Test on mobile: View on actual mobile devices to ensure proper cropping

Design Tools (Free)

Canva: User-friendly, templates available
Figma: Professional design tool with free tier
GIMP: Free Photoshop alternative
Photopea: Free online Photoshop-like editor

Stock Photo Sources (Free)

Pixabay: Available through E2C's image library
Unsplash: High-quality free photos
Pexels: Curated free stock photos
Burst by Shopify: E-commerce focused free images

Start with template: Use Canva's 1920×1279px custom size
Choose quality photo: Select a high-resolution image
Keep it simple: Don't overcrowd with text or elements
Brand colors: Incorporate your brand colors subtly
Test readability: Ensure any text is legible at various sizes

If you're not a designer, keep it simple. A high-quality product photo or relevant stock image works better than an over-designed amateur graphic.

Mobile Considerations

Banner images are automatically cropped and scaled for mobile devices. Keep these tips in mind:

Mobile-Safe Design

Center important content: Edges will be cropped on smaller screens
Avoid text: Text placed in images often becomes unreadable on mobile
Test across devices: View on various screen sizes
Portrait orientation: Mobile devices are typically held vertically

Mobile Performance

File size matters: Large images slow mobile loading significantly
Compress thoroughly: Mobile connections are often slower
Progressive loading: Images should load progressively for better UX
Consider WebP: Modern browsers support WebP format, which offers better compression

Common Questions

"Do I need different banners for each page?"

No, you can use the same banner across all shop pages. However, using different banners creates a more curated experience.

"Can I add text to my banner images?"

Yes, but be cautious:

Keep text centered (for mobile cropping)
Ensure high contrast for readability
Use large, bold fonts
Test on mobile devices thoroughly

"What if I don't have custom images?"

Use the image library! E2C provides pre-curated, royalty-free images perfect for getting started. You can always update them later with custom photography.

"How often should I update banners?"

Seasonal updates: Every 3-4 months for major seasons
Promotional changes: When running sales or special events
Brand refresh: Annually or when rebranding
Leave as-is: If your evergreen banners work well, don't change them just to change them