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.

Debut banner

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.

Get Debut from the Shopify Theme Store ›

To learn more about the theme sections that ship with Debut, including some examples for how to use them, click the Sections button. To learn more about the settings available to customize your store, including favicons, colors, and typography, click the General settings button.

You can create content and organize the layout of your online store from the Customize theme page of your Shopify admin.

Common sections

Every theme includes two sections that appear on every page:

  • the Header section, which is displayed at the top of the page, and typically includes your logo and navigation menus
  • the Footer section, which is displayed at the bottom of the page, and typically includes "Search", "About Us", and "Log In" links.

You can edit the header and footer sections from any page in the theme editor. Unlike other section types, the Customize theme page displays the header and footer sections regardless of which store page you are viewing in the theme editor.

Debut includes several unique settings for header and footer content.

Customizing your store's header

The header section includes the content that appears at the top of every page in your store:

Header example

With Debut, you can create store announcements that will appear in your header. You can also create a link within the announcement that takes your customer to a page in your store, or to another website:

Announcement link

Note

Because the header content is always at the top of the page, you cannot move the header section down on the page the way you can with other section types.

To customize the header section:

  1. Click Sections.

  2. Click Header.

  3. In the Logo alignment area, select whether you want your store's logo aligned to the left, or centered on the page.

  4. In the Logo image area, click Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

  5. In the Custom logo width (in pixels) field, enter the width of your logo, in pixels, if you want to display a smaller logo.

  6. From the Menu drop-down, select the menu you want to display at the top of your store's home page. You can choose from any menu you have created in your online store's Navigation settings.

  7. If you want to display a store announcement, then select the Show announcement checkbox, and then enter the announcement text in the Announcement text field.

    • To link the announcement to a web page, enter the URL in the Announcement link field.
    • To link to a page in your store, click in the Announcement link field and select a page from the pop-up list.
    • To change the announcement banner color, click the color next to Announcement color to open a palette:
      Header color palette
  8. Click Save.

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

Footer section

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.

Set the layout of your home page

By default, Debut includes 4 home page sections:

You can add more sections, remove any of these sections, and rearrange sections to create a custom home page. Or, you can simply update the default home page sections with your unique store content.

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:

Image with text overlay section

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.

Note

When you provide the header text for your image, the Image with text overlay section is automatically renamed to the header text you provide.

To create an image with text overlay:

  1. Click the Sections tab.

  2. Click Image with text overlay.

  3. In the Image area, click Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

  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.

Tip

If your image is larger than the section height you select, the image will be cropped. To make sure that important aspects of the image stays visible, use the following image sizes:

  • Extra small: 1200px by 200px
  • Small: 1200px by 300px
  • Medium: 1200px by 375px
  • Large: 1200px by 650px
  • Extra large: 1200px by 775px.

  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.

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:

Image with text section

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 Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

  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.

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.

Note

When selecting an image to use in your slideshow, it's important to note that the images will get cropped when viewed from different screen sizes. Although you can't prevent your images from getting cropped, we recommend the following image sizes for best results:

  • Small - 1200px by 475px
  • Medium - 1200px by 489px
  • Large - 1200px by 775px

Try viewing your slideshow using different screen sizes and using different alignments (top, middle, bottom) to make sure that important parts of your image aren't getting cropped. The layout of your image matters too. If, for example, you are selling shoes, make sure that the shoes in the image aren't at the edge of the picture.

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.

Note

You must have a YouTube video ID to upload a video. The Youtube video ID is the series of number and letters that follow the = sign in the Youtube URL. For example, for the URL https://www.youtube.com/watch?v=fpvv5z8M33o, the Youtube video ID is fpvv5z8M33o.

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 Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

    Note

    The recommended image size is 1200px to 2000px width, and 400px to 600px height.

  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.

    Tip

    If you do not want to display text on your slide, leave the Heading and Subheading fields blank.

  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 Upload image to upload an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

  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.

Set the layout of your blog page

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

    Note

    If you want to edit blog content, then click the Edit this blog link to open the Edit blog page in your Shopify admin.

  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.

Set the layout of your collections list page

You collections list page is the page that displays when customers click the top-level collections menu:

Debut home page with Catalog link highlighted in top menu

You can a thumbnail of all your collection in a grid pattern, or you can choose to show a selected collection. You can also sort how collections are displayed on this 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. @@then what? this just makes the preview blank@@
  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.

Set the layout of your 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 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.

Set the layout of your product pages

For your product pages, Debut includes a default Product pages section that lets you set the product image size, display quantity selectors and variant labels, and choose whether to allow image zooming.

To set the layout of your product pages:

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

  2. Click the Sections tab.

  3. Click Product pages.

  4. From the Image size list, select an image size.

  5. If you want to display a quantity list, then check Show quantity selector.

  6. If you want to display the variant label, for example "Size", then check Show variant labels.

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

  8. If you want to let customers zoom in by mousing over the product image, then check Enable image zoom.

  9. If you want to show social media sharing buttons, then check Show social sharing buttons.

  10. Click Save.

Enable cart notes on your cart page

With Debut, you can let your customers add notes to their order:

Cart notes
  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 customize your online store's colors, fonts, and social media links on the General settings tab. At any time, you can reset your theme's settings to their default value.

Colors

You can select the colors that will be used for text and backgrounds throughout your store.

To set color options:

  1. Click Customize theme.

  2. Click the General settings tab.

  3. Click Colors.

  4. For each type of text or background, click the color swatch to select a new color from a palette.

    Tip

    Clicking the checkered square sets the color to transparent:

    Color picker transparent

  5. Click Save.

Typography

You can change the font and font size of the text in your store.

To set typography options:

  1. Click Customize theme.

  2. Click the General settings tab.

  3. Click Typography.

  4. In the Headings and buttons section, select the font and font size for heading and button text from the drop-down menus.

  5. In the Body text section, select the font and font size for body text in your store.

  6. If you want to make product titles more visible, then check Bold product titles.

  7. Click Save.

Social media

Debut includes several options for integrating your online store with social media, including Facebook, Twitter, and Pinterest.

To enable social media settings for Debut:

  1. In the Debut section, click Customize theme.

  2. Click the General settings tab.

  3. Click Social media.

  4. Check Share on Facebook to enable the Facebook sharing button for products or blog posts.

  5. Check Tweet on Twitter to enable the Twitter sharing button for products or blog posts.

  6. Check Pin on Pinterest to enable the Pinterest sharing button for products or blog posts.

  7. In the Social accounts section, enter the URLs of your social media sites in the fields provided.

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

  2. Click the General settings tab.

  3. Click Favicon.

  4. In the Favicon image area, click Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

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

  2. Click the General 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 bellow Change theme style. The name of this button is typically the theme name.

  4. Click Change style.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free