Startup's theme settings


The  Theme settings tab, located to the right of the Sections tab, lets you make global changes to the look and feel of your store through components such as Currency, Typography, and Colors.

Colors

Virtually every color in Startup is customizable through labelled color selectors in this theme setting.

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. You can also add your own specific hex code to this editor.

Backgrounds

You can upload custom background images under  Backgrounds. Notice that you can upload an image for Main backgroundContrast background (which will display when "Contrast" is set as the style for a section, e.g. in a promotion bar), and Footer background. Note the recommended image sizes for each area.

Typography

Startup comes with dozens of hand-picked fonts for your store. Custom fonts can be set for your store’s Base text, Store title, Headings, Section titles, Captions, and Buttons by selecting Change under the respective category.

To add emphasis to certain sections of text, use the Choose style dropdown to set the text to Bold. You can also toggle on the option to Capitalize the text.

Breadcrumbs are a secondary navigation that show the current location of the visitor on your website.

You can show or hide breadcrumbs by checking the Show breadcrumbs option.

Product grid

The Product grid settings allow you to make global changes to the way users can view and interact with your products. This includes the details that are included in product listings (like vendor names), as well as the Stock level indicator, a feature that displays the remaining inventory count when it reaches a configured amount.

Social media

The Default social media sharing image allows you to assign a particular image that generally represents your store. This will display when customers share links to your storefront, but will yield to a more precise image in certain cases. For instance, if a product page is shared to social media, the main image assigned to the product will display, but if a Contact page without images is shared, it would bring in this Default social media sharing image to accompany the link.

ACCOUNTS

Startup supports social icons for Facebook, Twitter, Google+, Pinterest, Instagram, Vimeo, and YouTube. Simply enter in your account URL in the relevant Account field and the social icons will automatically appear in your sidebar. You can also enable your blog's RSS feed here.

SHARING

If you would like to enable share buttons on your products and posts, check the  Enable share buttons box in your social media 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 wherever the icon appears. Check out this article to   create your own.

Favicon configurations in Theme settings sidebar

Once you have an image you want to use, upload it by clicking Select image. If you have already uploaded the image you want to use, select the image from your media library. We recommend a 16px by 16px PNG file.

Currency

Shopify works in virtually every country and every currency. With Startup, 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'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 > Store currency

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 images that are above 1000px in width to be optimized for larger window or device screens.

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 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.



Back to top ↑