Reach's theme settings

The Theme settings tab lets you make general changes to the look of your store. The settings categories include Colors, Typography, Embellishments, Products, Search, Social Media, Favicon, Currency, and Checkout.

Colors

Many color settings in Reach are customizable, with clear self-explanatory names in the settings. Click on a swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors.


The checkered box on the left signifies "transparent," while the box to the right represents the color you've selected. You can also enter a specific color hex code in the bottom right corner if you wish (e.g. #ff4000). This is handy for matching precise colors across your store. For instance, if you want to match your footer background to your buttons, you could copy the hex code from the former and place it in the field for the latter.

Typography

Reach comes with a curated selection of hand-picked fonts for your store. Custom fonts can be set for your store’s Primary font (which covers buttons, captions, and headings) and Secondary font (which covers the body text, navigation, and forms) by using the corresponding drop-down menus.

Embellishments

Reach has many customizable embellishments to enhance your brand and customer's experience

Edge styles - The edges of product images, buttons, forms, and notifications can be customized by selecting one of the four styles: Pill, Soft round, Cornered, or None.

Animation - Reach has several immersive animations to choose from: Slide, Slow, Bouncy, Easy, Fast, Sticky, or None.

These animations allow you to customize how pieces move on your site, such as the homepage slideshow, opening and closing the story, and opening and closing the search bar and mini cart in the header.

Note: If you change the animation style in the editor, you must hit 'Save' first. 

Icon style - Choose from three styles for your header icons (Story, Cart, and Search icon) to match your branding. The styles are Thick, Drawn, and Thin.

Patterns - Both playful and engaging, Reach shows small patterned icons throughout the site. They appear in product grids, between blog posts on the blog page, in the footer, between Tweets in the Twitter feed, behind the Newsletter sign-up field, on contact forms and static page content, and between features in the Feature list section. Choose your preferred pattern from the Pattern drop-down, or upload a custom pattern. If you're uploading your own pattern image, we recommend using a 120px x 80px .PNG image.

Products

The settings here allow you to customize how customers view and select products across your entire store. You can:

  • Enable product quickshop, which allows customers to navigate quickly to a product and browse images, variants, and add products to the cart without having to leave the collection page.
  • Choose the Product gallery placement on product pages, quickshop, and the featured product on the home page to be on the Left or Right.
  • Adjust the Product aspect ratio. This setting refers to the proportional relationship between a product image's width and its height. With Reach, you can select cropped or uncropped versions of your product images in the following aspect ratios: NaturalSquareShort, or Tall. This setting affects product images on the collection page, product page, featured product section, featured collections and collection list, search results page, and related products.
  • Show social sharing buttons. This setting will show small social media icons on the product page under the 'Add to cart' button on the product and quickshop pages. Customers can click on the icons to share your product on social media platforms such as Facebook, Twitter, Google+, and Pinterest.

Social media accounts

Reach supports social icons for Facebook, Twitter, Google+, Pinterest, Instagram, Tumblr, Vimeo, and YouTube. You can also enable your blog's RSS feed and add your contact email here.

The links to your accounts will display in your footer, but only  if you have enabled the Rich text block and checked the Enable social links box in your Footer settings. 

Favicon

A favicon (also known as a  website icon, tab icon, or bookmark icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears. There are a whole bunch of sites that can help you generate a favicon for your store, or you can   create  your own.

Once you have an image you want to use, upload it or select an image from your media library through the Favicon setting of the theme editor. This image should be no larger than 32 x 32px  and saved in a .PNG format.

Currency

Shopify works in virtually every country and with just about every currency. With Reach, you can cater to international customers with an automatic currency converter. This converter displays as a drop-down menu in the header or navigation drawer of your store and allows customers to dynamically adjust the prices to their selected currency.

After enabling the converter by checking  Enable currency conversion, you can choose which currencies are supported and how they're displayed.

Under  Format, you can choose whether or not to display the currency acronym on product and collection pages (e.g. $10.00 USD vs. $10.00).

Under  Supported currencies, you can select which currencies you want to allow users to display when browsing your store. Be sure to use the country's  ISO currency code, and separate each with a space. Note that exchange rates used by Shopify are refreshed twice a day based on rates at XE.com.

You'll also set the   Default currency in these settings. This is the currency that will display when a user first lands on your site, before they have had a chance to use the currency customizer. This is different from your store's Operating currency, which is the currency you use to process orders. You can set your operating currency in the Shopify admin under Settings>General>Standards and formats.

Checkout

Under the Checkout section of the theme editor, you can add custom banner images, logos, and backgrounds, as well as customize the fonts and colors used throughout the checkout process.

BANNER

The banner is the top section of the checkout screen where your store name appears. By default, it is transparent (or whatever color your store’s background is) however you can customize it by uploading a custom  Background image. We recommend uploading an 1000 x 400px image.

LOGO

If you want to add your store’s logo to the checkout page, simply upload a  Custom image. You can use your storefront logo or you can upload a different one instead. You can also define the Position and Logo size by making a selection from the bottom two menus.

MAIN CONTENT AREA

The main content area is the left side of the checkout screen where a user inputs their email and shipping address. If you’d like to use a custom background here, upload an image or use the color picker to select a  Background color. You also have two options for the color of the Form fields—white or transparent.

ORDER SUMMARY

The order summary is the right side of the checkout screen where customers can review the details of their order. You can either upload an image or use the color picker to select a  Background color.

TYPOGRAPHY

You can customize both the  Headings and Body font of the checkout screen by selecting fonts from the appropriate drop-down menu.

COLORS

You can customize the colors that appear on the checkout page under  Colors. You can see which areas correspond to each section (Accents, Buttons, and Errors) by watching how changes are processed in the preview screen.

You can customize even more of the checkout experience from the Shopify admin ( Settings>Checkout).