Common Customizations

Adding custom CSS

At times you might want to manually add custom CSS changes to District.  This is helpful if you need to modify text sizes, introduce new layout options, need to customize the appearance of 3rd party Shopify Apps, change the formatting of pages and more.

1. Open the Themes page of the Shopify admin
2. Click on the ••• button at the top right and select Edit HTML/CSS
   
3. Open the Assets/theme.scss.liquid file
4. As a best practice, you should add any custom CSS snippets to the very bottom of the file with comments explaining each change.  This way if you ever need to update to a more recent version of District you can easily copy and paste all your snippets over to the new version.
5. Save the changes

We strongly recommend that you backup and duplicate your published theme before making any code changes.  That way you can easily go back to a working version if anything goes wrong.

Add a drop-down menu to your navigation

With all of our themes, you can easily add a dropdown menu to your store's navigation menu. Each of the themes will handle the dropdown menu styling slightly different, the process to set one up is the same.

Creating Nested Drop Down Menus

District allows you to nest drop down menus to a second level.  To set it up you simply need to continue the process of matching the 2nd level menu title a link in the 1st dropdown menu.

Custom content

This is a more advanced section where you can add multiple content blocks to create a unique layout for your home page.  The custom content section is a great way to add a single video or large, full-width image to the home page.

Content Blocks

• Page - Choose a page that you set up in the Shopify admin to load directly in the section.
• Image - Upload an image that will either span the page's width (1180px) or the entire browser width. For best results, images should be at least 1180px wide or 1600px wide if you are using the full browser width option.
• Video - Paste in a video URL from YouTube or Vimeo to automatically embed a video on the homepage. You have the option of allowing this block to span the full browser width
• Rich Text - Add a title and rich text content block
• Button - Add a button label and link to set up a large styled button
• Custom HTML - Advanced feature to manually add HTML to the section. This should only be used if you are comfortable writing and editing HTML content.

Create a contact page

Every one of our Shopify themes gives you the option to easily add the built in contact form to your store.

1. From the Shopify admin, click Online Store and then Pages
2. Click Add Page
   
3. Give your page a title and add your page content.
4. To add the contact form, change the template type from page to page.contact.
   

Remove "Powered by Shopify"

Shopify requires all themes to include the "Powered by Shopify" link at the bottom of your shop.  You are more than welcome to manually remove the message from your store.  You can follow Shopify's customization guide to Edit footer.liquid.