Homepage sections

Homepage sections


There are 13 different sections available on Homepage.

Slideshow


Image Size

Recommend size: width >2048 for Retina, 1600 for best performance.
Enable Full-height: if enabled, slideshow will auto scale all images to equal the height of screen. Recommend to enable this function.
If disabled, your images should have the same size to prevent blank space.

Responsiveness

You can upload separate image on desktop and mobile.

If there's no uploaded image in Image on mobile, the slideshow will cut off image on desktop when in responsive mode to keep enough space for text and button on image.  If you don't want that, you can change Responsive option from Auto to Manual.
Then you can add your own responsive style manually in Edit code > Assets > theme.scss.liquid.

Youtube background video

To upload video on slideshow, you need to find Youtube video id. Read this article to know how to find it.
Note: Although you upload a video, you should upload an image in that slide in case the video can't load, it'll show your image instead.

Behind the header

You can enable this option so the slideshow will be pulled up under the header (Note: if enabled, all margin applied might not work).
You can decrease header opacity in Theme settings > Colors > Header > Header opacity. 
Fort detailed instruction of transparent header, please read this article.

Banners

Unlimited banners to be added.


Set the width for each banner in Design options.
To set a banner in full-wdith, uncheck “Use container” option.

Enable masonry layout

If enabled, banner will place in optimal position based on available vertical space.
If disabled, banner will place in row.

Collection list

Unlimited collections to be added.
Set width of each collection and they will be automatically ordered in masonry grid.
To set a banner in full-wdith, uncheck “Use container” option.
Set image of each collection (it's not taken from Featured Image in collection setting)

Note: recommend to use Banner section to show image and link to collection instead of Collection list because Banner has more customize options.

Select a collection to show its products. Products are sorted by the order in Collection. To change the order, navigate to that collection in your Shopify admin > change Sort option to Manual.

There are 2 types of display collection: Grid or Carousel.




If you want to show products from many collections, use Product Tabs instead.
If you want to show selected products, use Product List instead.

Image with text


You can freely set the position of image and text. For text, there are different options to place title and description separately.
Unlimited images and text to add.
If your image is too small, you should use the "Adjust image position" to place image in the suitable position.

Note: if you want to have a full-width image with text over it, you should try the "Image with text overlay" section.

Image with text overlay



Place a full-width image with text over it. 

Section's height type: 
  • If set "Auto", it'll apply the Margin and Content spacing
  • If set "Fixed", it'll show a fixed height as the number you input. 

Video



You can add video and image together within this section.
To add youtube or vimeo video, you need to find Embed code. Read here to know where to find it.

Lookbook

Upload your lookbook image and add a hotspot (dot) to specific product in image.
  • To create lookbook, first set Item width to change the number of images per row
    • 25% = 4 images per row
    • 33.333% = 3 images per row
    • 50% = 2 images per row
    • 100% = 1 image per row
  • Next, add an image
  • In each image, you can link up to 3 products
  • After adding product, a dot will appear to show the selected product. Each dot represents a product.
  • Add the position of the dot in Dot postion with format: xx% yy%, in which xx% is the percentage of the dot position compared to the height of image, and yy% is the percentage of the dot position compared to the width of image. Example: "40% 30%" means this dot will place in 40% of the height and 30% of the width of image.


  • Next, choose the position of product to appear when hovering on the dot: Top (above the dot), Bottom (under the dot), Left (left side of the dot), Right (right side of the dot)

Product list



Show selected products.
Same as Featured Collection, this comes with 2 types of display: Grid or Carousel.
If you want to show products from a collection, use Featured Collection instead.
If you want to show products from many collections, use Product Tabs instead.

Product Tabs

Select more than one collections to show as Tabs.




Same as Featured Collection, this comes with 2 types of display: Grid or Carousel.
Products are sorted by the order in Collection. To change the order, navigate to that collection in your Shopify admin > change Sort option to Manual.

If you want to show products from a collection, use Featured Collection instead.
If you want to show selected products, use Product list instead.

Instagram feed

Remember to paste your Instagram Access Token in Theme Settings > General > Instagram Access Token. You can get this token key here.

Blog posts

Select a blog to display. Blog feed automatically sorts by latest posts.
You need to enter title, sub-title, choose the blog categories and number blogs. There are other options to display:


Newsletter

To make this work, you need to put your MailChimp form action URL in Theme Settings > General.
Read here to know how to find it.

Store Information

Unlimited items to be added.
There are 2 types to display:
  • Horizontal:

  • Vertical:


To use icon, you need to go to Aries Icons Library: http://adart.co/aries/svg-icons/ > find your icons > copy its class name and paste to the Icons font for store information field.
Eg. icon-ast-earth-outline






    • Related Articles

    • Homepage Configuration

      Homepage Sections There are 12 different sections available on Homepage. Slideshow http://take.ms/fvWma Recommend size: width >2048 for Retina, 1600 for best performance. You can enable Full-height function. Add unlimited content, each slide comes ...

    • Homepage Sections

      There are 12 different sections available on Homepage. 1. Slideshow http://take.ms/fvWma Recommend size: width >2048 for Retina, 1600 for best performance. You can enable Full-height function. Add unlimited content, each slide comes with many ...

    • Gemini - Changelog

      Remember! Whenever you update a new version of Gemini, please remember: In the old theme on your store, click Actions > Edit code > find the folder Config > settings_data.json > copy all code in this file Paste to the same settings_data.json in the ...

    • Aries - Changelog

      To save all modifications from the old version to the new one, please follow our instruction here: Install & Update theme Version 1.0.6 – Jan 14th, 2019 Fix URL to get Instagram access token Fix minor bug when option value contains special characters ...

    • Other Pages

      About us To create About page, navigate to Shopify admin > Online Store > Pages > Add page. Put your Page Title and Content, and then choose Template suffix (on the right sidebar) as page.about. To customize About page, navigate to Customize theme > ...