Skip to main content

Shopify

Recommended Shopify Image Sizes (2025)

Here’s a breakdown of optimal dimensions for various image types in your store:

Image Type Recommended Size Aspect Ratio Notes
Product Images 2048 x 2048 px 1:1 Best for zoom and clarity
Collection Images 1024 x 1024 px 1:1 Used in collection grids
Collection Banners 2800 x 1000 px 2.8:1 Full-width headers
Homepage Banners (Desktop) 1200 x 400 px 3:1 Horizontal layout
Homepage Banners (Mobile) 800 x 600 px 4:3 Optimized for mobile
Blog Featured Images 1920 x 1080 px 16:9 For blog headers
Blog Thumbnails 1200 x 800 px 3:2 For previews and listings
Logo Up to 450 x 250 px Varies Keep file size small for fast loading

Tips for Uploading to Your Main System

  • Use JPG or WebP formats for best balance of quality and load speed.
  • Compress images before uploading to avoid slowing down your site.
  • Maintain consistent aspect ratios to avoid cropping or distortion.
  • Avoid overly large files Shopify limits image uploads to 20 MB.

Selecting Your Theme

A Shopify online store theme is a customizable template that controls the look, layout, and functionality of your storefront. It defines how your products, pages, and navigation appear to customers across desktop and mobile.

Click on “Online Store” in the left-hand menu, then select “Themes.”
The Dawn theme is installed by default for new stores.
If you'd like to explore other themes, scroll down and click “Visit Theme Store” to browse free and paid options.

image.png   image.png

Customize your Store

To customize your store, click on "Customize" this will take you into the store editor.

image.png

Header

Announcement Bar 

The Announcement Bar in Shopify is a customizable banner that appears at the top of your online store, used to highlight important messages like promotions, shipping updates, or store news. It’s a simple but powerful tool to grab attention and guide customer behavior.

image.png

Commonly Used for:

  • “Free shipping on orders over $50”
  • “Holiday sale ends Sunday!”
  • “We’re currently experiencing shipping delays”
  • “New gift cards now available”

How to Add or Edit It

  1. Go to Online Store > Themes > Customize
  2. Select the Header or Announcement Bar section
  3. Enter your message, choose colors, and set visibility from the 

Announcement Bar Settings

image.png

Time to Next Announcement

  • Slider (e.g., 5 sec): Controls how long each announcement stays visible before switching to the next one (if you have multiple messages rotating).

Appearance

  • Section Width:
    • Page: Keeps the bar aligned with your page content width.
    • Full (selected): Stretches the bar across the entire screen width for maximum visibility.
  • Color Scheme: Choose a predefined color palette (e.g., Scheme 1) that matches your store’s branding.
  • Divider Thickness: Adds a horizontal line below the bar. The slider (e.g., 1 px) controls how thick that line is.

Padding

  • Top & Bottom (e.g., 15 px): Adds space above and below the announcement bar to control its vertical spacing. Useful for visual balance and readability.

Custom CSS

  • Expandable section where you can add custom styling rules (CSS) to fine tune the look, like font tweaks, animations, or responsive behavior.

You can delete this bar as well by hovering over "Announcement" and clicking on the Bin icon

image.png

Header Bar

The header bar is the top section of your store that displays your logo, navigation menu, search, and cart icons. It helps customers find key pages like Shop or Contact, return to the homepage, and access their cart. 

image.png

Header Menu Settings

image.png                   image.png

  • Position: Choose where your logo appears—Left, Center, or Right.

Menu

  • Position: Set the horizontal alignment of your navigation menu.
  • Row: Choose whether the menu appears on the Top or Bottom row of the header.

Customer Account

  • Visibility: Manage whether the customer account icon is shown. Note: legacy accounts are not supported.
  • Search Icon: Toggle visibility of the search icon.
  • Position: Align the icon to the Left or Right.
  • Row: Choose Top or Bottom placement within the header.

Localization

  • Country/Region: Toggle to show or hide country/region selector.
  • Flag: Toggle to display country flags.
  • Language Selector: Toggle to enable language switching.
  • Manage Countries/Languages: Access settings to configure available regions and languages.

Font Settings

  • Font: Select the font style used in the header.
  • Size: Choose the font size (e.g., 18px).
  • Position & Row: Control where the text appears—Left or Right, Top or Bottom.

Appearance

  • Width: Choose between “Page” (aligned with page content) or “Full” (spans entire screen).
  • Height: Select “Compact” for a slim header or “Standard” for a taller layout.

Color and Transparency Settings

These settings control the visual styling of your header and page backgrounds:

  • Color Scheme: Choose from predefined schemes (e.g., Scheme 1, Scheme 8, Inverse) to match your brand.
  • Bottom Row Scheme: Apply a separate color scheme to the lower portion of the header if supported.
  • Transparent Backgrounds:
  • Home Page: Toggle transparency for a clean, overlay-style header.
  • Product Page: Enable transparency to let product imagery shine through.
  • Collection Page: Combine transparency with color schemes for visual consistency.

Theme Settings

  • Custom CSS: Expand this section to apply advanced styling rules for full control over header appearance.



Logo

The Logo tab controls how your store’s logo appears in the header. This is a key branding element that helps customers recognize your business and navigate back to the homepage.

image.png

Logo Settings

image.png

  • Edit logo in theme settings:
    To change the logo image itself (upload, replace, or resize), go to your theme’s main settings panel.

Visibility

  • Hide logo on home page (toggle):
    If enabled, the logo will be hidden on the homepage but will still appear when the sticky header is active (e.g., during scrolling). Useful for minimalist designs or when the homepage already features a large logo elsewhere.

Desktop Padding

Controls the spacing around your logo on desktop devices:

  • Top / Bottom / Left / Right (px):
    Use sliders or input fields to fine-tune the logo’s placement.
  • Example: Increase top padding to lower the logo vertically
  • Set left/right padding to center or offset the logo horizontally

Position:
Choose where the logo appears within the header:

  • Left: Common for traditional layouts
  • Center: Ideal for minimalist or symmetrical designs
  • Right: Less common, but useful for specific branding styles

Best Practices

  • Use a high-resolution logo with a transparent background (PNG format recommended).
  • Keep the logo size proportionate to your header height for visual balance.
  • Ensure it’s clickable, most themes link the logo to your homepage by default.

Menu - Main

When you click on Menu > Main menu in Shopify’s theme editor, you're customizing how your store’s primary navigation menu looks and behaves across desktop and mobile. 

image.png

Main Menu Settings

image.png

  • Menu: Selects which navigation menu to display (e.g., “Main menu” from your Shopify Navigation settings).
  • Color scheme: Applies a predefined color palette to your menu (e.g., background, text, hover states).

Typography

  • Top level size: Controls the font size of your main menu items (e.g., Home, Shop, Contact).
  • Submenu text style: Sets the size or emphasis of dropdown items (e.g., bold, large).
  • Font: Chooses the font style for menu text (e.g., Subheading, Body).
  • Case: Toggles between default casing and uppercase for menu labels.

Submenu Feature

This section enhances dropdown menus with visual content:

  • Media type: Lets you display images or featured products within dropdowns.
    • “Featured products” pulls product images from linked collections.
  • Image ratio: Defines the shape of images (e.g., Portrait, Square).
  • Image corner radius: Adjusts how rounded the image corners are (0 px = sharp corners).

Mobile Layout

Controls how the menu behaves on mobile devices:

  • Navigation bar: Toggles a sticky top bar for mobile navigation.
  • Navigation bar color scheme: Sets the color palette for the mobile nav bar.
  • Accordion: Enables collapsible menu groups for easier mobile browsing.
  • Expand first group: Automatically opens the first menu group on mobile.
  • Dividers: Adds visual separators between menu items.

Divider

In Shopify theme settings, the divider refers to a thin horizontal line used to visually separate sections, often between the header and the rest of the page or within the announcement bar.

image.png

Divider Settings

image.png

Divider

  • Color Scheme:
    Select a predefined color palette (e.g., Scheme 1) that matches your store’s branding. This affects the divider’s color.
  • Width:
    • Page: Aligns the divider with your page content width.
    • Full: Stretches the divider across the entire screen for a bold, clean break.
  • Thickness:
    Adjusts how thick the line appears. For example, 2.5 px creates a medium weight divider, visible but not overpowering.
  • Length:
    Controls how much horizontal space the divider spans (e.g., 100% = full width). You can reduce this for a centered or stylized look.

Padding

  • Top & Bottom Padding:
    Adds vertical spacing above and below the divider (e.g., 16 px). This helps balance layout and prevent crowding.

Custom CSS

  • Expand this section to apply advanced styling rules—such as dashed lines, animations, or responsive behavior.

Add Section

The Add Section tool lets you insert new content blocks into your store’s pages, like your homepage, product pages, or custom templates. It’s a flexible way to build and organize your layout without editing code.

image.png

What You Can Add

  • Visual elements: Hero banners, slideshows, images, videos
  • Product displays: Featured collections, product grids, product cards
  • Text blocks: Headings, testimonials, rich text, FAQs
  • Functional tools: Announcement bars, dividers, custom Liquid, contact forms
  • Apps: If installed, app-based sections may appear here too

How to Use It

  1. In the theme editor, click “Add Section”
  2. Use the search bar or browse tabs like Sections and Apps
  3. Select a section (e.g., Divider, Featured Collection)
  4. Customize its content, layout, and styling using the right-hand panel
  5. Drag to reorder or remove as needed

Layout Tip
Sections are modular, each one can be added, removed, or repositioned independently. This makes it easy to test layouts, highlight seasonal content, or tailor pages to your business needs.

 

Template

Hero Image

A hero image in Shopify is the large, eye-catching banner at the top of your homepage that creates your store’s first impression. It’s often the first thing visitors see and plays a key role in setting the tone, showcasing your brand, and guiding users toward action.

image.png

 

Hero Settings

image.png       image.png

Step-by-Step: Add Your Hero Section

In the right preview panel, click directly on the Hero banner or use the sidebar to expand the Hero > Heading section.

Navigate to the Home Page

  • In the left sidebar, make sure you're editing the Home page
  • Scroll to find the Hero section — or click Add section and choose Hero if it’s not already there

Upload Media

    • Media 1: Upload your “first” logo image.
    • Media 2: Upload the "Second" logo image.
    • Set both media types to Image.

Configure Layout

    • Direction: Choose Vertical or Horizontal depending on how you want the images and text stacked.
    • Alignment: Set to Left, Center, or Right.
    • Position: Choose Bottom to anchor content lower in the section.
    • Gap: Set to 24 px.
    • Width: Select Full for edge-to-edge display.
    • Height: Choose Medium for balanced vertical space.
    • Paste your desired URL (e.g., product page or collection).
    • Toggle Open in new tab if needed.

Set Appearance

    • Color scheme: Use Scheme 6 (customizable in theme settings).
    • Media overlay: Leave off unless you want a semi-transparent layer over images.
    • Overlay color: Set to #00000003 for a subtle tint.
    • Overlay style: Choose Solid or Gradient.
    • Blurred reflection: Leave off unless you want a mirrored effect below images.

Adjust Padding

    • Top: Set to 100 px.
    • Bottom: Set to 72 px.

Optional: Add Custom CSS

  • Use this field to fine-tune styles (e.g., font size, button styling).

 

Heading

In Shopify’s Online Store > Theme > Customize view, the “Heading” under the Hero section in the Template refers to the main title text that appears inside your hero banner on the homepage.

image.png

Set Appearance

Background

  • Toggle Background ON to enable color behind the block
  • Background color: Set to #00000026 for a subtle translucent black
  • Corner radius: Use the slider to set 50 px for rounded corners

Padding

  • Adjust padding sliders:
  • Top: 0 px
  • Bottom: 0 px
  • Left: 0 px
  • Right: 0 px

These settings create a clean, edge-to-edge block with a soft background and rounded corners — ideal for overlaying text on images without clutter.

Save Your Changes

  • Click Save in the top right to apply the block styling

Back to top