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.
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.
Banner width
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.
Featured Collection
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 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 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.
Unlimited items to be added.
There are 2 types to display:
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