Theme settings

In District's theme settings you will find options to customize the colors, typography, product grid, social media, currency and more.  Here is an overview of the settings found in each menu.

Colors

Use these color pickers to set the primary colors throughout the theme. At times we will use your selections to automatically generate variations by blending your colors. Additionally, some sections give you the option to manually set colors that overwrite these defaults

Primary

  • Text - Overall text color
  • Title - Used for titles throughout the layout
  • Background - Primary background color
  • Content box background - Use for the "add to cart" box on product pages and for the sidebars on collection and blog pages
  • Accent - Primary accent color for buttons and links
  • Show drop-shadows on boxes - Turn on a subtle drop-shadow on the add to cart box and sidebars
  • Show borders between sections - Turn on a subtle border shown between individual sections

Top Bar

  • Background - Set the background behind the top bar (search, currency, cart button)
  • Text - Set the text color on the top bar (search, currency, cart button)

Site Header

  • Title - If you do not upload a logo image, this sets the text color of your store title
  • Navigation - Sets the color of the navigation
  • Background - Apply an overall header background color
  • Accent - Sets the accent color for links and hover states in the header

Footer

  • Background - Primary footer background color
  • Text - Sets the color for text in the footer
  • Links - Sets the accent color used for links and buttons

Typography

Choose from a huge selection of free fonts from  Shopify's font library for the body (primary text), headings (titles) and navigation (header menu, buttons and small UI based text).

Favicon image

  • Image - Upload a favicon image that will be used for your shop's icon in the browser.  We recommend uploading a 32 x 32px PNG image.

Product Grid

  • Fit collection product images to ratio - Choose from auto detect, square (1:1), portrait (2:3) and landscape (4:3) options.
  • Automatically crop collection product images - Enable to improve the appearance of product images that are not the same consistent size.
  • Product columns to show on mobile - Across the entire shop choose if 1 or 2 products should be shown in a row for mobile devices.
  • Show product vendors - Checking this option will show the vendor name below each product image in a collection grid.
  • Show variant image on rollover - This option will automatically show the second product image when you roll over any product image in a collection grid. If you use this option, we recommend that all your product images should be the same size and ratio

Breadcrumbs

  • Show breadcrumbs - Choose from desktop only, desktop and mobile and hidden.

Cart

  • Stay on current page when an item is added to the cart - This option turns on the AJAX cart feature for the theme.
  • Icon - Choose from cart, bag and basket icons.

Social Media

Add URL links for each of your social media accounts.  Make sure you include the http:// or http:// part of the URL.  Currently we have icons set up for Twitter, Facebook, Instagram, Pinterest, Tumblr, YouTube, Snapchat, Vine, Spotify, Google Plus, Medium, and LinkedIn

  • Sharing - Turn on the social media sharing buttons for the following platforms: Facebook, Twitter, Pinterest, Google Plus, and Fancy.
  • Open graph - Manually add a default image that will be used when visitors share on social media.

Currency

To offer multiple currencies on your online store, you must first  edit your store's currency formatting.  This will give your customers the ability to preview your store's prices in their local currency. During the checkout process, Shopify will properly calculate the currency based on the latest currency exchange values.

  • Enable currency conversion - Even though prices are displayed in different currencies, orders will still be processed in your store's currency.
  • Format - Choose if the currency formatting should include the currency code
  • Supported currencies - Use the country's ISO currency code. Separate your currency codes with a space.
  • Default currency - Add the ISO currency code of the default currency

Checkout

The checkout options that appear in the general settings give you the ability to customize the Shopify controlled checkout pages and layout.  Since these options and colors exist entirely outside of the control of Shopify themes, you might need to reach out to  Shopify support if you have questions about customizing the checkout.

Still need help? Contact Us Contact Us