10. Fashionopolism Theme: Home page
Your theme home page is made up of several sections which can be enabled, disabled and re-ordered as often as you would like to.
Each section can be repeated with unique content as often as is needed.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 Fashionopolism homepage sections:
- Blog posts
- Collection list
- Featured collection
- Tabbed collection
- Image Gallery
- Image with text
- Image with text overlay
- Featured product
- Rich text
- Text boxes
- Text columns with images
Choose a blog to pull blog posts from within your store and show
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, choose whether you want the collection name below the image or over the top as an overlay, and choose to show the number of products in the collection. Then, under content select each collection to feature.
Choose a featured collection of products to show in a carousel, give it a heading and select how many products to show in the carousel.
Choose up to five collections to display products from and up to 20 products from each collection in the carousel. A carousel of products are displayed from each associated collection depending on the active tab.
The Image gallery consists of blocks which will show between 1-4 images each with size options ranging from 33% of the container 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).
Step 1: Choose Gallery Settings
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 (shown on hover) and color for the text. Repeat this for the remaining images up to four. In our example above, we made all three images 33% wide.
Here is an example of the first image set to 66% wide and the other two set to 33% wide.
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. Additional options include specifying the text alignment for the subheading, enable full width and removing the bottom margin.
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, body copy, and a button. The heading includes options for text content, text size, text weight and color. Similarly, the body text has options that control the content that is displayed, text size, text weight and color. The button has options to control what text is displayed, specifying a hyperlink to link to and the button text color and background color.
Each slideshow can contain up to five images, each with their unique color scheme, title, caption and call to action buttons.
Step 1: Choose Slideshow Settings
To create a slideshow select Homepage from the template picker and go to the Sections tab, choose Slideshow. Below settings, select your preferred slideshow width, speed, 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 five slides.
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 all the typical product form settings.
The Newsletter section allows you to include a subscription form for a newsletter, it also shows your social media icons.
The Map section can be used to show your store location and business hours, to use Google Maps you will need to get an API code here.
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.
Display up to 12 text testimonials in a carousel on the homepage. Each testimonial supports a header, body text and can have a star rating of 1 through 5.
Displays up to 3 text box columns in a row. Includes the options to change the text size, text weight, border style and border size. Each text box displays rich text that can be bolded, italicized and can either contain a link or allow the entire text be linked by using the Link option. Each text box also includes options to specify the text color, background color and border color for that box.
Text Columns with Images
The Text Columns with Images section allows you to feature 1-3 text columns with or without images. Each column also has an option for a heading and subheading of text.
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, and choose whether to show the video at full-width or not.