Vogue's general settings

Color

Virtually every color in Vogue is customizable, with clear self-explanatory names and descriptions in the theme settings. The colors are organized into four categories:  GeneralSidebar and alternate headerProduct listings, and Collection colors.

Vogue allows you to assign a specific color to each of your collections, which will display wherever a collection is featured, as well as on the collections page. If you do not assign a unique color to each collection, the default collection color will display (you can customize this too).

Click on the swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors.

shopify-color-picker

The box on the right displays the current color, the one in the middle the color you're changing it to, and the checkered one on the right is transparent. You can also enter a specific color hex code in the bottom right corner if you wish.

Typography

Vogue comes with dozens of hand-picked fonts for your store. Fonts can be set for your store's  Body and Heading font using the corresponding dropdown menu.

To add emphasis to the heading font, use the Style drop-down to set the style to Bold.

Layout

Under  Layout, you can define the amount of space that displays between images and other content blocks in your store. You can select either Small or Large or None from the Grid spacing drop down menu. Probably the best way of seeing the difference is to open a collections page and flip between them.

Currency

Shopify works in virtually every country and every currency. With Vogue, you can cater to international customers with a currency converter that displays as a dropdown menu in the sidebar of your store. This allows customers to dynamically update their prices throughout your shop.

screen-shot-2016-10-26-at-8-18-49-pm

After enabling the converter by checking  Enable currency conversion (it is enabled by default), 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'll 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 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.

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 under the  Favicon setting of the theme editor. You can also select an image from your media library. Note that whatever image you use will be scaled down to 32 x 32 px.

Social media

Vogue supports social icons for Facebook, Twitter, Google+, Pinterest, Instagram, Vimeo, YouTube and regular old email. Simply enter in your account URL in the relevant account field and the social icons will automatically appear in your sidebar navigation. You can also include an email link here.

social-icons

If you're wanting to enable social sharing for your products and posts, you'll enable those in the sections settings for both  Product pages and Blog posts.

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 clicking the box beside  Use custom background. We recommend uploading an 1000 x 400px image.

LOGO

If you want to add your store's logo to the checkout page, simply select an option from the dropdown  Image menu. You can use your  Storefront logo or you can upload a Custom image instead. You can also define the Position (left, center, right) and Size (small, medium, large) of your logo 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, simply click to enable it, then either 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. Enabling  Use custom background allows you to either upload an image or use the color picker to select a background color.

TYPOGRAPHY

You can customize both the  Heading and Body font of the checkout screen by selecting fonts from the appropriate dropdown 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 more of the checkout settings from the Shopify admin.