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 FooterSlideshow and Newsletter, as well as Image with textText columns with imagesTestimonialsFeatured product, and Instagram feed. 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.

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, FooterSlideshow 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 a 300 x 90px .png image file. Large images will be automatically resized to fit this constraint.


To add links to your menus, you must leave the theme editor by clicking the back button in the top left hand corner (you actually need to click twice — once out of the  Header settings and again on the Themes link to get back to the admin). 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 on the titles to edit them, or create additional menus by clicking the purple Add menu button. 

Below is an example of how the menus are set up in our  Startup Tech demo:

If you want to add dropdowns or mega menus to your top-level navigation, check out our instructions  here. Note that mega menus are only compatible with Startup when the menu style is set to Below header.

Back in the theme editor, under  Header>Navigation, you'll "connect" your menu to your header. By default, it will display the Main menu, but you can connect any menu you create from the Menu dropdown.

You can customize how you want your store's menu to display using the Menu style dropdown below. Startup's header navigation has three positions: Header, Below header, and Drawer (meaning the menu is hidden under a mobile-style "hamburger" icon until activated). Note that even if the menu style is set to 'Header,' navigation will collapse into the 'Drawer' if there is not enough screen space.

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 choosing Standard 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-bleedFull-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 Slideshow to 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, HeadingSubheadingTextButton 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 text 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: AccentContrast, 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 clicking Add 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: AccentContrast, 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 (AccentContrast 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 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 zoomShow 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 (AccentContrast or Default).

Next, you'll input the  Heading and Text you want to accompany your image, and the Button and 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 text and 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: AccentContrast, 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  Logo box 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: AccentContrast, 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: AccentContrast, 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  Blog dropdown. 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 (AccentContrast, 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 (make sure it's a square otherwise it'll look wonky and stretched) 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 (AccentContrast, 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   Column block to begin. Add a Heading and Text for 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 Text at 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   StyleHeadingButton 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 (AccentContrast, 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 (AccentContrast, 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 HeadingText, 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.