Setting up your homepage with Startup

Sections

Fixed sections

Dynamic sections


When Startup is added to your store, several default homepage sections are already visible in the theme editor: the  Header and FooterSlideshow and Newsletter, as well as dynamic sections, such as Image with textText columns with imagesTestimonialsFeatured product, and Instagram feed. Each of these sections associates to “empty state” placeholder content in the right-side preview. These are here to give you an idea of the formatting of each section, but can be configured, hidden, or removed to suit your store.

Clicking on any of these left-side section blocks will bring up a set of unique configuration settings for that homepage feature.  

Want to add another section? Click  Add section to select and add optional sections to your homepage. 

Fixed sections

Fixed sections are components that remain at the top and bottom of your site, which cannot be moved. In Startup, there are three fixed homepage sections: the  HeaderFooter, and Slideshow.

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 (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) when selected.

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 the 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, Save your changes, leave the theme editor, and 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 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-navigation 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. They will be automatically triggered when each second-tier menu item has at least one third-tier menu item.

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 for the menu items to fit.

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.

Announcement bar

Startup's Announcement 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. 

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"—links tolegal information such as terms and conditions and privacy policies, but also FAQs, size guides, and contact information. 

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. You can edit these titles through the Edit languages settings, or if you want to edit the title of a menu, navigate to Online store > Navigation.

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, such as credit cards, PayPal, and digital currencies. Enable and manage these from your Shopify admin under  Settings > Payments. For more information on configuring your payment settings, click here.

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.

Payment icons enabled and visible in footer

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 disabled, users will still be able to scroll through them manually using left and right arrows at the edge of the slideshow. If the font color and image are too similar, you can also opt to add a text shadow to your messaging by enabling the Show shadows on text elements feature.

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.

Upload images that are at least 1400px wide to get the best results. 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

Startup supports up to five slides at a time. 

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 customized layout.

When you first install Startup, several dynamic sections are enabled already. These are merely suggestions  for how you might structure your homepage. Delete unwanted sections by clicking on them in the left-side settings, then Delete section at the bottom. You can also conceal sections by clicking the small eye icon. If your store is live, this will exclude this section from public view, but allow you to work on it behind-the-scenes. 

Collection list

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

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 Theme settings > Colors 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 collections 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 an Image with text section, for example).

The Featured collection section is designed to 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 Theme settings > Colors in the theme editor.

Next, you'll assign a heading to the section in the  Heading field. 

To add a call-to-action (CTA) button, 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 Rga-sw from the corresponding sliders.

The featured products section is designed to draw attention to a specific product on your homepage. In effect, it is essentially a product page, as it features all the central aspects of a product page–such as images, description, share buttons, quantity, and and (most importantly) add-to-cart (ATC) button.

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 Show dynamic checkout button. This will add a secondary button below the Add to Cart that will take you right to the Checkout process. 

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 sections are incredibly versatile, allowing you to highlight all sorts of content, be it new products, special promotions, etc.

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. 

Now upload the  Image you want to use, or select it from your image library. Images for these sections should be at least 1400px wide to optimize for larger screens.

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 with text overlay sections are a lot like Image with text sections, only they are full-width and come with a different layout: text overlay. These can be used to feature immersive, high-quality images to build your brand, or highlight special promotions and products.

Settings

Start by setting the  Style of your section from the dropdown menu (AccentContrast 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

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. For instance, if your brand has been 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 in this section.

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 Theme settings > Colors in the theme editor.

Next, assign a heading to your section the Heading field. 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 (660px by 560px .PNG image is ideal) and add the Link URL you wish to link to.

You can display up to 12 logos in this section.

Promotion

Startup offers an optional  Promotion to feature on your homepage, complete with image, text, and call-to-action (CTA).

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 Theme 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 1440px by 600px PNG image for this section.

Blog posts

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 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 Theme 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

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. Then upload a square Avatar image to personalize the testimonial.

You can add up to six testimonials to this section.

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.

3 columns with images, headings and text

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 (660px by 275px .PNG).

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

Video with text

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

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. Then choose the layout (Text above or Text below) from the dropdown.

Video with text overlay

Video with text overlay sections are a lot like Video with text sections except with 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).

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.

Newsletter

To help you build your mailing list, Startup comes with a customizable Newsletter section.

Settings

You can give the section an optional  Heading and Subheading.

Upload an  Image and use the Desktop image alignment (left or right) and Mobile image alignment (top/button) settings to customize its position in relation to the signup field.

With a newsletter signup, you collect email addresses from your customers and store them on the Accepts Marketing tab on the Customers page in the admin. Read more about the process of email marketing to your customers via Shopify.

Instagram feed

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

On this page, you can also customize the  StyleHeadingButton text, and Link URL.

Twitter feed

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.

Map

Pacific comes with an eye-catching  Map section that businesses with brick-and-mortar locations can use to display contact information and give directions to their store.

Settings

Start by setting the Section height from the top dropdown. Then add an optional Heading.

Also included here are  Text alignment, as well as Desktop and Mobile layout settings to get the display of your map's text information just right.  

The  Map address will be the point Google uses to drop its pin. It's the red marker in the image above. 

To pull a map into your homepage, generate Google maps API key and paste it into the Google Maps API key field. If you need help, just follow this  link to open Shopify's step by step instructions for getting your key setup.  

In the end, what you're looking for is this long string of characters to paste into the API field:

You can also customize the display colors of the map using the Map foreground color and Map background color pickers. 

Note: that these do not control particular components of the map (streets, water, etc.) but rather the swatches are linked to, and will affect, the entire map.

Next, you can upload an Image that will be used in the event that the map can not be loaded. This can be a screenshot of a map, or anything else you want to display if you map isn't working for some reason. Use the Image position settings to adjust the focal point for the image.

Alternating content

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.

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 660px by 440px .PNG image). You can include up to three pieces of alternating content per section.



Back to top ↑

Next article: Startup's products and collections