Common sections - Promotional, Header and Footer

District comes with three primary sections that are automatically included on the home page as well as all other pages of your store—promotional, header and footer. With the options, settings and blocks found in the promotional, header and footer sections you can set up store wide customizations.

Promotional

Add promotional content to your store using the announcement bar, sign up bar and popup content blocks. Each of the three content blocks that you can add to the promotional settings has options to customize the content as well as how it should appear on the page.

Section Settings

Show while scrolling - Checking this option allows any announcement or sign up bars set to the top to be fixed and "sticky" as you scroll down the page.

Announcement Bar

Add this content block for a standard promotional bar that can be used to promote free shipping, an upcoming sale or a store wide announcement.

Text - Add the short and direct text
Link - Add an optional link for the entire bar
Background and Text colors - Set the background and text color for the bar
Show for - Choose if the bar should appear for visitors on desktop, mobile or both
Size - Choose from the default and large size for the bar's text and padding
Placement - You have the ability to decide if the bar should appear at the top of the layout or locked to the bottom of the page
Hide after delay - Use this option to have the bar auto-hide after a set number of seconds

Sign Up Bar

Add this content block to capture a visitor's email address for email marketing. Captured emails are automatically added to your Shopify customer list.

Text - Add the short and direct text
Background, Accent and Text colors - Set the background, accent and text color for the bar
Show for - Choose if the bar should appear for visitors on desktop, mobile or both. Now that Google penalizes mobile websites that auto-trigger popups that block content, it is recommended to use the sign up bar for mobile.
Size - Choose from the default and large size for the bar's text and padding
Placement - You have the ability to decide if the bar should appear at the top of the layout or locked to the bottom of the page
Show email capture form - Shows a simple email address capture form. Email addresses will automatically be added to your Shopify customer list.
Only show on home page - Only turn on the bar for the home page
Only enable for visitors - If a customer has created and account on your shop and is logged in they will not see the sign up bar

Popup

Add a popup that is automatically shown when a visitor comes to your shop. We automatically set a browser cookie to prevent them from seeing the popup again when a customer closes the popup or adds their email. Now that Google penalizes mobile websites that use automatic popups to block content, we recommend only using this feature on the desktop mode. Captured emails will automatically be added to your Shopify customer list.

Heading - Set an optional title for the popup
Text - Add the short and direct text
Image - Upload an image to appear at the top of the popup. For best results use an image that is 400 x 200px.
Background, Accent and Text colors - Set the background, accent and text color for the bar
Show for - Choose if the bar should appear for visitors on desktop, mobile or both. Now that Google penalizes mobile websites that auto-trigger popups that block content, it is recommended to use the sign up bar for mobile.
Show popup after - Set a delay to determine when the visitor sees the popup
Only show on home page - Only turn on the bar for the home page
Only enable for visitors - If a customer has created and account on your shop and is logged in they will not see the sign up bar
Show popup again after - After a customer has closed out the popup, choose when they should see the popup again

For best results use a popup image that is 400 x 200px.

Header

Set up your store's primary header by uploading a logo, selecting the overall layout and customizing options for the size and scrolling.

Section Settings

Logo placement - Choose between a horizontal, left aligned layout with the logo on the left and navigation on the right OR a vertical, centered layout with the logo stacked above the navigation
Logo - Upload a high resolution logo image. For best results, upload a PNG image that is 2x as wide as the width that you set
Logo width (in pixels) - Add in a number to determin how wide the logo should appear in the header. If you want the logo to be 300px wide, simply type in 300
Menu - Choose the menu you want to use as your primary navigation menu. Learn how to set up menus and links in the Shopify admin.
Lock while scrolling - Choose if the top bar or the entire header should be "sticky" as you scroll down the browser. In order to keep things optimized for mobile customers, only the top bar will remain locked at mobile sizes.
Header size - By default District's header features margins and padding that is consistent with the rest of layout, however at times it makes sense to use a minimal header to reduce the margin and padding.
Expand top bar full width - Choose if the top bar (search, currency, cart button) should be limited to the 1180px site width or expand the the full browser width
Expand header full width - If you are using the left aligned logo placement option, you have the option for your logo and navigation to always be at the edges of the browser.

Footer

Customize the appears of your shop's footer and add additional content blocks to arrange menus, contact details, social media icons and an email signup.

Section Settings

Payment icons - Choose if the payment icons should be hidden, color or black and white. The icons show are determined by the payment settings you have set up for your shop. Currently Shopify is the one that inserts these icons, and they only provide a limited number of icon options. See the list of support icons.

Content Blocks

Add up to four content blocks to the footer.

Menu - Customize the title, text and choose from a menu you have set up in the Shopify admin. Learn how to set up menus and links in the Shopify admin.
Contact - Add a title, phone number, contact text/link (ideal for email addresses or links to a contact us page), your store's address and the option to show social icons. You can set up the social media icons in Settings > Social Media