Overview

The App Design Customization section allows you to control the visual appearance of your mobile app and align it with your brand. In this area, you can customize key design elements such as colors, typography, images, layout sections, and preview how your app will look before publishing.

This feature helps you:

• Build a branded mobile app experience
• Keep your app visually consistent with your store
• Preview design changes before submission
• Improve customer experience with a polished interface

Accessing App Design Customization

To start customizing your app design:

1. Open the app in Shopify Admin and go to App Design
2. Select the design or theme you want to edit
3. Start customizing the available sections

Depending on your app setup, you may see multiple design areas such as:

• Home screen
• Product listing pages
• Product detail pages
• Collection pages
• Search
• Cart
• Navigation
• Branding

\

What You Can Customize

1. Typography

Typography settings let you adjust how text appears in the app.

You may be able to customize:

• Font family
• Heading style
• Body text style
• Font size
• Font weight

Use typography settings to ensure your app feels modern, readable, and aligned with your brand tone.

Best practice: Avoid using too many font styles. A clean and simple typography system creates a better mobile experience.

2. Images and Banners

Some sections allow you to upload or update visual assets such as:

• Hero banners
• Promotional images
• Collection banners
• Category thumbnails
• Icon images

Make sure your images are:

• High quality
• Properly cropped
• Optimized for mobile display
• Consistent in branding and tone

Best practice: Use clear, high-resolution images with minimal text so they display well across different device sizes.

3. Layout and Section Arrangement

Across all supported Screens (Pages), you can configure the display settings of different Sections. You can typically:

• Reorder sections
• Hide or show sections
• Edit section content
• Configure spacing or display style

Best practice: Place the most important content near the top of the screen to improve visibility and engagement.

4. Buttons and Interactive Elements

You can customize the look of action elements such as:

• Primary buttons
• Secondary buttons
• Call-to-action sections
• Navigation tabs
• Icons

This helps ensure actions like Shop Now, Add to Cart, and View Collection are visually clear and easy to use.

Best practice: Use one clear primary button style across the app to keep the experience consistent.