10. Mr Parker Theme: Setting up the Homepage
In this article, we will go through the process of setting up the editable, re-orderable sections on the Homepage.
The Mr Parker theme homepage uses Shopify editable, re-orderable sections ( theme version 5.1+). This means that instead of having one slideshow or one area for an image gallery you may now add multiple slideshows, multiple image galleries or repeat any content sections on your homepage as part of a much more streamlined and simplified setup.
Here is a list of the available Mr Parker homepage sections:
- Slideshow w/Video (added in V6.5)
- Image w/Text
- Image w/Text Overlay
- Shop the Look (added in V6.5)
- Featured Video
- Featured Collection
- Featured Product
- Blog Posts
- Instagram Feed
- Collection List
- Rich Text
Each slideshow w/video can contain up to 10 image or video slides, each with their unique color scheme, title, caption and call to action buttons.
Step 1: Choose Slideshow Settings
To create a slideshow w/video select Homepage from the template picker and go to the Sections tab, choose Slideshow w/Video. Below settings, select your preferred slideshow width, control style, video audio, slideshow height, heading size, heading weight, subheading size, button text size, and button text weight.
Step 2: Choose Slideshow Content
Below Content select the first slide and upload a slide image. We recommended that you use slideshow images with the same image ratio, as mentioned in our Image Sizes article, we suggest using the following sizes for your slideshow images; 1920px x 900px for full-width and 1200px x 800px when not full-width. Choose a heading, subheading, button text, link for the button, button text color, button background color, caption alignment, and caption background. Tip: If you do not want to show a button leave the text blank and choose transparent for the button color. Click Save. Now in the same way move on to the second slide up to a total of twelve slides.
The Image gallery consists of blocks which will show between 1-7 images each with size options ranging from 25% of the container row width to 100%. Having control over these block widths allows for different block layouts. We recommended that you use the same image ratio for each block, here are some suggested sizes: 1 image - 1600 x 900px (W x H), 2 images - 900px x 600px (W x H), 3 images or more - 600px x 400px (W x H), or square 1000px x 1000px.
Step 1: Choose Gallery Settings
Optionally give your section a heading, choose full width, and remove inner space.
Step 2: Choose Gallery Content
Below Content select, the first image, choose an image width, upload an image, choose a link for the image, an image heading, image subheading and color for the text. You have the option to show the text below the image or over the top of the image. Repeat this for the remaining images up to seven. In our example above, we made the first image left 66%, second right 33%, third right 33%, fourth left 66%, fifth right 33%, and sixth right 33%. There are so many different combinations of grids you can create.
Image with text
The Image with text is a very versatile section, you can add a heading, subheading, and button, paired with an image. You have the choice to position the image to the left or right. This section looks really good if you use two of them in a row on your homepage one with the image to the left and one to the right.
Image with text overlay
The Image with Text Overlay is a full-width background image with overlay text. For each image, you can add a heading, subheading, and button. Mr Parker has an option to fix the image in the background giving it a neat look.
By default, the Featured Video section does not show on the homepage, but you can add it by going to Add Section in the sections tab. Click the blue Add button and paste the URL of a video on YouTube or Vimeo into this section to display that video on your homepage.
Choose a featured collection of products to show within a grid layout. You can select how many total products show and how many products per row.
The Featured Product section gives you the perfect opportunity to feature one of your more really important products on your homepage, customers can add the item to the cart directly from the homepage. In the settings choose the product you want to feature along with some basic product form settings.
Choose a blog to pull blog posts from within your store and s
Show the six most recent images from your Instagram feed, add more feeds if you have more than one Instagram account. You will need to retrieve your Instagram access token by generating
Collection List is a list of selected collections to feature. First, choose your Collection List settings, choose a grid of 2, 3 or 4 collections. Then, under content select each collection to feature.
The Map section can be used to show your store location and business hours with an image, or to use Google Maps you will need to get an API
Shop the Look
Shop the Look is a new section that was added in Mr Parker V6.5+. This section is a great way to sell items from a specific look. Here in this example we are featuring the products on this table. First we suggest you resize your look image to be a square size, in our example we are using a transparent PNG file.
You can see above as we highlight the image the left and right sides of this square image are transparent.
Next you will need to create a collection and manually add all the products you want to show in the section.
From the theme editor you will go to the sections tab and click Shop the Look. Select your new collection, upload your look image, and save your changes!
The Rich Text section allows you to use text content on the homepage. You can use the rich text box to type your message or in content from a Shopify page.
The Newsletter section allows you to include a subscription form for a newsletter, it also shows your social media icons.
That is all the homepage sections for the Mr Parker theme, remember you can show each of the above sections more than once with different content within each of them! Time to move on to the All Collections page.