Reach's story feature

Story

One of Reach's most distinguishing features is its ability to showcase a Story, accessible anywhere on your site through the header. Setting up a Story takes a few steps, but it's well worth the time. Use the Story feature to immerse customers in your brand: outline product features, boast testimonials, show off behind-the-scenes work with videos and an image gallery, introduce your mission with images and text, and encourage people to share your story. 

To start, you create a new page and assign a story template to it. Go to your Shopify admin, and click Online store > Pages> Add page. Give your page a Title, but don't worry about writing anything in the Content area—we'll build the page right within the theme editor later on. In the Template area on the right-hand side of the screen, click on the Template suffix dropdown, and choose the page.story option. Click Save, and navigate back to the theme editor.

In order for these templates to be visible in the page editor, the Reach theme must be published. If you don't want the theme to be live while you build this feature, make sure you store is password protected and not visible to customers.

Back in the theme editor, you can start building the actual story page. From the top bar in the theme editor, click on the pages drop-down and find the title of the page you just created. This should bring up a blank page in the theme editor, with a Story section under the Sections tab. Click on that section, and start putting together your story to share. Note: You can add as many sections to the story as you like, and can even repeat sections! We'll go through how to set up each block, and at the end of this tutorial, we'll guide you through how to hook it up to your header and how to create a notification.

CONTENT

Image with text overlay

Use this section for lifestyle photography, product shots, mission statements, or to promote specific products or pages within your store.

Start by uploading an image. We recommend using a JPG or PNG that's 1160 x 560px. Click Select image, choose the image, click Select. Add optional Heading, Subheading, and Text, and choose text alignment from Text layout drop-down (Left, Right, or Center).

If you find that your default text color clashes with (or camouflages into) the image, check the Use custom color box and choose a new color from the Custom text color selector.

You can add optional text and a link to display a call to action button.

You can also add an overlay to the image to make your text stand out even more. Select the Overlay color, then adjust the Opacity slider to configure the contrast between the image and text overlay.

Testimonials

When it comes to comparing products 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 right into your homepage.

Begin adding testimonials 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, 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.

Gallery

The gallery section of your story can be used to showcase any images that promote your brand: shots of products, behind-the-scenes, logos, team members—anything!

Add optional Heading and Subheading text, then choose the Background style (similar to how the home page sections each have customizable background styles).

You can add up to six images in this section. Clicking  Select image, choose the image, Select, and repeat.

We recommend uploading images at twice the resolution listed below for retina support. If an image is smaller than the recommended size, it will be scaled up in the browser, which can cause distortion, like blurring. Here's a list of recommended image widths for the Gallery section, depending on how many images you might use:

  • When 1 image
    • Width: 540px
  • When 2 images
    • Width: 592px
  • When 3 images
    • Width: 384px
  • When 4 images
    • Width: 280px
  • When 5 images
    • Image 1 - Width: 600px
    • Images 2/3/4/5 - Width: 292px
  • When 6 images
    • Image 1/4 - Width: 395px
    • Images 2/3/5/6 - Width: 189px

Video with text

Video sections are a great way to build your brand, highlight special promotions and products with an immersive, site-spanning video. If you wish, you can add text above your video section to tell visitors what the video is about.

Add an optional HeadingSubheading, and Text to introduce the video. Then choose to show this text content 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 on your video when it isn't playing, but note that this only appears when a custom cover image is used. 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). 

Features list

Outline up to six product or company features in the Features list of the Story page.

Start by entering an optional Heading and Subheading, then start adding features. 

First, choose an icon for your first feature. All available icons are listed  here. Once you've decided on an icon, copy the text beside the icon, and paste it in the Icon field in the theme editor. For example, if you want to show this open envelope icon, copy the text envelope-open:

And paste it here: 

Next, add the  Heading and Text to describe the feature, and click Save.

Images with text

The  Images with text section is essentially a hybrid between the Image with text overlay and the Features list. You can use it to list features, promote products, and demonstrate a process to your customers. Each image displays in an alternating right and left layout along an offset grid.

Begin by adding an image. Click on Select image, choose an image, and then Select. Add a Heading and Text to accompany the image, then click Save. Reach supports up to four images in this section.

Share

Nobody can deny the impact social media has on businesses, which is why Reach makes it easy for customers to engage and share your story on various social media platforms through the Share section.

Choose or upload an image with the Image uploader.  We recommend an image that's 1160px by 560px. Add a tagline to the Heading and Subheading fields.

If your default font color clashes or camouflages with the image you've chosen, you can customize it by clicking the Use custom text color box. Here you can select a new color by clicking on the color swatch next to Custom text color. You can pick a new color manually or enter a hex code (e.g. #2f5d62) in the hex field in the lower right portion of the color picker:

To make your text stand outeven more, customize the overlay by clicking on the swatch next to Overlay color, then adjust its opacity with the Opacity slider. To make the overlay more translucent, drag the slider to the left. To make the overlay more prominent, drag the slider to the right.

Share buttons will automatically appear on the images included in this section. When a customer clicks on a Share button, three social media accounts will pop up (Facebook, Twitter, and Google +). Just click on one of those platforms, and the sharing field will automatically populate with your story link.

Creating a story notification

So far, we've created a Story page using the Story template, and put together the actual story within the theme editor. 

Now we can combine it with the header and add a notification:

From the Sections tab in your theme editor, click on the Header section. Scroll down to the bottom of this section and find the Story settings. They'll look like this:

Click on the Select page button, and choose the page that you created that was changed to the page.story template. Click Select, and you should see a book icon appear in your header:

Now, you can click on that book icon any time, and your story page should come into view.

To set up a notification to draw attention to your story, click the Add story notification link under the Content section on the Story settings of the Header section. 

First, add an image to the notification. Click on the blue Select image, and choose an image from your Library or browse and select a Free image. Add a Heading and a Caption to grab the attention of your site's first-time visitors.

Once you've filled in these notification settings, you should see a small window pop up beneath your header, close to the story icon.

Notifications will appear to new visitors to the site, and won't appear for another 30 days after the notification is dismissed.