Sections available in Dawn

In Dawn, you can add sections on any page. There a few default sections that appear on each page, such as the announcement bar, the header, and the footer.

Announcement bar

The announcement bar lets you communicate important information to your customers from any page. The section has no settings on its own, but you can customize up to 12 different announcement blocks to display. You can add a link to an announcement bar to make it clickable and take customers to a specific page.

Announcement block

The settings for the announcement block in the announcement bar section
Setting Description
Text The announcement that you want to display to your customers.
Color scheme The color scheme to use for the announcement bar.
Link The link that you want customers to navigate to if they click the announcement bar.

The header displays on all pages in your theme.

Section settings

The settings for the heading section
Setting Description
Logo image The logo for your store.
Custom logo width The width of the logo. Can be any multiple of 10, from 50 px to 250 px. The default is 100 px.
Logo position on large screens

Where the logo displays in the header when a customer views the site on a large screen, such as a desktop.

  • Middle left - Displays the logo inline with the main menu, centered vertically and aligned to the left.
  • Top left - Displays the logo above the main menu, and aligns the logo and menu items to the left.
  • Middle left (default) - Displays the logo above the main menu, and aligns the logo and menu items in the center.
Menu The menu to use for your main menu.
Show separator line Displays a line to visually separate the header from the page's content.
Enable sticky header Redisplays the header when the customer scrolls back up. Disappears when the customer scrolls down.

The footer displays on all pages in your theme.

Section settings

The settings for the footer section
Setting Description
Color Scheme The background of the footer can be picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Show email signup Includes an email signup form where customers can subscribe to your newsletter and marketing.
Heading The title for the Show email signup form. If Show email signup isn't enabled, then this doesn't display.
Social media icons Displays icons for any social media platforms that you've entered a profile link for in your theme settings.
Enable country/region selector Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.
Enable language selector Adds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.
Show payment icons Displays the icons for all payment methods that are enabled on your store.
The settings for the menu block in the footer section
Setting Description
Heading The title for the block.
Menu The menu to display in the block.

Text block

The Text block can be used to highlight important information, such as store details, promotions, or contact information.

The settings for the text block in the footer section
Setting Description
Heading The title for the block.
Subtext The text to display in the block.

Image block

The settings for the image block in the footer section
Setting Description
Image The image to display in the block.
Image width Sets the width of the image. Can be any multiple of 5, from 50 px to 200 px. Default is 100 px.
Image alignment on large screen

Aligns the image within the block:

  • Left - Aligns the image to the left of the block.
  • Center (default) - Aligns the image to the center of the block.
  • Right - Aligns the image to the right of the block.

Blog posts

If you have a blog on your Shopify store, then you can use a Blog post section to highlight posts from that blog. Each blog post in the Blog posts section shows the first 55 words of a post's excerpt. If the blog post doesn't have an excerpt, then the first 30 words of the post are displayed instead.

Section settings

The settings for the blog posts section
Setting Description
Heading The title of the section.
Blog Which blog you want to display blog posts from. Defaults to the first blog alphabetically on your Blogs page.
Blog posts The number of blog posts that you want to display in the section. Maximum: 3 posts.
Show featured image Displays the featured image for the blog post. Suggested image aspect ratio: 2:3.
Show date Displays the date the blog post was created.
Show author Displays the author for the blog post.
Show secondary background Adjusts the background color to be based on the Text color.
Enable "View all" button if blog includes more blog posts than shown If the blog has more blog posts than set in the Blog post field, then this displays a "View all" button that takes the customers to the blog's page.

Select a blog

  1. In your theme editor, click the title of the blog posts section.
  2. In the Blog section, click Change.
  3. Select the blog.
  4. Click Select, and then click Save

Collage

You can create a collage of videos, images, products, and collections. Each Collage section contains three blocks. By default, the section contains a video, product, and collection block.

To create a collage of more than three blocks, add additional collage sections below the first and don't include a Heading value to the lower collage sections. The collage sections will appear to flow together as a single section.

Section settings

The settings for the collage section
Setting Description
Heading The title of the section.
Desktop layout

How the blocks display on desktop.

  • Left large block (default) - The first block in the section displays on the left and larger than any other blocks.
  • Right large block - The last block in the section displays on the right and larger than any other block.
  • Mobile layout layout

    How the blocks display on mobile.

    • Collage - Displays the images in a collage layout:
      • If Left large block is enabled in Desktop layout, then the first block in the section displays on the top and larger than any other block.
      • If Right large block is enabled in Desktop layout, then the last block in the section displays on the bottom and larger than any other block.
    • Column - Displays the images all the same size and in a column.

    Video block

    The settings for the video block in the collage section
    Setting Description
    Cover image The image that displays before a customer plays the video.
    Link The YouTube or Vimeo link to the video. The video must be publicly available.
    Video alt text The alt text for the video. Describes the video for customers using screen readers.
    Add image padding Adds extra space needed to ensure that your image isn't cropped. To avoid image cropping, upload a Cover image with a 16:9 aspect ratio.

    Product block

    The settings for the product block in the collage section
    Setting Description
    Product The product that you want to display.
    Show secondary background Adjusts the background color to be based on the Text color.
    Show second image on hover When a customer hovers their cursor over the product image, displays the second product image if the product has one.
    Add image padding Adds extra space needed to ensure that your image isn't cropped. To avoid image cropping, upload product images with a 16:9 aspect ratio.

    Collection block

    The settings for the collection block in the collage section
    Setting Description
    Collection The collection that you want to display.
    Add image padding Adds extra space needed to ensure that your image isn't cropped. To avoid image cropping, upload product images with a 16:9 aspect ratio.
    Color scheme The background color of the collection block section. Can be picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse.

    Image block

    The settings for the image block in the collage section
    Setting Description
    Image The image that you want to display.
    Add image padding Adds extra space needed to ensure that your image isn't cropped. To avoid image cropping, upload product images with a 16:9 aspect ratio.
    Color scheme The background color of the image block. Can be picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse.

    Collection list

    You can add a list of collections that you want to highlight. You can add up to 16 collection blocks to a collection list.

    Section settings

    The settings for the collection list section
    Setting Description
    Heading The title of the section
    Image ratio The image ratio for the featured images of the collections:
    • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Portrait - Crops the images to use a 2:3 ratio.
    • Square (default) - Crops the images to use a 1:1 ratio.
    Color scheme The background color of the collection list section and image padding. Can be picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
    Enable swipe on mobile Changes the mobile display from a column to a row, where customers can swipe sideways to see more collection blocks.
    Add image padding Adds extra space needed to ensure that your image isn't cropped. To avoid image cropping, upload product images with a 16:9 aspect ratio.
    Enable "View all" button if list includes more collections than shown If the collection list has more collections than set in the Maximum collections to show field, then this displays a "View all" button that takes the customers to the list of collections.

    Choose collections

    1. From your theme editor, click the Collection block that you want to add a collection to.
    2. Click Select collection.
    3. Click a collection, and then click Select.

    Contact form

    Your contact form sends all submissions to your store's Sender email address. You can change the sender email address in the General settings of your Shopify admin.

    The form has the following fields:

    • Name
    • Email (required)
    • Phone number
    • Comment

    The contact form uses the following color scheme:

    • The background color is the color of Background 1.
    • The text and text field outline colors are the color of Text.
    • The "send" button color is the color of Accent 1.

    Custom Liquid

    You can add your own Liquid code to create a custom section.

    • Add app snippets provided in the instructions from your downloaded apps to easily introduce apps to your pages.
    • Add custom Liquid code directly in the editor.

    Email signup

    You can add a section where customers can enter their email address and subscribe to your newsletter or marketing. When a customer subscribes, a customer account is created in your Shopify admin.

    The section comes with three default blocks:

    • Heading
    • Subheading
    • Email form

    Section settings

    The settings for the email signup section
    Setting Description
    Color scheme The background color of the email signup section. Can be picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
    Make section full width Makes the section the full width of the browser window.

    Heading block

    The settings for the heading block in the collection list section
    Setting Description
    Heading The title for the section.

    Subheading block

    The settings for the subheading block in the collection list section
    Setting Description
    Description The description for the section.

    Email form

    The email form block displays a field where a customer can enter an email address to sign up for your marketing. The block has no customizable settings.

    You can add a section that features a specific product.

    Section settings

    The settings for the featured product section
    Setting Description
    Product The product that you want to feature in the section.
    Show secondary background Displays the featured product on your secondary background color.
    Enable video looping Allows the video to be played again. Customers must click to start the replay.

    Section blocks

    In Dawn, you can add the following blocks in your Featured product section.

    The blocks available in the featured product section
    Block Settings
    Text Enter text for your featured product:
    • Text: Accepts text or dynamic source.
    • Text style: Choose between Body, Subtitle, or Uppercase.
    Title This block has no customizable settings.
    Price This block has no customizable settings.
    Variant picker Choose between buttons or a drop-down menu.
    Quantity selector This block has no customizable settings.
    Show dynamic checkout buttons Displays any dynamic checkout options that you've enabled in your Payments settings.
    Share Clickable text that allows customers to share the product to their social media.
    Product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.
    Custom Liquid Add custom Liquid or HTML code.

    You can add a section that displays products in one collection.

    Section settings

    The settings for the featured collection section
    Setting Description
    Heading The title of the section.
    Collection Which collection you want to display products from.
    Maximum products to show The number of products from the collection to display. Must be an even number. Minimum: 2. Maximum: 12.
    Enable "View all" button if collection has more products than shown If the collection has more products than set in the Maximum products to show field, then this displays a "View all" button that takes the customers to the collections page.
    Enable swipe on mobile Changes the mobile display from a column to a row, where customers can swipe sideways to see more products.
    Image ratio The image ratio for the product images:
    • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
    • Portrait - Crops the images to use a 2:3 ratio.
    • Square - Crops the images to use a 1:1 ratio.
    Show second image on hover When the customer hovers their cursor over the product image, displays the second product image if the product has one.
    Add padding Adds padding to the image to ensure that your image isn't cropped.
    Show image border Adds a thin border to the product images.
    Show vendor Displays the vendors of the products.
    Show product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.

    Image banner

    The image banner section supports one or two images, and a text box with buttons. If two images are used, then they are displayed side by side on desktop. On mobile, you can choose whether the images display side by side or in a column.

    On desktop, the text box partially covers the image. On mobile, the text box displays below the image.

    Section settings

    The settings for the image banner section
    Setting Description
    First image The main image for the banner. If two images are added to the section, then this image displays on either the left or the top, depending on whether the customer is on desktop or mobile.
    Second image The secondary image for the banner. If two images are added to the section, then this image displays on either the right or the bottom, depending on whether the customer is on desktop or mobile.
    Adapt section height to first image size Sets the height of the section to the height of the first image. On mobile, both images adjust to the height of the first image.
    Show text box on desktop Displays a text box over the banner image for customers shopping from a desktop computer.
    Desktop text position

    The position of the text box over the image when viewed on desktop.

    • Top - Displays the text box at the top of the image.
    • Center - Displays the text box at the center of the image.
    • Bottom - Displays the text box at the bottom of the image.

    The text box always displays centered horizonally.

    Image overlay opacity Dims the banner images with an overlay. Use the slider to set the opacity of the overlay. Defaults to 0%.
    Color scheme The background color of the image banner section and image padding. Can be picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse. The color scheme selected is visible only when the Show text box on desktop option is selected.
    Stack images on mobile If two images are added to the section, then displays the images in a column instead of side by side.
    Show text below images Displays text below images on mobile.

    Heading block

    The settings for the heading block in the image banner section
    Setting Description
    Heading Large text for the title of the text box.
    Heading size Changes the size of the heading text. Choose between medium and large.

    Text block

    The settings for the text block in the image banner section
    Setting Description
    Description Displays paragraph-style text.

    Button block

    The settings for the button block in the image banner section
    Setting Description
    First button label The text that displays on the first button.
    First button link The URL that you want the first button to link to.
    Use outline button style Adjusts the button styling to be an outline of a button instead of having a solid background.
    Second button label The text that displays on the second button.
    Second button link The URL that you want the second button to link to.
    Use outline button style Adjusts the button styling to be an outline of a button instead of having a solid background.

    Image with text

    You can add a section that contains an image and a text block with an optional button to link customers to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

    Section settings

    The settings for the image with text section
    Setting Description
    Image The image for the section.
    Image ratio The image ratio for the image:
    • Adapt to image - Uses the aspect ratio of the image. This prevents the image from being croppped.
    • Portrait - Crops the image to use a 2:3 ratio.
    • Square - Crops the image to use a 1:1 ratio.
    Color scheme The background color of the image with text and image padding. Can be picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
    Desktop layout The layout for the section on desktop:
    • Image first - Displays the image on the left.
    • Text first - Displays the text on the left.

    Heading block

    The settings for the heading block in the image with text section
    Setting Description
    Heading Large text for the title of the section.

    Text block

    The settings for the text block in the image with text section
    Setting Description
    Description Displays paragraph-style text in the text section.

    Button block

    The settings for the button block in the image with text section
    Setting Description
    Button label The text that displays on the button.
    Button link The URL that you want the button to link to.

    Multicolumn

    You can use the mulitcolumn section to display content in a column layout, and add a button below the columns to take the customer to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or provide a review.

    Section settings

    The settings for the multicolumn section
    Setting Description
    Heading The title of the section.
    Image width

    The width of images added to the columns.

    • Full width of column - The width of the image is the full size of the column.
    • Half width of column - The width of the image is half the size of the column.
    • One-third width of column - The width of the image is a third of the size of the column.
    Image ratio

    The image ratio for the image:

    • Adapt to image - Uses the aspect ratio of the image. This prevents the image from being croppped.
    • Portrait - Crops the image to use a 2:3 ratio.
    • Square - Crops the image to use a 1:1 ratio.
    • Circle - Crops the image to display in a circle
    Column alignment

    The alignment of the images and text within the columns:

    • Left (default) - Aligns the images and text to the left.
    • Center - Aligns the images and text in the center.
    Secondary background

    Adjusts the styling for the section based on the background:

    • None - The column and section background stays the color of Background 1 and the columns have no padding.
    • Show as column background - The background for the columns is the opaque color of the text and adds padding to the columns.
    • Show as section background - The background for the section is the opaque color of the text, the background for the columns is Background 1, and padding is added to the columns.
    Button label The text that displays on the button.
    Button link The URL that you want the button to link to.
    Enable swipe on mobile Changes the mobile display from a column to a row, where customers can swipe sideways to see more column blocks.

    Column block

    You can have a maximum of 12 columns in one section. If you have one, two, or three column blocks, then they display in one row on desktop. If you have four or more column blocks, then they display in a layout of two columns. On mobile, the column blocks dislpay in a single column, unless Enable swipe on mobile is enabled.

    The settings for the column block in the multicolumn section
    Setting Description
    Image The image that you want to display.
    Heading The title of the column.
    Description The paragraph text in the column.

    Page

    You can choose to display the content of a custom page in a section. This brings the entire content of the page into the section, but doesn't bring any Liquid code from any template.

    The section's color scheme uses the following settings:

    • By default, text is the color of Text. Any specific styling that's applied to text on the page is brought to the section.
    • Hyperlinks are the color of Accent 1.

    Section settings

    The settings for the page section
    Setting Description
    Page The page from your online store that you want to display.

    Rich text

    You can add a rich text section with a header, paragraph content, and a button to link customers to a new page.

    Section settings

    The settings for the rich text section
    Setting Description
    Color scheme The background of the rich text section. Can be picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
    Make section full width Sections are full width by default.

    Heading block

    The settings for the heading block in the rich text section
    Setting Description
    Heading The title of the section.
    Heading font size

    The size of the heading text:

    • Small
    • Medium
    • Large

    Text block

    The Text block is a good way to share information about your brand with your customers. You can describe the benefits of your products, make announcements, welcome customers to your store, or talk about your brand values.

    The settings for the text block in the rich text section
    Setting Description
    Description Paragraph-style text for the main content of the section.

    Button block

    The settings for the button block in the rich text section
    Setting Description
    Button label The text that displays on the button.
    Button link The URL that you want the button to link to.
    Use outline button style Adjusts the button styling to be an outline of a button instead of having a solid background.

    Video

    You can add a video section to embed a video from YouTube or Vimeo on a page in your store.

    Section settings

    The settings for the video section
    Setting Description
    Heading The title of the section.
    Cover image The image that displays before a customer plays the video.
    URL The YouTube or Vimeo link to the video. The video must be publicly available.
    Video alt text The alt text for the video.
    Make section full width Removes the default padding and makes the section the full width of the page.

    Ready to start selling with Shopify?

    Try it free