Debut

Debut is a flexible theme that is suitable for all stores, regardless of inventory size. With Debut you can quickly set up a store and start selling; Debut looks polished without any theme customizations.

Example online store using Debut

Debut is ideal if you want to:

  • start selling right away, without the need to make a lot of customizations to your theme
  • make sure your store displays well on tablets and smart phones
  • easily rearrange your store layout, and see your changes in real time.

Theme editor

Use the theme editor to customize your theme. The theme editor toolbar is divided into Sections and Theme settings.

The theme editor toolbar showing Sections and Theme settings

You can use sections to modify the content and layout of the different pages on your store. You can use theme settings to customize your store's fonts and colors, and make changes to your social media links and checkout settings.

Sections

Sections are customizable blocks of content that determine the layout of your online store. Each theme includes static sections and dynamic sections.

Static sections

Static sections are always in specific locations on your online store. You can edit static sections, but you can't rearrange or remove them. Each type of page on your online store includes different static sections.

Debut includes the following static sections:

Dynamic sections

You can add, rearrange, and remove dynamic sections to customize the layout of your home page. Each theme has a unique set of dynamic sections to choose from.

Debut includes the following dynamic sections:

In the header section, you can edit the content that appears at the top of every page in your store. You can add a logo image, choose which menu to show, and create an announcement message.

The header bar on website called John's Apparel showing the main menu items, a search icon, and a cart icon

To customize the header section:

  1. Find Debut and click Customize.

  2. Click Sections.

  3. Click Header.

  4. To set the alignment of your logo, in the Logo alignment area, select Left or Centered. If you don't add a logo image, then your store name in text shows instead. You can change your store name on the General settings page in the admin.

  5. To add a logo, in the Logo image area, click Select image. To upload an image from your computer, click Upload. To use a free stock image from Burst, click Free images.

  6. To change the size of your logo, adjust the Custom logo width slider to the width of your choice. Adjusting the logo width won't distort your logo image.

  7. To choose which menu to show in the header, in the Menu area, click Change. Choose an existing menu, or create a new one by clicking Create menu. If you don't want to show a menu in your header, then click Remove.

  8. To show an announcement message at the top of the page, do the following steps:

    1. In the Announcement bar area, check Show announcement.
    2. To show the announcement on only the home page, check Home page only. Otherwise, the announcement shows on every page in your store.
    3. Enter the text for your announcement in the Text field.
    4. To add a link to your announcement, enter the URL in the Link field.
    5. To change the color of the announcement bar background, click on the Bar color swatch and choose a color.
    6. To change the color of the announcement text, click on the Text color swatch and choose a color.
  9. Click Save.

Your store's footer is the content that always appears at the bottom of every page in your store:

With Debut, you can:

  • add a second menu
  • add a newsletter signup link
  • show or hide payment icons that show the payment providers you accept
  • show or hide a "Powered by Shopify" statement.

To customize the footer section:

  1. Click the Sections tab.

  2. Click the Footer section.

  3. From the Primary menu list, select the menu you want to display. By default, the Footer menu is selected, which includes "Search", "About Us", and "Log in".

  4. From the Additional menu list, select a second menu to display.

  5. To display a link to subscribe to your newsletter, check Show newsletter signup.

  6. To display payment provider icons, such as Mastercard or Paypal, check Show payment icons.

  7. Click Save.

Product pages

In the Product pages section, you can add or remove the following elements:

  • A quantity selector
  • Variant labels
  • The product brand or vendor
  • Image zoom
  • A dynamic checkout button
  • Social sharing buttons

You can also set the size of your images.

To edit the settings for product pages:

  1. From the top-bar drop-down menu, select Product pages.

  2. Click Sections.

  3. Click Product pages.

  4. To set the size of your images, select and image size from the Image size drop-down menu.

  5. To show a quantity selector, check Show quantity selector.

  6. To show variant labels, such as "Size" and "Color", check Show variant labels. The variant labels that show are based on the variant option names for the product.

  7. To show the product brand or vendor, check Show vendor. For a brand or vendor to show, you need to add a vendor to the product.

  8. To let customers zoom in by mousing over the product image, check Enable image zoom.

  9. To show a dynamic checkout button, check Show dynamic checkout button.

  10. To show social sharing buttons, check Show social sharing buttons.

  11. Click Save.

Collection pages

You can set up your collection pages to allow your customers to filter and sort through products in the collection. You can choose a collection layout, either a grid or a list, and choose how many products to display.

To set the layout of your collection pages:

  1. Navigate to a collection page in the theme editor.

  2. Click the Sections tab.

  3. Click Collection pages.

  4. From the Layout list, select either Grid or List.

  5. Select the number of products per row, and number of rows per page (if you selected the grid style) from the lists.

  6. If you want to display a collection image at the top of the page, then check Show collection image.

  7. If you want to show the product brand or vendor, then check Show product vendors.

  8. Check Enable sorting to display a sorting menu.

  9. Check Enable tag filtering to let your customers filter the collection by product tag.

  10. Click Save.

Collections list page

The collections list page displays a grid of all your product collections. Your customers can use the collections list page to quickly browse through your collections to find the collection they want to browse. In Debut, the collection list page is a top-level link in the header menu:

Debut home page with Catalog link highlighted in top menu

You can show thumbnails of all your collections in a grid pattern, or you can choose to show a selected collection. You can also choose how to sort collections on the page.

To set the layout of your collection list page:

  1. Navigate to your collection list page by clicking the top-level collection menu item.

  2. Click the Sections tab.

  3. Click Collections list page.

  4. Do one of the following:

    1. To show thumbnails of all your collections in a grid pattern, select All.
    2. To show one collection on the collections list page, select Selected.
  5. If you selected All in the previous step, then do the following:

    1. Choose a sorting option from the Sort collections by list.
    2. Select the number of collections per row from the Collections per row list.
  6. Click Save.

Blog pages

With Debut, you can list your blog postings, or display them in a grid. If you have more than one blog post author, then you can display the author name for each blog post. You can also display the date each blog post was published.

  1. Navigate to your blog page in the preview area of the theme editor.

  2. Click Sections.

  3. Click Blog pages.

  4. From the Layout list, select whether to display blog posts in a list or a grid.

  5. Check Show author to display the author's name.

  6. Check Show date to display the date the blog post was published.

  7. Click Save.

Cart page

With Debut, you can let your customers add notes to their order on the cart page:

  1. Navigate to your cart page in the theme editor by adding a product to the cart.

  2. Click the Sections tab.

  3. Click Cart page.

  4. Check Enable cart notes.

  5. Click Save.

You can feature a collection on your home page. Featuring collections can help you promote sales and new collections.

With Debut, you can add a "View All" button to let customers see the entire collection, and you can display the vendor name beneath each product image.

To feature a collection on your home page:

  1. Click the Sections tab.

  2. Click the Featured collection section.

  3. If you want to change the text that displays above the collection, then enter the text in the Heading field.

  4. From the Collection list, select the collection you want to display. To add or remove products from the selected collection, click the Edit collection link to open the Collections page in a new tab.

  5. From the Products per row list, select the number of products to display in each row.

  6. From the Rows list, select the number of product rows to display.

  7. If you want to display the vendor or brand name beneath each product picture, then check Show product vendor.

  8. If you want to let customers view all products in the collect, then check Show 'View all' button.

  9. Click Save.

Image with text

With Debut, you can add an image with text displayed to the right or left of the image. You can also add a button that links to a page in your store:

Typically, you would use an Image with text section to advertise a product or collection, or bring website traffic to your blog page.

To add an image with text section to your home page:

  1. Click the Sections tab.

  2. Click the Image with text section.

  3. In the 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 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.
  4. From the Layout list, select whether you want the image to appear to the right or left of the text.

  5. Enter a new title for this section in the Heading field.

  6. Enter the text that you want to display below the header in the Text field.

  7. In the Button label field, enter the text you want to appear on the button.

  8. In the Button link field, select a page in your store that you want the button to link to.

  9. Click Save.

Image with text overlay

With Debut, your store's home page can feature a large image with overlying text that gives a first impression of your brand:

You can add a button on the image to direct your customers to any page in your store. You can also change the alignment of the image within the section, adjust the section height, and choose larger or smaller text.

To create an image with text overlay:

  1. Click the Sections tab.

  2. Click Image with text overlay.

  3. In the 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 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.
  4. Choose how you want to align the image in the section by selecting Top, Middle, or Bottom from the Image alignment list.

  5. Enter a new title for this section in the Heading field.

  6. Enter the text that you want to display below the header in the Text field.

  7. From the Section height list, select an image height.

  1. From the Text size list, select a size for the slideshow text.

  2. In the Button label field, enter the text you want to appear on the button.

  3. In the Button link field, select a page in your store that you want the button to link to.

  4. Click Save.

Slideshow

Debut lets you create a slideshow of images and videos. You can set the rotation frequency, and provide text over the slideshow image that links to a page in your store.

For video slides, Debut supports YouTube videos. Slideshow videos can play automatically in the background, without audio, or you can display a Play button and include audio in the video. For mobile devices that don't support video, you can choose an image to display instead.

To add a slideshow:

  1. Click the Sections tab.

  2. Click Slideshow.

To add an image slide:

  1. In the Content area, click Image slide.

  2. In the 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 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.
  3. Choose how you want to align the image in the slideshow by selecting "Top", "Middle", or "Bottom" from the Image alignment list.

  4. Enter a title for this slide in the Heading field.

  5. Enter the text that you want to display below the header in the Subheading field.

  6. If you want to link the heading text on your slide to a page in your store, then click in the Slide link field and select a page.

  7. If you want to link the heading text to a URL, then paste the URL in the Slide link field.

To add a video slide:

  1. In the Content area, click Add content.

  2. Select Video slide from the pop-up menu.

  3. In the Video link field, enter the video's YouTube video ID.

  4. From the Style list, select one of the following playback options:

    • Image with play button includes a play button to start the video. This setting includes audio.
    • Background video with play button includes a play button to start the video, but does not include audio.
    • Background video starts playing the video automatically, with no play button. This setting does not include audio.
  5. To upload an image that will display if autoplay is not supported on a mobile device, in the 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 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.
  6. In the Heading and Subheading fields, enter the text you want to appear on the video. The slide title will be updated with the heading you provide.

To configure slideshow settings:

  1. To automatically rotate the slides, check Auto-rotate slides, and then select the frequency, in seconds, that you want the slides to rotate from the Change slides every list.

  2. From the Section height list, select a height for the slideshow, either Small, Medium, or Large.

  3. From the Text size list, select a size for text, either Small, Medium, or Large.

Theme settings

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.

  1. Click Theme settings.

  2. Click Colors.

  3. For each type of content, click the color swatch to use the color picker:

    The color picker in the theme editor

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

  4. Click Save.

Typography

You can choose the typography for the text on your online store.

To customize the typography:

  1. Find Debut and click Customize.

  2. Click Theme settings.

  3. Click Typography.

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

    The 'Change' button on the font picker

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

    To see all of the available fonts, check out 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:

    A selection of font weights available on the font picker

  8. Click Save.

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. Find Debut and 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.

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. In the Debut section, click Customize .

  2. Click the Theme settings tab.

  3. Click Checkout.

To add a banner image:

  1. In the Banner area, select the Use custom background check box.

  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, left, or center.

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

To customize the main content area:

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

  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.

To customize the Order Summary page:

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

  2. Do one of the following:

  3. Click Choose file to upload an image file.

  • 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 drop-down menus.

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