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:

> Quantum 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.

---

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 900px)
5. Select image from Store library or Upload image (2100 x 900px)
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 an image (300 x 375px)

---

Edit Scrolling Text Banner #

---

1. Click on Scrolling Text Banner
2. Underneath Text click in the box provided
3. Enter required text or promo message
4. Use this site to search for and copy any emoji’s required (https://emojipedia.org/)
5. Click Save (top right hand corner)

---

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  (700 x 360px)
6. Click Save
7. Underneath Background Image you will see Mobile Background Image
8. Repeat steps 4-6 above with the exact same image
9. Click Save

---

Editing Buttons 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 – main banner has Call To Action #2 as well
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)

---

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).

---

Add Feature Dynamic Grid Banners 3 & 4 #

Underneath the first Dynamic Featured Products, you will see another Dynamic Grid which has the bottom left and right Banners.

1. Repeat the same process as you did for Dynamic Grid Banners 1 & 2 above

---

Add ‘Featured Products’ Dynamic Featured Products  #

Underneath Dynamic Grid Banners 3 & 4 are 3 more Dynamic Featured Products. On this theme, the Dynamic Featured Product grid works best on desktop and mobile on 2 or 3 rows of 4 and has also been designed for static image display, not carousel mode.

Please do not enable this for this theme as it may affect your theme design and layout.

1. Repeat steps 1- 4 above for each Dynamic Featured Product Grid (set to 4 products each.

If you wish to hide any of these rows to have just 4 displayed, not 8 or 12, just click the eye icon to the right of that section and it will put a line through it and hide on your design. Click Save after.

Edit Rich Text On Homepage #

The homepage has an editable text area which will help with SEO and internal linking. You can edit these 3 elements of title, text and button easily:

1. Click Rich text in the left hand sidebar menu
2. Click the T block to edit the title (editable box top right hand corner)
3. Click Text to edit text description (editable box top right hand corner)
4. Click Button to edit button as you would in a normal dynamic Banner

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

> Quantum Theme Image Sizes

---

Editing The Site Footer #

Quantum 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 choose 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.