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 are customizable blocks of content that determine the layout of different pages on your online store.

  • Home sections include features such as a slideshow or a newsletter signup that you can add, re-arrange, or remove. You can have up to 25 sections on your home page.

  • Each type of page has its own sections. For example, the product page section determines the layout of each product page on your online store.

  • Page sections are always in specific places on your online store. You can customize them, but you can't re-arrange or remove them.

  • Each theme includes fixed sections, such as the header and footer, that show on every page of your online store.

You can learn about 's unique selection of sections and how to customize them to suit your business.

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.

In the footer section, you can edit the content that appears at the bottom of every page in your store. You can add the following features to your footer:

  • up to two menus
  • a newsletter signup
  • payment icons

The footer section of a website that shows a menu, a newsletter signup, and copyright text.

To customize the footer section:

  1. Find Debut and click Customize.

  2. Click Sections.

  3. Click Footer.

  4. Customize the primary footer menu from the Primary menu area. To edit the default menu, click Edit menu. To change to a different menu, click Change, and then select an existing menu or click Create menu.

  5. Add an additional menu to your footer from the Additional menu area.

  6. To add a newsletter signup to your footer, do the following steps:

    1. Check Show newsletter signup.
    2. Enter a subheading for your newsletter signup in the Subheading field.
  7. Add payment icons, such as Mastercard or PayPal, to your footer by checking Show payment icons.

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

Newsletter

You can add a newsletter signup to your home page. This lets you collect customer email addresses for email marketing campaigns. You can learn more about email marketing on the Shopify blog.

The newsletter section on a website. There is a field for customers to enter an email address and a button that says 'Subscribe'.

To add a newsletter signup to your home page:

  1. Find Debut and click Customize.

  2. Click Sections.

  3. Click Add section > Newsletter.

  4. Enter a heading for your newsletter signup in the Heading field. The default heading is "Subscribe to our newsletter".

  5. Enter a subheading for your newsletter signup in the Subheading field.

  6. Click Save.

Slideshow

You can add a slideshow of images to your home page. In the slideshow section, you can set the height of the slides, add text and buttons, and choose whether your slideshow plays automatically.

The home page of an online store called Pure Tea that features a slideshow. A slide of a tea cup on a counter top is shown with the heading,

To learn about slideshow image cropping and recommended image sizes, see the guidelines below.

To create a slideshow:

  1. Find Debut and click Customize.

  2. Click Sections.

  3. Click Slideshow.

  4. Set the height of your slides from the Slide height drop-down menu.

    Learn more about how slide height affects your slideshow.

  5. Set the size of your headings and subheadings from the Text size drop-down menu.

  6. Set the position of the text on your slides from the Text alignment drop-down menu.

  7. Optional: check Show overlay. An image overlay is a layer of color between an image and any text that is placed over the image. Overlays can help with color contrast and readability. You can set the color and opacity of the overlay in the color settings.

  8. Optional: check Auto-rotate slides to play the slideshow automatically. Select how much time to stay on each slide by using the Change slides every slider.

  9. To add an image slide, do the following steps:

    1. In the Content area, click Add image slide.
    2. Under Image, click Select image. To upload an image from your computer, click Upload. To use a free stock image from Burst, click Free images.
    3. To choose how you want to align the image in the slideshow, select a position from the Image position drop-down menu. You can learn more about image position in the guidelines below.
    4. To add text to the image slide, enter text in the Heading field, the Subheading field, or both.
    5. Add a button to your image slide by entering text in the Text button label field. Select a part of your online store for the button to link to in the Button link field:

    The Button link field in the theme editor. Clicking the link shows a menu that includes Collections, Products, Pages, Blogs, and Blog posts. You can use this menu to link to a particular collection, product, and so on.

  10. Click Save.

Slideshow guidelines

You can use the settings and image recommendations below to control the way that your slideshow looks on your online store. The way that your slides appear is determined by the following factors:

Because of differences in screen size and shape, your slides might look different on mobile and desktop devices.

Image size recommendations

The recommended dimensions for slideshow images depend on your slide height settings:

The Slide height settings in the theme editor. A slide height drop-down menu shows the following options: Adapt to first image, Small, Medium, and Large.

Use the following guidelines:

Slide height setting Recommended width Recommended height
Adapt to first image 1200 px 600 px
Small 1200 px 475 px
Medium 1200 px 489 px
Large 1200 px 775 px

To view or change your slide height settings, see step 5 of the instructions to create a slideshow.

Image cropping

You can take steps to control how your images are cropped or to avoid image cropping altogether.

Control how your images are cropped

You can expect image cropping on some screen sizes in the following situations:

  • Your images don't have the same width-to-height ratio.
  • Your slide height is set to Small, Medium, or Large.
  • Your slide height is set to Adapt to first image and your images are taller than the device screen or browser window.

You can control how your images are cropped by using the Image position setting:

The Image position setting in the theme editor. A drop-down menu shows nine different options such as

For each image, you can choose which part you want to keep in view when cropping occurs. In the following example, you can see how the same image might be cropped for some screen sizes. The slide on the left has the image position set to Middle center. The slide on the right has the image position set to Top left:

An example slide that is cropped differently depending on the image position setting.

To view or change your image position settings, see step 10 of the instructions to create a slideshow.

Avoid image cropping

To avoid image cropping in your slideshow, try the following steps:

  • Set your slide height to Adapt to first image.
  • Use images that are twice as wide as they are tall. Such images have a width-to-height ratio of 2:1. The recommended dimensions are 1200 px by 600 px.
  • Make sure that all of your slides have the same width-to-height ratio. The ratio of your slides is more important than their dimensions in pixels.

In the following example, a slideshow image with a 2:1 ratio is shown on a desktop and a mobile device:

A slide is shown on a desktop and a mobile device without any cropping.

Slide height

The width of the slideshow section is always 100% of the browser window. The height of your slides is relative to the width. Because of differences in screen size, the width and height of your slides varies for different devices. The height of your slides is also influenced by your slide height settings.

You can use the Adapt to first image slide height setting to base the height of your slideshow on the height of your first image. This setting works best when all of your images are the same size, or have the same width-to-height ratio. If your images are different sizes or have different ratios, then you can change the order of your slides to see how they look at different heights.

In the following example, the shortest slide is positioned first:

A slide that is shorter determines the height of the other two slides. Because the other slides are taller, they are cropped on the top and the bottom.

In the next example, a taller slide is positioned first:

A medium-height slide determines the height of the other two slides. The slide that is taller is cropped on the top and the bottom. The slide that is shorter is cropped on the sides.

If you use the Small, Medium, or Large height settings instead, then refer to the image size recommendations for your slides.

Image ratios

If you want to avoid image cropping in your slideshow, then the recommended width-to-height ratio for your images is 2:1.

If you aren't concerned about cropping on desktop displays and want to make an impact on mobile devices, then use images that are square, or images that are taller than they are wide. The following example slide shows a square image, which has a 1:1 width-to-height ratio:

A square slide is shown on a desktop and mobile device. The image is cropped on the desktop device, but not cropped on the mobile device.

The next example slide shows a portrait image with a 2:3 width-to-height ratio:

A tall slide is shown on a desktop and mobile device. The image is cropped on the desktop device, but not cropped on the mobile device.

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.

Customize your color settings

  1. Next to **, 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 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.

  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 **, 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, 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:

    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