Setting up your homepage with Startup

When you first install Startup, you’ll notice that several default homepage sections are already visible: the  Header and Footer, Slideshow and Newsletter, as well as Image with text, Text columns with images, Testimonials, Featured product, and Instagram. Notice how each of these sections associates to “empty state” placeholder content in the preview. This will give you an idea of the formatting of each section.

startup-sections

Clicking on any of these "section" blocks will bring up a set of unique configuration settings, or you can click  Add section, which will reveal an array of other optional sections that you can add to your homepage. We'll cover each of them in detail—more or less in the order they appear—below.

Fixed homepage sections

Fixed sections are exactly what you’d guess they are—components that are fixed to the top and bottom of your site and cannot be moved. In Startup, there are four fixed homepage sections: the Header, Footer, Slideshow and Newsletter. Here’s what they do and how to set them up in your store:

Header

startup-header

The header is the rectangular area that runs across the top of your store containing your logo, navigation, search, and cart. It appears on every page and is intended to be used to promote your company's brand and make it instantly recognizable to your visitors. This is a static section and cannot be repositioned.

SETTINGS

If you toggle the  Enable fixed header option, the header will remain visible as visitors scroll down the page instead of instead of remaining fixed at the top of it (this is sometimes referred to as a sticky header).

Toggling the  Show cart icon option displays an icon of a cart (or basket) that will take visitors directly to their shopping cart (or basket) if they click it.

Similarly, toggling the  Show search icon option displays an icon of a magnifying glass—the universal "Search" symbol—that will open a search box when clicked.

LOGO

Your store’s logo provides branding for your site and a clickable link to return to the homepage.

By default, Startup will display your store name as your logo. To replace it, click the  Upload image button and select the file you'd like to use. We recommend an a 300 x 90px .png image file. Large images will be automatically resized to fit this constraint.

NAVIGATION

To add links to your menus, you must leave the theme editor by clicking the back button, and then the  Back to Shopify link in the top left corner. Go to Online store > Navigation. Here, you’ll find two pre-populated menus: Main menu and Footer menu. You can edit the links in these menus by clicking Edit menu or create additional menus by clicking Add menu. For more on how to configure menus, see Shopify’s instructions. Below is an example of how the menus are set up in our Startup-Cloth demo:

startup-menu-setup-example

Back in the theme editor, under Navigation, you'll choose how you want your store's menus to display. Startup’s header navigation has three various positions: Header, Below header, and Drawer (collapsed under a mobile-style "hamburger" icon until activated). Use the Menu styledropdown to change your header from the default.

Startup has an optional mega-navigation setting, which you can activate by completing the  Mega navigation trigger field. Mega navigation essentially extends your store's pre-existing navigation systems by an additional two menu tiers and up to four columns. Using this feature can improve user experience, helping your customers find products faster. Note that it is only functional when the navigation layout is set to Below header.

In the Mega navigation trigger field, add the title of the menu  from which you want the mega-nav to stem. You can create or edit your menus by navigation to Online Store > Navigation in the Shopify admin. As an example, you could name the trigger "Collections," as we have here:

startup-mega-nav

You can create tiers by naming a new menu after a link in the main menu that has the trigger title (in this example, you would collect a new menu titled, "Collections.") The items you add to this new menu will become the headings in your mega navigation (in this example, "Classics," "Outerwear," "Spring," and "Rugged.")

Here's how it will look in your Shopify admin:

mega-nav-first-and-second-tier

You can then populate these secondary menus the same way as before: create new menus that share the titles, and add menu items to them. Like so:

startup-mega-nav-second-and-third-tier

That should do it! You've set up mega nav in your store. You go, Glen Coco.

ALTERNATE HEADER

If your header colors and full-bleed slideshow images are clashing, you can use the  Color override dropdown menu to override the homepage and product page header colors and set them to either white or black (depending on your content). This option will override the custom header colors only for the homepage and product pages, ensuring your header and slideshow complement each another.

If you do this, you may also want to upload an an alternate logo for those pages. You can do that by clicking  Upload image in the Alternate logo image box. For instance, if you have a black logo, you can create a white version of it so it will appear better on darker backgrounds.

PROMOTION BAR

Startup's promotion bar allows you to communicate important information, promote sales, or link to content you want visitors to see.

You'll see that you can customize the style of the bar by choosingStandard or Accent from the Style dropdown menu. Once you've chosen a style, you'll input your message in the Text field. If you want to include a link, you can either paste a URL in the Link field or select a page from your site. Note that the whole text you provide will be linked.

Footer

startup-footer

Like a footer on a document or report, a website footer contains information listed at the bottom of a page. Typically, the footer is the area that visitors expect to find the "fine print"—legal information such as terms and conditions and privacy policies, but also FAQs, size guides, and contact information. Startup provides the space to display all of these and more.

SETTINGS

The  Show headings checkbox at the top applies to all headings in the footer area. If you don't want to display headings in the footer area leave this box unchecked. If you want to edit these headings, click the arrow next to the theme name on the previous screen and select Edit languages (or if you want to edit the title of a menu, navigate to Online store>Navigation and edit it there).

MENUS

Startup allows you to display up to two menus in the footer section of your store. First, set them up under  Online store>Navigation (more information here), then use the dropdown menus for Menu 1 and Menu 2 to configure them in your theme editor.

PAYMENT ICONS

You can accept a variety of payment methods in your Shopify store, including credit cards, PayPal, and digital currencies. You’ll enable and manage these from your Shopify admin under  Settings>Payments. For more information on configuring your payment settings, click here.

payment-settings

Once you’ve selected the payment methods you want to accept, you can switch their icons on or off in the  Footer>Payment icons section of the theme editor. These will display at the very bottom of your store's footer.

footer-payment-icons

Slideshow

startup-slideshow

The top section of your home page is your store's most valuable real estate. To make the most of it, merchants often use a slideshow to showcase their most recent deals and top-selling products. To display a slideshow on your homepage, simply click the  Enable checkbox under the Slideshow section. You'll be able to prepare up to five slides, each with unique messaging and images.

SETTINGS

Once you've switched on the slideshow by clicking  Enable, you can start customizing the design of your slides. Select the Text color from the color picker, and if you would like to Show shadows on text elements (to make light text stand out against a light image, for example) click the checkbox above.

You'll also need to choose a layout for your slideshow from the  Choose layout dropdown menu. Startup offers four layout options: Content width; Full-width; Full-width, full-bleed; Full-width/height, full-bleed. You'll see the differences in your preview, but here's a visual for quick reference:

startup-slideshow-layouts

You can choose between having your slides slide horizontally or fade in and out under Transition, and select how long you want each to display for by selecting a time period under Change slides every. If you select "Don't automatically change slides," users will still be able to scroll through them manually using left and right arrows at the edge of the slideshow.

CONTENT

This is where you'll upload the images you want to use and customize the text overlays. Begin by clicking on  Slideto expand the settings.

Now, you'll upload an image. We recommend a 1440 x 640px .jpg file. You can cut it down to size in a photo editing program, otherwise the theme editor will automatically constrain your images.

In the boxes below, you can input and format the slide's  Text alignment, Heading, Subheading, Text, Button text, and Link URL (look at the live preview to see the formatting for each). You don't need to fill every field if you don't want to—in our Cloth demo pictured above, you'll see that we only used the Heading and Button te fields. You may not want to include any text at all!

Startup supports up to five slides at a time. If you run out, you will have to delete some before you can add more.

Newsletter

startup-newsletter-signup

To help you build your mailing list, Startup comes with a newsletter subscription field that (if enabled) appears in the footer of your store. Check  Show newsletter sign-up in footer to enable it.

You can also choose the  Style from the dropdown menu. There are three options: Accent, Contrast, and Default. You can change the colors associated with each in under General settings>Color in the theme editor.

Next, you can customize the Heading and Text that appears above your sign-up form. Something like "Keep in touch!" and/or "Subscribe to our newsletter" should do the trick.

Dynamic homepage sections

Most of Startup’s homepage sections are dynamic, meaning you can add as many of them as you want and rearrange them in the sidebar to create a completely unique layout.

Out of the box, your theme has several dynamic sections enabled already. These are merely  suggestions for how you might structure your homepage. Don’t want to include a section? Delete it! (By clicking on it and clicking Delete section at the bottom.) Want to include something that isn’t already there? Click Add section and find it on the list.

Collection list

collection-list

Collection list sections are designed to help you showcase new or seasonal collections on your homepage. With Startup, you can feature up to six collections at a time.

SETTINGS

Start by choosing the  Style you want your collection list section to use from the dropdown menu. There are three options: Accent, Contrast, and Default. You can change the colors associated with each in under General settings>Color in the theme editor.

Next, you'll assign a heading to the section in the  Heading field. You can also choose whether or not to display a product count below each collection by checking the Show product count box.

CONTENT

Here, you'll select the collection(s) you want to display by clickingAdd Collection. You can set up collections in the Products>Collection>Add collection section of your Shopify admin. For instructions on how to set up collections see our article, Getting Started: Shopify Basics.

You can feature up to six collections at a time in this section. If you want to add more, you can always add another collections list section, or feature them another way (in a featured image with text, for example).

Featured collectionscreen-shot-2016-12-09-at-11-31-50-am

The featured collection section is designed to—you guessed it—draw attention to products from a specific collection on your homepage. You can display up to twelve products from the same collection in this dedicated space.

SETTINGS

Start by choosing the  Style you want your collection list section to use from the dropdown menu. There are three options: Accent, Contrast, and Default. You can change the colors associated with each in under General settings>Colors in the theme editor.

Next, you'll assign a heading to the section in the  Heading field. You can call it "Featured collection," the name of the collection (as we've done), or anything else you want!

Startup also lets you add a button to the bottom of this section. Simply input the  Button text and Link URL in the corresponding fields. A great way of using this feature is to link to the collection page so users can browse the full collection.

From the  Collection dropdown, you'll select the collection you want to feature. Then select the Products per row and Number of rows from the corresponding dropdowns, and you're done!

Featured product

featured-product

The featured products section is designed to draw attention to a specific product on your homepage. It looks a lot like a product page, only it isn't a product page! It's front and center where everyone's going to see it.

SETTINGS

Start by setting the  Style of your section from the dropdown menu (Accent, Contrast or Default).

Next, add a  Heading and choose the Product you want to feature from the dropdown menu. If you want to make any tweaks to the product images, price, or anything else, you can click the blue Edit product shortcut above the menu.

Startup will automatically pull the description you've added to the product page in your Shopify admin unless you instruct it not to by adding a custom  Description here. You may want to use this if your product page description is too long, for example, or if you just have a different idea for the text you want featured on your homepage.

The next three checkboxes allow you to customize the features that appear alongside your featured product. You can:  Enable image zoom, Show names of vendors, and Disable sold-out variants (meaning that if there are colors, sizes, etc. of the product that have sold out, they will not appear as options on your product pages). You can also customize the Variants style (dropdowns or buttons) here, as well as Enable cart redirection (which will automatically send users to the cart page after adding a product, instead of keeping them on the page).

CONTENT

You can also add  Additional info to this section by clicking the blocks under Content. In the example above, we've added a link to our return policy and contact form here, but you could link to a size guide, FAQ page, or any number of other things.

Simply add the  Text you want to display, then the Link URL, and an Icon from the dropdown menu. If you want to include more than one nugget of additional info, click Add additional info at the bottom and populate another block. You can add up to a maximum of four additional info links.

Image with text

image-with-text

Image with text sections are incredibly versatile, allowing you to highlight all sorts of content, be it new products, special promotions, or something else entirely!

CONTENT

You'll begin by setting the  Style of your section from the dropdown menu (Accent, Contrast or Default).

Next, you'll input the  Heading and Text you want to accompany your image, and the Buttonand Link URL that will appear below it. Note that all of these fields are 100% optional.

Now upload the  Image you want to use, or select it from your image library.

Under  Layout, you can customize how you want your image and text to appear. In the example above, we've opted for the Text above layout (and no button), but you can display the Text below your image if you prefer.

Image with text overlay

image-full-width

Image with text overlay sections are a lot like Image with text sections, only they are a. full-width and b. come with a different layout: text overlay. They're a great way to use immersive, high-images, build your brand, and highlight special promotions and products.

SETTINGS

Start by setting the  Style of your section from the dropdown menu (Accent, Contrast or Default).

Next, input the  Heading and Text you want to accompany your image, and the Button textand Link URL that will appear over it. These fields are, of course, 100% optional.

Finally, upload the  Image you want to use, select the Overlay opacity from the dropdown menu, and you're done!

Logo list

logo-list

A great way of building social proof is by displaying the logos of trusted sources that have either written about your products or stocked them. If you’ve been lucky enough to be featured in a reputed newspaper or magazine, use that. If people can find your products in well-known stores, use that. Visitors to your store will associate your brand with the others shown.

SETTINGS

Start by choosing the  Style you want your collection list section to use from the dropdown menu. There are three options: Accent, Contrast, and Default. You can change the colors associated with each in under General settings>Colors in the theme editor.

Next, assign a heading to your section the  Heading field. We've used "Also available at" but you can use whatever you want. You could also use this section to display other recognizable logos, including security badges, or logos of suppliers and payment providers.

You can select how many logos you display by clicking on the  Logos per row dropdown and selecting 3 or 4.

CONTENT

To add a logo, click the Logobox under Content. Select the Image you want to use (we recommend a 660 x 560px .png) and add the Link URL you wish to link to.

You can display up to 12 logos in this section.

Promotion

promotion

Startup gives you the opportunity to show off a Featured promotion on your homepage with an image, text, and call-to-action.

SETTINGS

Start by choosing the  Style you want your collection list section to use from the dropdown menu. There are three options: Accent, Contrast, and Default. You can change the colors associated with each in under General settings>Colors in the theme editor.

Next, you'll assign a heading to the section in the  Heading field. You can also include a Subheading if you want (we skipped it in our example) and Text for your promotion. If you want to direct visitors to a specific collection or landing page, you can add Button text and a Link URL to the fields below.

Finally, you'll upload your  Image at the bottom. We recommend a 1440 x 600px .jpg for this section.

Blog posts

featured-blog

The Blog posts section allows you to display images and text from your two most recent posts. To specify the "preview" text that appears for each post, we suggest using Shopify’s excerpt function, which you'll find in the post editor under Online store>Blog posts.

SETTINGS

Start by choosing the  Style you want your collection list section to use from the dropdown menu. There are three options: Accent, Contrast, and Default. You can change the colors associated with each in under General settings>Colors in the theme editor.

Next, you'll assign a heading to the section in the  Heading field. You can call it "Latest news" or "Our blog" or whatever you want!

Finally, you'll select the blog you want to feature from the  Blogdropdown. While many stores maintain only one blog (probably called "News") some create multiple to better categorize information including customer stories, tips, tutorials, FAQs and more. Something to consider if you plan on revisiting these topics regularly!

Testimonials

testimonials-section

When it comes to making purchasing decisions online, customer reviews and testimonials can make or break a sale. Startup allows you to build social proof and increase conversions with a uniquely-styled testimonial section built into your homepage.

SETTINGS

Start by selecting a  Style from the dropdown menu (Accent, Contrast, or Default) and adding a Heading to your section ("Testimonials" is a good bet, but you can use anything you'd like!).

CONTENT

Click on a  Testimonial block to begin. Add the testimonial you want to feature in the Quote field, then put the source in the Source field. Upload an Avatar (the image or icon you're going to use to represent your source) and you're done!

You can add up to six testimonials to this section.

Text columns with images

text-columns-with-images

The Text columns with images section is designed to guide customers through a process. The section can display up to six images, each with its own heading, caption, and call-to-action. Use it to explain your shop’s ordering process or to exhibit variations on a single product.

SETTINGS

Start by selecting a  Style from the dropdown menu (Accent, Contrast, or Default) and adding a Heading to your section (we've used "How it works" but you can use anything that matches your content).

CONTENT

Click on a  Columnblock to begin. Add a Heading and Textfor your first column, as well as the Button text and Link URL you want your call-to-action to have.

Then upload your  Image (we recommend a 660 x 275px .png) and you're done!

You can add up to six columns (or six content blocks in three columns) to this section.

Video with text

video-with-text

You can feature a video on your homepage accompanied by text and a call-to-action if you wish.

SETTINGS

To add a video, start by selecting a Style and giving your section an optional Heading and Textat the top. Add the Button text and Link URL if you want to include a link.

Next, copy the  Video URL from YouTube or Vimeo and paste it into the theme editor. Choose the layout (Text above or Text below) from the dropdown, and you're done!

Video with text overlay

Video with text overlay sections are a lot like Video with text sections except they—you guessed it—have text overlays instead of text above or below (they also span the full width of the screen as opposed to being constrained or padded with white space). If you've got something you really want customers to see in high-res, add it here!

The setup for this section type is pretty much identical to the  Video with text section above, the only exception being that you cannot specify the Layout. It is set to Text overlay, and you can customize the Overlay opacity using the dropdown.

Instagram feed

instagram-feed

To integrate your Instagram account, you will need to locate and input your Instagram Access Token. Follow the help link (or click here) to learn how to generate a token. Copy and paste your token back into the Access token field in the theme editor.

On this page, you can also customize the  Style, Heading, Button text, and Link URL.

Twitter feed

latest-tweet

The Twitter section displays your store's most recent tweet.

SETTINGS

Select the  Style you want to use for your Twitter section from the dropdown menu (Accent, Contrast, or Default). Then give it a Heading, enter your Username(excluding the '@' symbol) in the corresponding field and check the Show retweets option if you would like to include those in your feed.

Alternating content

alternating-features

Like  Text columns with images sections, Alternating content sections are great for explaining a process or highlighting features. Alternating content sections support images, video, and text, and you can include up to three blocks (text + image/video) on your homepage.

SETTINGS

Begin by selecting the  Style (Accent, Contrast, or Default from the dropdown menu. Then add a Heading for your alternating content section. You can also choose to Show border between features by checking that option.

CONTENT

Click on  Image, Video, or Add content to open up the options for each block.

The first step is to choose your  Image (or video) alignment (Image on left or Image on right). For stores using multiple blocks, we recommend alternating between left and right alignment. This will make it easier for customers to read (not to mention it's more aesthetically-pleasing!).

Next, add the  Heading, Text, Button text, and Link URL if you are using them (you might want to link to more information on other pages, or you may want to keep it lean and clean without them).

Finally, upload an  Image or Video link(we recommend a 660 x 440px .png image) and you're done! Rinse, repeat for up to three pieces of alternating content.