Theme settings for Debut

You can use theme settings to customize the colors and typography on your online store. You can also set up links to your social media accounts, edit your cart settings, and add a favicon.

Debut includes the following theme settings:

Colors

You can choose the colors for the different parts of your online store.

Customize your color settings

  1. Next to Debut, click Customize.

  2. Click Theme settings.

  3. Click Colors.

  4. For each type of content, click the color swatch to use the color picker. The Recently selected area shows colors that you have recently selected for your theme. The Currently used area shows colors that you are currently using in other parts of your theme.

    To set the color to transparent, click None.

  5. Click Save.

Typography

You can set the font style and size for the text on your online store.

Customize your typography settings

  1. Next to Debut, click Customize.

  2. Click Theme settings.

  3. Click Typography.

  4. For each type of text, click Change to use the font picker.

  5. Explore fonts by using the search field, or by clicking Load more.

    To see all of the available fonts, see Shopify's font library.

  6. Click the name of the font that you want to use.

  7. To change the font to a different style, such as bold or italic, click Regular. Next, click the style that you want to use, and then click Select.

  8. Click Save.

Debut includes predictive search, which shows product suggestions when customers start typing into the search field. Product suggestions can help customers articulate and refine their search queries, and provide new ways for them to explore an online store. They can also let customers quickly browse matches without having to leave their current page to see a separate list of search results.

To change predictive search settings:

  1. From your Shopify admin, go to Online Store > Themes.
  2. In the Debut section, click Customize.
  3. Click Theme settings.
  4. Click Search, and make the changes that you want:

    • Enable product suggestions - Enable or disable product suggestions.
    • Show vendor - Show or hide vendors in product suggestions.
    • Show price - Show or hide prices in product suggestions.
  5. Click Save.

To learn more about how product suggestions work, refer to Predictive search.

Social media

You can add social sharing buttons for your products and blog posts, and links to your social media accounts.

To customize the social media settings:

  1. Next to Debut, click Customize.

  2. Click Theme settings.

  3. Click Social media.

  4. To upload a social sharing image, in the Social sharing image area, click Select image or Explore free images.

  5. To add social sharing buttons to your products and blog posts, in the Sharing options area, check any or all of the checkboxes. You can add the following sharing buttons:

    • Share on Facebook
    • Tweet on Twitter
    • Pin on Pinterest (not available for blog post sharing)
  6. To add links to your social media accounts, in the Accounts area, enter the links to your accounts in the fields provided. Enter full links, such as https://instagram.com/shopify, or https://twitter.com/shopify.

    Links to your social media accounts show in the footer of your online store.

  7. Click Save.

Favicon

You can upload a favorites icon, or a "favicon", which can help brand your online store by displaying your logo in the following locations:

  • your web browser tab
  • your web browser's history
  • icons on your desktop
  • next to your online store name when it is bookmarked.

The best favicon image size for Debut is 32 x 32px.

To upload a favicon:

  1. In the Debut section, click Customize.

  2. Click the Theme settings tab.

  3. Click Favicon.

  4. In the Favicon image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  5. Click Save.

Add to cart notification

You can display a notification with a link to the cart page when customers add items to their cart.

A product page with a popup notification in the top right showing what item was just added to the cart

If this notification is disabled, then customers are taken directly to the cart page after adding an item to their cart.

To enable this notification:

  1. In the Debut section, click Customize.

  2. Click the Theme settings tab.

  3. Click Add to cart notification.

  4. Choose whether to enable the Show notification when item is added to cart setting.

  5. Click Save.

Checkout

You can customize your checkout page to include the following:

  • a custom image banner at the top of the page
  • your store logo
  • a background image or color in the main content area
  • custom text fonts and colors.

To view your changes as you apply them, go to your checkout page in the theme editor.

Accessing checkout page settings

  1. In the Debut section, click Customize.

  2. Click the Theme settings tab.

  3. Click Checkout.

Adding a banner image

  1. In the Banner area, select the Use custom background checkbox.

  2. Click Choose file to upload an image file.

  1. In the Logo area, select Custom from the Image drop-down menu.

  2. Click the Choose file link to upload an image file.

  3. From the Position drop-down menu, select where you want the image to display, either to the right, to the left, or in the center.

  4. From the Logo size list, select a logo size.

Customizing the main content area

  1. In the Main content area area, select the Use custom background checkbox.

  2. Do one of the following:

    • Click Choose file to upload an image file.
    • Click the Background color swatch to select a new color from a palette.
  3. From the Form fields drop-down menu, select whether fields will be white or transparent.

Customizing the Order Summary page

  1. In the Order summary area, select the Use custom background checkbox.

  2. Do one of the following:

    • Click Choose file to upload an image file.
    • Click the Background color swatch to select a new color from a palette.

Setting font options

  • In the Typography area, select the font to use for heading and body text from the drop-down menus.

Setting color options

  • In the Colors area, click the Accents, Buttons, or Errors color swatch to choose a new color from a palette.

Changeing the theme style

You can reset your theme's general settings to their default values. When you reset your theme's style, any changes you have made on the General settings tab will be lost, but you will not lose content such as text and images.

  1. Click the General settings tab.

  2. Click Change theme style.

  3. Click the button below Change theme style. The name of this button is typically the theme name.

  4. Click Change style.

Ready to start selling with Shopify?

Try it free