Fashionopolism Theme: Home page

On this page:

Blog posts

Show Blog posts ( articles ) from a chosen Blog within your store

Section settings

  • Heading
    Add a heading to the Blog section
  • Blog
    Select a blog from which to display articles (posts).
    Providing your article includes a featured image then it will be shown here.
  • Posts shown
    Choose how many posts will be shown, if the selection is a multiple of 3 posts will show at 3 per row, otherwise 2 per row.
  • Show published date
    Optionally show the date below each blog post title.
  • Text align
    Set the alignment of blog post excerpts and titles

Collection List

A collection list is a great way to bring focus to key Collections in your store.

Section settings:

  • Collection content
    Add up to 12 Featured collections within this section.
    If the collections that you have chosen to feature have been assigned a Featured image then this will show here. If not then the image from the first product in that collection will be shown in its place.
  • Heading
    Optionally add a heading for this section.
  • Collections per row
    Choose how many collections will show per row
  • Show product count
    Toggles display of the number of products in each Collection

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. 

Section settings:

  • Heading
    Add a Heading for this section
  • Collection
    Choose a collection from which products will show
  • Display in Carousel
    Toggle the display of a Carousel or grid layout
  • Show view all button
    Toggles a button that links to the collection chosen
  • Reduce section width
    Reduces the width of the featured collection section
  • Product Grid
    Choose how many products fit per row ( Switches to 2 on mobile )
  • Products shown
    Up to 30 products can be displayed in a Featured collection, if you intend to show more than one Featured collection we recommend that you keep the number of products shown in each to a low number as the more products you display on your home page the more this will slow down the page load time.

Tabbed Collection

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. 

Section settings

  • Heading
    Optionally add a heading to this section
  • Show collection count
    Show the total number of products from each selected collection
  • Show button
    Add a button linking to the selected collection

Block content settings

  • Collection
    Choose a collection from which products will show
  • Product grid
    Choose how many products fit per row ( Switches to 2 on mobile )
  • Products shown
    Up to 20 products can be displayed from each collection, if you intend to show more than one Featured collection we recommend that you keep the number of products shown in each to a low number as the more products you display on your home page the more this will slow down the page load time.

The Gallery section allows you to show up to 6 hero images with text and buttons that bring focus to key areas of your store.

Section settings

  • Enable full width
    Allow this section to span the full width of your browser.
  • Heading & size
    Control the size of text shown within all blocks

Image (block) settings

  • Image, size, and visibility
    Upload your image and set the container width for that to dictate how much of the available width of the page each will take.
    Choose from: 25, 33, 50, 66, 75 & 100% for some structured layouts that wow your customers.
    Your images will scale, but we recommend using the following image widths to ensure good responsive quality:
    •  100% width: 1920px wide
    •  66% - 75% width: 1200px wide
    •  50% width: 1000px wide
    •  33% width: 800px wide
    •  25% width: 600px wide
  • Links & text
    Optionally add a link to each image, text, and a button to add that all-important call to action that gets your customers shopping.
  • Style and positioning
    Choose the color scheme and position of your text content on each image.

Image with Text

Show text alongside an image with control over size and layout.

Block settings

  • Image
    Upload an image to show alongside text in this section. The width of this image is dependent on a controllable width (shown below)
    Some recommended images are shown below:

    •  Image width = 1: 300px wide
    •  Image width = 2: 500px wide
    •  Image width = 3: 1000px wide
    •  Image width = 4: 1200px wide
  • Layout
    Choose left or right alignment of the image
  • Image width
    Set the width of the image ( see above sizes ). The section is 6 columns wide, the text area will automatically fill unused space.
  • Text, links and buttons
    Add text, links and buttons pointing to content in your store.

Image with Text Overlay

This section will display a full browser width image with an optional scrolling or fixed position as you scroll down the page.

Section settings

  • Image
    Upload a landscape-oriented image, 1800px x 800-1000px recommended
  • Add overlay
    Adds a slightly darkened overlay to the image which will help text contrast
  • Image effect
    Choose between a parallax scrolling or static image
  • Image scale
    Sets the scale of the image which will increase or decrease the parallax scrolling effect when enabled
  • Image height
    Control the height of the image as it appears on the page
  • Text content & style
    Add text, links and choose color and layout styles for any added text captions.

Slideshow

Your slideshow can contain up to 5 slides images.

Section settings:

These settings affect the slideshow as a whole, each of its blocks ( slides ) will inherit these global settings.

  • Enable full width
    Show the slideshow at full browser width
  • Slideshow speed
    The time that elapses between each slide
  • Navigation style
    Choose between dots or arrows
  • Slideshow caption text
    Set the size of your Slideshow caption text

Slide ( Block ) settings:

  • Desktop image
    Upload a large image, your slideshow will span the full width of the browser, we recommend 1800px x 800 - 1000px
    The height of the slideshow is dictated by the height of the images that you use. Make sure to use images that have the same height to width ratio to ensure best results.
  • Image overlay
    When enabled adds a darkened overlay to your images which can help to contrast between images and text added to the slide caption.
  • Caption alignment and positioning
    Text within a caption can align to the Left, Center or Right, Slide captions also include horizontal and vertical controls allowing you to position your caption with pinpoint accuracy.
  • Mobile image & caption display
    Optionally add a mobile image that will be shown on small devices.
    Because images scale in size for smaller screens you can also choose to position your slideshow caption below the mobile image ensuring that the image is not covered by that content.
  • Caption content
    All a heading, subheading, and up to 2 buttons per slide.
  • Caption styles
    Control the color scheme for each slide independently ensuring the best potential display of your hero content.

Showcase a specific product in your store with this section that leverages a similar setup to the Product pages in your store.

Section settings

  • Heading
    Add a heading to this section
  • Product
    Select a product to showcase and optionally add a heading for this section.
  • Show social share icons
    Adds Facebook, Twitter and Pinterest icons for social media sharing
  • Media
    Select thumbnail position and optional click to enlarge gallery.
    Enable video looping where videos are shown to show a continuously running video.

Map

Adding a map can help new customers to discover a local business that was previously unknown to them

Section settings:

  • Text, hours, and location
    This section allows you to enter text content that will be shown to the right or left of a map or background image.
    This is a great area to show customers your opening hours and include an address where they can visit your store.
  • Maps & Background images
    Adding a map is as simple as entering the address for it.
    The map section connects to the Google maps API but does require an API key to be obtained from Google.
    Shopify does document the best way to achieve this with these detailed instructions.

Rich Text

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.

Testimonials

Display up to 12 text testimonials in a carousel on the homepage with automatic rotation

Testimonials sections as seen in the theme's demo store.

Section settings

  • Heading
    Add an optional heading to this section
  • Rotate every
    Automatically rotate through testimonials when more than 3 exist, choose how many seconds to pause before change
  • Star color
    Testimonials include star ratings 1-5 set the color of those stars

Testimonial ( block ) settings:

  • Heading
    Add a heading, displayed in Bold type to each testimonial
  • Star rating
    Select the rating 1-5
  • Testimonial text
    Add text to accompany the testimonial

Text Banner

Add text blocks to the page that will show in a grid layout at different widths dependent on the number of blocks selected, ranging from 1 to 3.

Section settings

  • Heading & Text size
    Control the size of text within this section
  • Vertical padding
    Controls the height of this section and spacing between the text and its outermost edges
  • Space between columns
    Control how much space will be shown between each text block
  • Colors
    Set the background and text color of this section
  • Add divider between columns
    Add a thin vertical border between each block

Block settings

Content for this section consists of text blocks that will show horizontally aligned to one another
- When 1 text block is used the content will center on the page.
- When 2 text blocks are used each will take 50% of the page width.
- When 3 text blocks are used each will take 33% of the page width.

Text Columns with Images

Similar to galleries Image columns with text show images that show in a grid format adjusting to the number of blocks chosen. This section is more simplified with each blocks text content will show below its respective image with globally controlled colors

This section will automatically resize based on the selected number of blocks 1-3

Section settings

  • Heading
    Optionally add a heading to this section
  • Text alignment
    Set the text alignment for blocks in this section

Block settings

  • Image
    Choose an image to display in this section
    When 1 block: Image should be 1200px wide or greater
    When 2 blocks: Images should be 800px wide or greater
    When 3 blocks: Images should be 600px wide or greater
  • Link
    Optionally add a link that will be applied to the image
  • Heading & text
    Add text content to be shown below each image.

Add some video content that will bring life to your homepage, as a standalone video or as a background to some featured text