The Theme settings tab (located to the right of the Sections tab) lets you make overall changes to the look and feel of your store, including typography, text, and background color, as well as links to your social media accounts.
Virtually every color in Empire is 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 left represents the color you've selected. You can also enter a specific color hex code in the bottom right corner if you wish. This is handy for matching colors across your store. For example, if you want to match your footer background to your buttons, you could copy the hex code from one over to the other.
Empire comes with a curated selection of hand-picked fonts for your store. Custom fonts can be set for your store’s Base text and Headings using the corresponding dropdown menus.
The settings here allow you to customize how customers view and select products across your entire store. You can:
- Show vendor. This will display the brand or supplier beneath the product title. You can add the brand to each product in the Products section of your Shopify admin.
- Enable recently viewed products. This will display what your customer has viewed along the way! Keep in mind this will show on both the collection pages and product pages.
- Enable sale badges. These act as virtual “sale stickers” on products that have been marked down. Empire includes three different sale badge styles, allowing merchants to display a percentage off, a dollar amount, or a simple, classic “sale” badge. You can customize the look of these sale badges from the Sale badge style dropdown below.
- Enable product reviews and ratings. This will add star ratings to your products, but you must first install Shopify's Product Reviews app to your store (we've linked to it from that "?" help-out link in the theme editor).
- Enable social sharing. You can control which social networks are featured as sharing options from the Social media accounts area of the Theme settings.
- Enable cart redirection. As explained in the theme editor, enabling this option will automatically send users to the cart page after adding a product to their cart (as opposed to keeping them on their current page).
- Slideshow aspect ratio. This setting lets you control the width to height ratio on the Product Page where the images display. This can help keep them more consistent to browse through if the images are uploaded with varying ratios.
The settings under Product Grid specifically allow you to control the presentation of your products where they display in grids, like on your collection pages. You can:
- Emphasize price. As explained in the theme editor, "Emphasizing the price will show the product's price above the title" (as opposed to below it, as is standard for the theme). It also enlarges the price.
- Adjust the Product aspect ratio. This refers to the proportional relationship between a product image's width and its height. With Empire, you can select cropped or uncropped versions of your related product images in the following aspect ratios: Natural, Square, Cropped or Tall.
PRODUCT GRID BUTTONS
Here you can customize the buttons that appear within your product grids!
- Show "Quick look" button. By enabling quick look on your theme, you'll allow customers to view and select products without leaving the page they're browsing, creating a fast and seamless shopping experience.
- Show "Add to cart" button. By enabling this setting, you'll display the add-to-cart button right on your collection pages, reducing the number of steps to purchase (customers won't have to first click through to the product page).
Empire supports social icons for Facebook, Twitter, Google+, Pinterest, Instagram, Tumblr, Vimeo, YouTube, and the old faithful, email.
The links to your accounts will display in your footer, but only if you have added a Social accounts block to your footer under Footer > Content.
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 under the Favicon setting of the theme editor. You can also select an image from your media library. We recommend a 32px by 32px .png file.
Shopify works in virtually every country and currency. With Empire, you can cater to international customers with a currency converter that displays as a dropdown menu in the header of your store. This allows customers to dynamically update their prices throughout your shop.
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 CAD 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 can also set the Default currency on this page. This is the currency that will display when a user first lands on your site, i.e. before they have had a chance to use the currency selector. 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.
CONTINUE SHOPPING LINK
There's a "Continue Shopping" link on the 404 page and the Cart page as well. This setting lets you control where that link goes to and if you'd like to see the links on both pages.
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.
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.
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 upload a different image. 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.
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.
You can customize both the Headings and Body font of the checkout screen by selecting fonts from the appropriate dropdown menu.
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).