Your homepage wireframe has been built for you, all you will need to do is add images, add a bit of text and make a few tweaks to the settings already there.

If you haven’t already prepared your homepage images, we strongly recommend you do so by following the instructions here:

> Xclusive Theme Image Sizes

This theme has been designed for page load speed and ease of building, customizing and launching therefore the numbers of images used have been reduced.

Once you have your images sized correctly you can begin customizing your homepage. Optimizing your images to the correct size for mobile desktop will significantly improve your page load speed scores.

Edit Homepage USP’s #

When you install your theme you will need to edit the USP messages:

To make it easier for you, we have made these visible on mobile but before you put your store live, you will need to hide these on a mobile.

To access the USPs and your homepage settings:

1. From your Shopify Dashboard, click Online Store
2. Click Themes
3. Click Customize (black button right of page)
4. Scroll down to the 2nd Dynamic Grid
5. Click on each banner (one by one) and scroll down on the right hand side of your screen until you get to Heading
6. Edit text accordingly
7. Click Save (top right hand corner)
8. Repeat the process for the other 2 banners
9. Click on the Dynamic grid above the 3 banners
10. Scroll down in the right sidebar until you get to Visibility
11. Unitck Visible on mobile
12. Click Save (top right hand corner)

Add Main Homepage Banner  #

To add your homepage banner you will need to access the customizer. From your Shopify Dashboard:

1. Click Sales Channels
2. Click Online Store
3. Click Customize (black button on the right hand side of the screen)
4. Click Themes

Underneath Home page > Template you will see the first Dynamic Grid:

1. Click the Dynamic Grid dropdown to expand (>) (or the image placeholder, you will notice it is highlighted in blue)
2. Click Banner underneath Dynamic Grid
3. On the right hand side, scroll down to Image > Background Image
4. Click Select image (2100 x 600px)
5. Select image from Store library or Upload image (2100 x 600px)
6. Click Save

Add Main Mobile Banner  #

Underneath the main background image, you will see another box called Mobile Background image

1. Repeat steps 4-6 above with the mobile image (300 x 470px)

Add Dynamic Grid Banners 1 & 2 #

Underneath Scrolling Text Banner, you will see another Dynamic Grid Section:

1. Click the Dynamic Grid dropdown to expand (>) you will see 2 banners this time, one for the left and right. 
2. Click on the first Banner (left banner) or the image placeholder on the left, you will notice the left image will be highlighted in blue)
3. On the right hand side, scroll down to Image > Background Image
4. Click Select image
5. Select image from Store library or Upload image  (900 x 570px)
6. Click Save
7. Underneath Background Image you will see Mobile Background Image
8. Repeat steps 4-6 above with an image 300 x 470px
9. Click Save

Add Dynamic Grid Banners 3, 4 & 5 #

1. Repeat steps above using desktop sized images of 690 x 570 and mobile images sized 300 x 470px

Editing Buttons & Text On Dynamic Grid Banners #

1. Click on the banner (not dynamic grid) on the left hand menu where you wish to edit the banner button (any banner)
2. On the right hand side you will see options for colors which can be edited to match your brand colours if required.
3. To edit Button Text scroll right down on the right hand side of the screen to Call To Action #1
4. Click in the box underneath Button Text
5. Enter required text
6. Click in Button URL and select link
7. Click Save (top right corner)

To Edit The Banner Text #

1. Repeat the step[s above but scroll down to Heading and edit the text…

Add ‘Best Sellers’ Dynamic Featured Products  #

Click on the first Dynamic Featured Products in the left hand menu. If you wish to change the name of this you can do so by clicking in the box under Header Title on the right hand side and edit this.

1. Scroll down to Collection > Collection to Use
2. Click Select Collection or + Create Collection of a minimum 4 products
3. Select collection
4. Click Save (top right corner).

Edit Parallax Image #

PLEASE NOTE – this image will not typically show up in the customizer as this images is set not appear on a mobile for speed optimization.

1. Click on the banner image underneath the Dynamic Grid under Dynamic Feature products (see image above)
2. Select image from Store library or Upload image  2100 x 900px (same as banner image)
3. Click Save

Edit Why Xclusive Text & Image #

To edit the Why Xclusive you will need to activate the section on mobile as you will not see this in the customizer to start.

1. Click on the correct Dynamic Grid Section highlighted below
2. Scroll down on the right hand sidebar and tick Visible on Mobile for the section to appear

Once this appears…

1. Click on banner underneath the Dynamic Grid Section
2. Scroll down on the right until you see Background Image & Mobile Background Image
3. Select desktop image of 690 x 570px and mobile image of 300 x 470px
4. Click Save (top right hand corner)

To edit the header and text…

1. Click on WHY XCLUSIVE underneath the banner as in above image
2. Scroll down on the right hand sidebar to Heading to change the heading and Description to change the description
3. Click Save (top right hand corner)

Add Featured Blog Posts #

If you already have blog posts on your blog, you can highlight these on your homepage. To display these on your homepage:

1. Click Blog Posts in the left hand side menu
2. Edit Header Title by clicking in the box in the top right hand corner of the screen (Header > Header Title)
3. Scroll down to Blog > Blog To Use
4. Click Select blog
5. Choose the blog category you wish to display
6. Click Save (top right hand corner of the screen)

If you blog images are not aligned correctly, this is usually down to 2 things:

• Blog post image sizes – these should be (1200 x 800 px)
• Blog post titles – keep them consistent lengths of either 2 or 3 lines

> Xclusive Theme Image Sizes

Editing The Site Footer #

RankHigherTheme® theme has 4 main footer areas which can edited as follows:

1. Click the Site Footer in the left hand menu to expand
2. Edit column heading and or content (top right corner of screen)
3. Click the next two menu headings to Select menus (if you need to change)
4. Click Klaviyo to enter your Klaviyo Embed Code

If you are already using another automated marketing provider, please submit a support ticket so we can help you get this installed.