How can i make a brand banner in dawn theme?

Store Design
, , , ,

Topic summary

A user seeks guidance on creating a brand banner in Shopify’s Dawn theme, sharing a screenshot of their desired outcome.

Three implementation approaches are suggested:

Option 1 - Using Built-in Sections:

  • Add a new section via the theme editor’s “+” button
  • Select “Image with text overlay” section
  • Customize with brand logo, tagline, and styling through section settings
  • Can be placed in homepage, header, or footer locations

Option 2 - Modifying Existing Elements:

  • Navigate to an existing section in the theme editor
  • Locate and edit specific elements (images, text blocks)
  • Adjust content, alignment, fonts, colors to represent the brand

Option 3 - Custom CSS Solution:

  • Access “Theme settings” → “Customize” tab
  • Scroll to “Additional CSS” section
  • Add custom CSS code for .brand-banner class
  • Example properties include background image, positioning, padding, and color styling

The discussion remains open with no follow-up from the original poster on which solution was attempted or successful.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Annotation 2023-05-18 105038.png
Annotation 2023-05-18 105038.png522×723 22.1 KB

2

Option 1: Adding a brand banner section to an existing template: 3. In the theme editor, navigate to the section where you want to add the brand banner (e.g., homepage, header, or footer).

  1. Click on the “+” button to add a new section.

  2. In the “Add section” dialog, scroll down and look for the “Image with text overlay” section. This section is commonly used to create a brand banner.

  3. Select the “Image with text overlay” section to add it to your chosen location.

  4. Customize the section by adding your brand logo, tagline, and any other relevant information. You can modify the image, text, and styling options in the section settings.

    Option 2: Customizing an existing section for a brand banner: 3. In the theme editor, navigate to the section you want to customize for the brand banner.

    1. Locate the specific element (e.g., image, text block) that you want to use for the brand banner.
    2. Edit the content and styling options of the element to represent your brand. You can typically modify the text, image, alignment, font, and colors.

    Option 3: Using a custom code solution: 3. In the theme editor, navigate to the “Customize” tab.

    1. Click on “Theme settings” at the bottom of the left sidebar.

    2. Scroll down to the “Additional CSS” section.

    3. Add custom CSS code to create your brand banner. For example:

      Option 3:
      Using a custom code solution: 3. In the theme editor, navigate to the “Customize” tab.

      1. Click on “Theme settings” at the bottom of the left sidebar.
      2. Scroll down to the “Additional CSS” section.
      3. Add custom CSS code to create your brand banner. For example:
.brand-banner {
  background-image: url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 20px;
  color: #ffffff;
  /* Add additional styles as desired */
}
​