Setting up your homepage with Reach
When you first install Reach, you’ll notice that a couple of default homepage sections are already visible—namely the header and footer, which are standard for any online store. 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 that they appear—below.
You'll also notice a Theme settings link at the very bottom of each section's settings, which you can expand to reveal additional settings that pertain to that section. Many of these Theme settings affect elements beyond that specific section so be careful with the changes you make here. We'll be covering these general settings in another article, Reach's Theme settings.
Fixed homepage sections
Fixed sections are components that are fixed to certain areas of your site and cannot be moved or removed. In Reach, there are just three fixed homepage sections: the Announcement Bar, Header and the Footer (note that these sections appear on all pages, but we've put them here because they'll probably be some of the first things you'll want to set up).
The Announcement Bar is a great place to fill your customers in on new promotions, offers, and changes to your store. This bar will appear above the Header section making in the first thing customers will see at the top of the page when they visit your store.
First up, the Announcement Bar settings let you easily turn the Announcement bar off and on, using the Show announcement setting. You can also limit the bar to only display on your homepage by turning on the Show on homepage only setting.
The Announcement bar has two text fields. The first is a standard Text field that you use the input the text you'd like to appear in your Announcement bar. The second field, called Text (mobile), is optional and allows you to enter alternate text content that will only appear to customers visiting your store on mobile devices. For example, this field can be used to feature shorter text that is more suitable to the smaller screens.
Lastly, you can add a Link and customize both the Background and Text colors of the Announcement bar so it stands out or match the branding of your store.
The header is the rectangular area that runs across the top of your store (or bottom of your store on mobile) containing your logo, navigation, currency converter, search bar, cart, and story link. 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.
A sticky header, also known as a 'fixed' or 'persistent' header, is a great option that "sticks" the header to the top of the desktop or bottom of the mobile screen, even as users scroll down a page. This can improve navigability, reinforce branding, and save time—nobody likes scrolling all the way back to the top when they realize they're browsing the wrong page. To use a sticky header in your store, simply check the Enable sticky header option at the top of the Header settings.
Your store’s logo provides branding for your storefront, as well as a clickable link to return to the homepage.
By default, Reach will display your store name as your logo. To replace it, click the blue Select image button and select the file from your computer you'd like to use. Alternatively, you can choose from one of Shopify's free images by clicking on the blue Explore free images link. We recommend you upload a 200 x 100px .png image file for your logo, but you can customize the size by increasing or decreasing the max-height and max-width using the sliders in the theme editor. Your logo maintains the same aspect ratio, but resizes proportionally as these sliders are adjusted.
To add links to your menus, you must leave the theme editor by clicking the purple Shopify icon in the top left-hand 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 on the titles to edit them or create additional menus by clicking the purple Add menu button.
Below is an example of how our menus are set up in our Reach Solid Demo
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 Main menu drop-down. If you want to edit the links that appear in your chosen menu, use the Edit menu shortcut.
Reach has two navigation styles: Expanded and Drawer. The expanded style will show your menu links side by side along your header. The drawer style will show a Menu link, which, when clicked, will open up a panel of menu links shown one below another. Note: If your header navigation has too many links to fit on one line, they will automatically collapse into a drawer, even if the Expanded style is chosen.
Reach's Story feature is just that: a place for you to tell your brand's story. We'll go into more depth about how to set up this feature here. Once you've finished setting up a story page, you can hook it up to the book icon in your header and display a notification to encourage customers to read your story.
To get started, open the Header settings. In the Story portion, you can select the page created for the Story template. If you haven't created this page yet, you can click Create page instead.
Then, under Content, click Add story notification. This is a little drop-down that stems from your story icon (the little book) and appears when a customer first visits your store. You can add a thumbnail image to accompany your story notification. This image should be 200px by 200px in JPG or PNG format. You can also add a Heading and Caption to pique your customers' interest and draw attention to the Story page. Once you've added these components, just click Save.
Note: the Story notification will show up for new customers, and can be dismissed by clicking on the book icon in the header to open up the story page, or by clicking the 'X' button in the top right of the notification.
Like a footer on a document or report, a website footer contains the information listed at the bottom of a page. Typically, the footer is the area where 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.
Displaying the logos of the payment methods you accept is a great way of building social proof and clearly displaying your customers' payment options. With Reach, you can easily switch these on and off in the theme editor by checking the Enable payment icons box under Footer > Enable payment icons.
Note that you will have to first configure your payment options from the Shopify admin (Settings > Payments). You can learn more about that here.
With Reach, you can add up to three optional blocks of content to your footer: Menu, Newsletter, and Rich text. To set these up, just click Add content and choose the one you want to add. Setting up the blocks themselves is very intuitive—just follow the prompts. The Menu block displays a menu with links, the Newsletter displays an email capturing field to add users to a list that you can send newsletters to, and the Rich text area allows you to write a bit about yourself, your company, or your contact information. Note: Social media links can also be displayed below the Newsletter field. To make these appear, go to the Theme settings panel in the theme editor, click Social accounts, and fill in as many of your social links as you like, and hit Save.
Note that all email addresses collected by Reach's Newsletter form will be added to your customer list (just click Customers in the Shopify admin). If you want to filter this list (purchasers versus newsletter opt-ins, for example) you can use the Filter customers dropdown, then select "Tagged with," then input "Newsletter" and click "Add filter". This will display everyone that signed up for your newsletter through your theme.
Dynamic homepage sections
The Blog posts section allows you to display images and text from your 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.
Add a heading to your blog section in the Heading and Subheading fields, and choose which blog you'd like to showcase by clicking the blue Select blog button. Choose how many blog posts appear by increasing or decreasing the slider under the Posts setting, then choose whether to show the Blog post author, Date, or an Excerpt by checking or unchecking those boxes. You can also customize the style of the buttons and background color. Selecting the Primary button style will show the Primary accent color (under Theme settings > Colors > Primary accent and Primary button text), and the Secondary button style will show the Secondary accent color (Theme settings > Colors > Secondary accent and Secondary button text). The Default background color matches your chosen background (Themes settings > Colors > Background), and the Alternate background is a slight mixture of your Default background color and the Primary accent color.
Collection list sections are designed to help you showcase new or seasonal collections on your homepage. With Reach, you can feature up to seven collections at a time.
Here you can add a heading and subheading. These will appear at the top left of the collection list section. There is also an option to display the description for each collection, which can be added in the collection's settings (Products > Collections > Edit collection > Description field).
To assign the collections, in Content, click 'Add content' then 'Select collection'. Reach will automatically show the featured image from your Shopify admin (Products > Collections > Collection image). If the collection doesn't have a collection image, it will show the first image of the first product in the collection. You can also upload a custom collection image by clicking the blue Select image button in the Image section
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.
Start by assigning a heading and subheading to the section in the Heading and Subheading field. Next, select the Collection you want to pull products from using blue Select collection button. If you need to make changes to your collection, you can use the Change button or remove the collection by clicking Remove. Choose the number of products that appear in this section by increasing or decreasing the slider under Product count.
Image with text overlay
This flexible section can be used to showcase lifestyle photos or product images, promotions, or to introduce your brand to customers.
Since this image will mostly cover the width of your home page in desktop, you'll want to use a fairly large image here to accommodate larger screen sizes—we recommend using an image at least 1160px wide by 560px tall. Write a Heading, Subheading, and Text, and choose whether to align the text to the Right, Center, or Left from the Text layout drop-down.
If your image clashes with the default text color, you can customize the color by enabling the Use custom text color checkbox. With this enabled you can choose a custom color or enter a hex value by clicking on the color swatch beside Custom text color.
To make your text stand out even more, you can choose a custom Overlay color and increase or decrease the Opacity. Opacity essentially adjusts the translucence of the overlay, serving to add contrast to the image and added text.
You can also add a call-to-action button to direct customers to a product, page, or anything you want to from this home page section. Enter the URL or choose a page from within your store by clicking on the Link field. Write text that will appear on the call-to-action button in the Link text field.
The top section of your homepage is your store’s most valuable real estate. To make the most of it, merchants often employ a slideshow to showcase their most recent deals, top-selling products, and lifestyle images. Reach comes with a sophisticated, responsive slideshow section that can display up to six slides. Not only that, you can feature more than one slideshow and these can be positioned on the home page in whichever order suits your store.
Enabling the Auto-rotate slides will ensure that your slides rotate through at regular intervals without needing to click anything. You can choose the interval duration for the slides with the Autoplay delay slider, which ranges from a minimum of 3 to the maximum of 10 seconds. This mechanism will pause if the customer hovers the cursor over a particular slide, allowing them to explore a particular slide that catches their eye.
Each slide allows for a unique image, heading, text, and call-to-action link.
To start uploading images, click on the Select image button, choose your first image, and click Select again.
Reach has five slide text and image layout options to choose from:
- Text aligned to the Right (with the image on the left),
- Text aligned to the Left (with the image on the right)
- Full-width image with text aligned either to the Right, Center, or Left.
The first two allow a 50/50 split of space between the image and the text content, while the latter options share the width of the home page by overlaying text over the image. What size images you want to use can inform which layout is best for their respective slides, as well. Full-width slides should have a minimum width of 1400px in order to maintain quality across larger
Much like the Image with text overlay section, you can customize each slide's text color if the default color isn't legible against the image or background. Enable this the same way - click on the Use custom text color checkbox, then choose a color from the color wheel.
Enter a heading, text, and a button with a link in the respective fields, and choose a button style to suit each slide.
Use Reach's Featured product section to showcase a particular product that you'd like to highlight and promote.
Choose the desired product by clicking on the Select product button. Here you can choose a product by either searching for the product name or clicking on a product from the list. Once you've located the product, click Select again.
Customize the background color by choosing from the Default (your chosen Background color found in Theme settings > Colors) or Alternate (a mixture between your Background color and your Primary color). If you leave the description field blank, the product's description will be drawn from the product settings, but this can be used to override this text for the section and feature alternate text content.
You can configure the layout of the product images, text, and other aspects by opening the Theme Settings drop-down at the bottom of the section's controller. These are the same settings for the product page, so changes here will be reflected in the product pages and vice-versa. With these you can:
- Toggle image to display on left or right
- Configure aspect ratio of image
- Enable/disable social media sharing buttons
Enter a Heading and Subheading to introduce your Instagram feed.
To integrate your Instagram account, you will need to enter your Instagram Access Token. Follow the ? link (or click here) to learn how to generate your token. This can be then copied to the Instagram access token field in the section's settings.
You can customize the background color of this section by choosing between Default or Alternate.
The Twitter section displays your store's three most recent tweets. Simply enter an optional Heading in the first field, then your Username in the second. Since sometimes the things you post to Twitter don't always jive with your store design, you can configure what content is included in this feed. You can click the box Show retweets if you want to show posts that you've retweeted from other users and Show images if you want this type of media included in your feed.
Choose between Default and Alternate background colors again, and hit Save.
To help you build your mailing list, Reach comes with a customizable Newsletter section. Note that all email addresses collected by Reach's newsletter/email collection form will be added to your customer list (just click Customers in the Shopify admin). If you want to filter this list (purchasers versus newsletter opt-ins, for example) you can use the Filter customers dropdown, then select "Tagged with," then input "Newsletter" and click "Add filter." This will display everyone that signed up for your newsletter through your theme. If you want to sync this list to your email marketing service, you can click Export at the top and make the appropriate selection.
Enter an optional Heading and Text to show above your Newsletter.
Tip: Write something here to make your customers want to sign up for a newsletter. You can offer insider news, members-only promotions, or special discounts for people who are on your mailing list.
Choose between Default and Alternate background colors. To show or hide the envelope image that appears behind the newsletter, check or uncheck the Enable background image box.
When it comes to making purchasing decisions online, customer reviews and testimonials can make or break a sale. Reach allows you to build social proof and increase conversions with a uniquely-styled testimonial section built into your homepage.
Begin by adding an optional Heading and Subheading for all of the testimonials and setting the Background to Default or Alternate.
Click on a Name block to begin. Add the source's name in the Name field, a Link to their social profile, then their testimonial in the Caption box. If you want to include the platform from which the testimonial is taken from, you can choose between Facebook, Twitter, or, if the testimonial is from another source, you can choose Standard to show a regular quotation icon. You can also link to the specific product the testimonial references by clicking Select product in the Product section.
You can add up to three testimonials to this section.
Video with text
Video sections are a great way to build your brand, highlight special promotions and products with an immersive, site-spanning video. To accompany this, you can add text above your video section to tell visitors what the video is about.
Add an optional Heading, Subheading, and Text to introduce the video. Then choose whether to show the text above or below the video using the Text layout drop-down.
Next, copy and paste the link to your video into the YouTube or Vimeo link box, and set the Video aspect ratio (the relative height to width of the video player) using the dropdown below.
You can also set a Cover image to display when the video is not playing. If you do not add an image here, the theme will automatically display the video's "thumbnail" image (the image you see above in the Youtube or Vimeo link field). You can also choose which Play button style will show to users.
Note: the Play button style will only work if you've uploaded your own custom cover image.
Reach's Video section allows you to show an Overlay over your video when it isn't playing if you wish, but note that this only appears when a custom cover image is used. An overlay is essentially a semi-transparent filter. If you want to enable it, simply choose which Overlay color you'd like to use and set the Opacity (0% will make the image visible with no overlay, and 100% will show only the overlay color).
Start by setting the Section height from the top dropdown. Then, add a Heading (something like "Come say hi" or "Our workshop" should work) and Hours & Location (or anything else you think is relevant).
We've also included 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, you'll need to 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 Google Maps API key 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.
Last, if used any of the Overlay options for the Desktop layout setting, you can use the overlay Color picker to add a colored overlay on the map and use the Opacity slider to adjust it's opacity (note: set opacity slider to 0% to disable overlay).