One of Reach's most distinguishing features is its ability to showcase a Story—an engaging feature accessible anywhere from your store's 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 and tell your story.
Covered in this article:
- Create the static page
- Story template missing from page editor
- Workaround for the missing template
- Adding content to the story page
- Features list
- Images with text
- Image with text overlay
- Rich text
- Video with text
Create the static page
In the Shopify admin, Online store > Pages > Add page. Give your page a Title, but there's no need to add anything in the Content area—this page's contents is customized in 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.
This template will only be visible if Reach is the published theme in your store. "page.story.ajax" should not be selected.
Story template missing from page editor
If Reach is not the published theme, the story template will not appear in the Pages editor. There is a workaround for this, but it involves a minor adjustment to the live theme.
Workaround for the missing template
In the theme files for the live theme (Actions > Edit code), under Templates, select the Add a new page template link
Select Page from the dropdown, then add "story" to the field (replacing "alternate").
Select Create template
In the live theme, this should have no effect; any pages using this template with the live theme will just serve as a standard, blank page template.
In the Draft Reach theme, however, this will connect that page with the custom content unique to the Reach theme.
Open the page in the theme editor
Back in the theme editor, start building the story page's content.
To access the story page features, select the page from the page selector. This should bring up a blank page in the theme editor, with a Story section under the Sections tab.
Adding content to the story page
There are several content blocks to choose from. Include up to a maximum 43 blocks using:
- Features list (max 6)
- Gallery (max 6)
- Images with text (max 5)
- Image with text overlay (max 5)
- Rich text (max 5)
- Share (max 6)
- Testimonials (max 5)
- Video with text (max 5)
There will be a number of preset blocks to customize when the section is opened. These blocks can be moved by clicking, holding, and dragging with the cursor.
Remove a block by opening the block and selecting Remove content at the bottom.
To add a block, select [+] Add content.
Outline up to six product or company features in the Features list of the Story page.
Introduce the features
Start by entering an optional Heading and Subheading, then start adding features.
Customize the features
Choose an Icon for your first feature. All available icons are listed here. Copy the text beside the icon, and paste it in the Icon field in the theme editor. If you want to show the open envelope icon, for example, copy the text "envelope-open" and paste it to the Icon field.
Add the Heading and Text for each feature using the provided fields.
The Gallery section of your story can be used to showcase any images that promote your brand—images of products, behind-the-scenes, logos, etc.
Introduce the gallery
Add optional Heading and Subheading text, then choose the Background style.
You can add up to six images in this section. Click Select image to choose the image. There are different image dimension recommendations depending on the total amount of images included:
- 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
Use images at twice the resolution listed above for retina support. If an image is smaller than the recommended size, it will be scaled up in the browser, which can cause distortion.
Images with text
The Images with text section is essentially a cross between the Image with text overlay and the Features list. 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.
Add the images and text
Begin by adding an image. Click on Select image to choose image(s).
Add a Heading and Text to accompany the image. Reach supports up to four images in this section.
Image with text overlay
Use this section for lifestyle photography, product shots, mission statements, or to promote specific products or pages within your store.
Add the image
Start by adding a 1160 x 560px JPG or PNG image. Click Select image to choose the image.
Add the text
Add optional Heading, Subheading, and Text, and choose text alignment from Text layout drop-down (Left, Right, or Center).
To configure a custom color for the text, enable the Use custom color box and choose a new color from the Custom text color selector.
Include a call-to-action button
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.
Display a block of text-based content using the Rich text feature.
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 Testimonials feature.
Introduce the testimonials
Begin adding testimonials by adding an optional Heading and Subheading for all of the testimonials and setting the Background to Default or Alternate.
Customize the testimonials
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.
Video with text
Video sections are a great way to build your brand, highlight special promotions and products with an immersive, site-spanning video. Also add text above your video section to supplement the displayed media.
Introduce the video with text
Add an optional Heading, Subheading, and Text to introduce the video. Then choose to show this text content above or below the video using the Text layout drop-down.
Connect the video
Copy and paste the link to your video into the YouTube or Vimeo link field, and set the Video aspect ratio (the relative height to width of the video player) using the provided dropdown.
Include a cover image
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 in the Youtube or Vimeo link field. You can also choose which Play button style will show to users.
The Play button style will only work if you've uploaded your own custom cover image.
Add an overlay color
The feature allows you to show an Overlay on your video when it isn't playing. This appears only 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 and set the Opacity using the provided slider (0% will make the image visible with no overlay, and 100% will show only the overlay color).
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 Facebook, Twitter, or Pinterest through the Share section.
In order for the Pinterest share button to appear, an image must be present.
Include an image
Upload an image by clicking Select image. Use an image that's 1160px by 560px.
Introduce the share feature
Add a Heading and Subheading using the provided fields.
If the font color clashes or camouflages with the image used, customize it by clicking the Use custom text color box. Select a new color by clicking on the color swatch next to Custom text color. 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.
Add an overlay
To make the text stand out even 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 opaque, drag the slider to the right.