Theme settings for Narrative

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.

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

Cart drawer

You can customize the cart drawer settings for your online store:

  • Set your cart to the drawer style. A cart drawer slides out from the right side of the page, which means that customers can add products to the cart without leaving the product page.
  • Let customers add a note to their order. Customers can use cart notes to provide special instructions about how to prepare or deliver an order:

A text field labeled 'Special instructions for seller' that shows on the cart drawer. The field is displayed beside the order subtotal and the Checkout button.

To customize the cart drawer settings:

  1. Next to Narrative, click Customize.

  2. Click Theme settings.

  3. Click Cart drawer.

  4. Set your cart to the drawer style by checking Show cart drawer. If you leave this box unchecked, then you use a full-page cart.

  5. Add a notes field to your cart drawer by checking Show cart note.

  6. Click Save.

Social

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 Narrative, click Customize.

  2. Click Theme settings.

  3. Click Social.

  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 Social sharing 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 Narrative is 32 x 32px.

To upload a favicon:

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

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 see your changes as you apply them, go to your checkout page in the theme editor.

To access checkout page settings:

  1. Click Customize .

  2. Click the Theme settings tab.

  3. Click Checkout.

To add a banner image:

  • In the Banner 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 a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  1. In the Logo 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.
  2. From the Position list, select where you want the image to display, either to the right, left, or center.

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

To change the background of the checkout page:

You can display background image on your checkout page, or you can choose a background color. For background images, the image will display in a grid pattern.

  1. In the Main content area 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 a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
    • Click the Background color swatch to select a new color from a palette.
  2. From the Form fields list, select whether fields will be white or transparent.

To change the background of the Order Summary page:

  1. In the Order summary 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 a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
    • Click the Background color swatch to select a new color from a palette.

To set font options:

  • In the Typography area, select the font to use for heading and body text from the lists.

To set color options:

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

Change 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