Sydney

Below you’ll find a list of articles broken down by sub topics that cover each and every aspect of your theme. We regularly maintain our documentation in collaboration with our support staff.

General Settings

Settings that are used in almost all sections

Section margin

Allows you to change the top and bottom margin in the section

1. Top margin slider allows you to change the top margin in the section.
2. Bottom margin slider allows you to change the bottom margin in the section.

Section padding

Allows you to change the top and bottom padding in the section

1. Top padding slider allows you to change the top padding in the section.
2. Bottom padding slider allows you to change the bottom padding in the section.

Back to Top

To enable Back to Top button, navigate to Theme settings > Advanced.

Color swatches

To enable and edit Color swatches, navigate to Theme settings > Color swatches. Swatch trigger should be the same as the option in Product variants. You can also add custom colors by adding their name and color in HEX format.

Infinite scroll

To enable and edit Infinite scroll, navigate to Theme settings > Pagination > Pagination type.

Header Group

Sections that are used on all pages by default

Announcement bar

The announcement bar appears at the top of every page and includes custom messages with optional links. It's good to use for promoting sales or need-to-know updates.

1. Use the Add announcement button to add an announcement.
2. Color scheme selector allows you to change the color scheme. (You can change the background color in the Theme settings.
3. Text field allows you to add and edit text.
4. Use the field Icon (Optional.) to add/change the image.

Header

There are several types of the header in this theme. You can choose a variant.

1. Use the Header variant on large screen field to select a variant of the header.
2. Height slider allows you to change the header's height only on desktop devices.
3. Use the sticky header field to select a variant of the header when user scrolls in page.
4. Enable country/region selector field enables the display of country/region.
5. Enable language selector field enables the display of language selector
6. Choose a Menu to be displayed in the header.
7. Use the Logo image file selector allows you to select or upload your logo file.
8. Use the Logo image 2 file selector to select or upload your logo, which can be seen in Dark mode.
9. (Optional.) If you add a logo, you can use the Custom logo width slider to change the logo size.
10. Heading allows you to set a heading for the Search modal.
11. Show collections field enables the display of collection links in the Search modal and the settings below allow you to customize these links.
12. Show popular items field enables the display of popular items in the Search modal, and the settings below allow you to choose and customize these items.
13. Show articles field enables the display of blog articles in search and the settings below allow you to customize these articles.

Fullscreen menu

1. Enable menu field enables the display of a Fullscreen menu and adds a hamburger menu icon to the header.
2. Heading allows you to set a heading for the Fullscreen menu, which displayed in the header.
3. Choose a Menu 1 to display it in a large size.
4. Choose a Menu 2 to display it in a small size.
5. Show social field enables the display of social icons.
6. Show collections field enables the display of collection links in the Search modal and the settings below allow you to customize these links.

Mega menu

To add a Mega menu, make sure that the main menu link has sublinks, and then follow these steps:

1. Add the Mega menu to the Header.
2. Type the exact name of the link in the Trigger field.
3. Heading allows you to set a heading for the Mega menu
4. Collection field enables the display of collection links in the Mega menu.

Search

In this theme, you can use a predictive search. It is enabled by default, but you can disable it in the Theme settings > Search.

You can also enable the Search promo block in the Header settings. There are 3 types of information that can be added to this block: products, collection and blog posts.

Overlay Group

Popup

In the Popup settings, you can change layout, add image, subscribe form, edit position, change open and exit animations and options.

You can also use this popup as a button-trigger for opening another popup or notification bar by following these steps:

1. Add the id of the popup/notification bar you chose to open to the Id field in the Triggers section (e.g. "popup").
2. Navigate to the popup/notification bar settigns and add the Id with "#" in the beginning to the "CSS selector for manual trigger" field.

Notification Banner

In the Notification Banner settings, you can change layout, add image, texts, edit banner position, change open and exit animations and options.

You can also use this banner as a button-trigger for opening another notification bar or a popup by following these steps:

1. Add the id of the popup/notification bar you chose to open to the Id field in the Triggers section (e.g. "popup").
2. Navigate to the popup/notification bar settigns and add the Id with "#" in the beginning to the "CSS selector for manual trigger" field.

Age verification popup

An Age verification popup is a prompt that appears on a website to confirm the user's age before accessing restricted content. In the Age verification popup settings, you can change customize text and buttons. .

Footer Group

Sections is used on all pages by default

Footer

Footer appears at the bottom of every page. You can customize it to fit your brand and product offerings.

1. Use Color scheme selector to change the color scheme.
2. Enable border top field enables a line above the section.
3. Use the Image file selector allows you to select or upload your logo file.
4. Use the Image 2 file selector to select or upload your logo, which can be seen in Dark mode.
5. (Optional.) If you add a logo, you can use the Custom logo width slider to change the logo size.
6. SIGNUP FORM allows you to add and customize subscribe form.
7. SOCIAL MEDIA ICONSfield enables the display of social media icons in the bottom line of the footer.
8. FOLLOW ON SHOPTo allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled.
9. PAYMENT METHODS field enables the display of payment methods in the bottom line of the footer.
10. COUNTRY/REGION SELECTOR field enables the display of the region selector in the footer.
11. LANGUAGE SELECTOR field enables the display of the language selector in the footer.
12. POLICY LINKS field enables the display of the policies links in the footer.
13. Block Column allows you to select menus, which will be displayed on the top line of the footer.
14. Block Info allows you to add additional description, which will be displayed on the top line of the footer.

All sections

The theme contains several customizable sections that you can add to your page in any order.

Slideshow

The section allows you to add slides with image and heading

1. Section under menu checkbox allows you to enable this section with full screen and make it under menu

   

2. Heading position selector allows you to choose top or bottom position for heading. It is recommended to select the bottom position if the 'Section under menu' option is enabled
3. Enable autoplay checkbox field allows you to enable autoplay for slider
4. Stopping on hover checkbox field allows you to stop slider autoplay while hovering
5. Enable parallax checkbox field allows you to enable the parallax effect for sliding
6. Speed slider allows you to change speed of transition between items
7. Delay slider allows you to change delay after each slide
8. Sliding effects selector allows you to choose a few sliding effects
9. Block Slideshow slide item options Color scheme selector to change the color scheme for the block.
10. Block Slideshow slide item options Subheading 1 and Subheading 2 allows you to set a subheadings for the block.
11. Block Slideshow slide item options Heading allows you to set a heading for the block.
12. Block Slideshow slide item options Image allows you to set a image for the block.
13. Block Slideshow slide item options Position selector allows you to choose the image position
14. Block Slideshow slide item options Overlay opacity slider allows you to change the opacity of the overlay.
15. Block Slideshow slide item options Button link field allows you to add a link to any source.
16. Block Slideshow slide item options Button label field sets the button's label.

Featured collection

The section allows you to select one collection, enable filtering and customize their display.

1. Enable border top field enables a line above the section.
2. Subheading allows you to set a subheading for the section.
3. Heading allows you to set a heading for the section.
4. Button link field allows you to add a link to any source.
5. Button label field sets the button's label.
6. Enable filtering field allows you to enable filtering products by their type.
7. Product card options allow you to customize product cards in the section

Card grid

Section consisting of several columns with images and descriptions.

1. Use Color scheme selector to change the color scheme.
2. Subheading allows you to set a subheading for the section.
3. Heading allows you to set a heading for the section.
4. Block Image options Image allows you to set a image for the block.
5. Block Image options Overlay opacity slider allows you to change the opacity of the overlay.
6. Block Image options Card width field sets the width of the image for the block.
7. Block Image options Choose as active checkbox field allows you to enable a full screen image for the block.
8. Block Image options Heading allows you to set a heading for the block.
9. Block Image options Description allows you to set a description for the block.
10. Block Image options Link allows you to add a link to any source.

Image tabs

Section displaying several tabs with images and descriptions.

1. Use Color scheme selector to change the color scheme.
2. Subheading, Subheading 1 and Subheading 2 allows you to set a subheadings for the section.
3. Heading allows you to set a heading for the section.
4. Block Tabs options Heading allows you to set a heading for the block.
5. Block Tabs options Image allows you to set a image for the block.
6. Block Tabs options Link allows you to add a link to any source.

Ticker

The section allows you to add scrolling ticker

1. Text allows you to set a text for the ticker.
2. Speed allows you to change speed for the ticker.
3. Font Size allows you to change font size for the ticker text.

Product slider

The section allows you to add slides, select collection, and customize their display.

1. Use Color scheme selector to change the color scheme.
2. Section layouts field allows you to select layout type.
3. Section subheading, Subheading 1 and Subheading 2 allows you to set a subheadings for the section.
4. Heading allows you to set a heading for the section.
5. Text allows you to set a text for the section.
6. Image allows you to set a image for the section.
7. Overlay opacity slider allows you to change the opacity of the overlay.
8. Button link field allows you to add a link to any source.
9. Button label field sets the button's label.
10. Product card options allow you to customize product cards in the section
11. Product number slider allows you to change the product display limit
12. Enable autoplay checkbox field allows you to enable autoplay for slider
13. Stopping on hover checkbox field allows you to stop slider autoplay while hovering
14. Speed slider allows you to change speed of transition between items
15. Delay slider allows you to change delay after each slide
16. Sliding effects selector allows you to choose a few sliding effects

Compare

The section allows you to compare products results

1. Subheading allows you to set a subheading for the section.
2. Heading allows you to set a heading for the section.
3. Text allows you to set a text for the section.
4. Image before allows you to set a first comparison image.
5. Image after allows you to set a second comparison image.

Product markers

The section allows you to mark products in the image and choose display position

1. Image allows you to set a image for the section.
2. Product card options allow you to customize product cards in the section
3. Block Product markers options Product select product that will be displayed.
4. Block Product markers options MARKER OPTIONS allow you to choose display position for the marker.
5. Block Product markers options Opening direction allow you to choose product marker window direction

Testimonials

This section enables to add sliding product testimonials with product and customer review.

1. Section layouts field allows you to select layout type.
2. Subheading allows you to set a subheading for the section.
3. Heading allows you to set a heading for the section.
4. Product card options allow you to customize product cards in the section
5. Block Testimonials slide options Product select product that will be displayed.
6. Block Testimonials slide options Text allows you to set a text for the block.
7. Block Testimonials slide options AUTHOR OPTIONS allows you to customize Author.

Featured Blog

The section allows you to select a blog and customize it. .

1. Post layout field allows you to select layout type.
2. Subheading allows you to set a subheading for the section.
3. Heading allows you to set a heading for the section.
4. Blog field allows you to choose a blog.
5. Blog posts slider allows you to select the number of columns in one line.
6. Enable featured image field enables the display of an image for the blog post.
7. Enable tags field enables the display of tags for the blog post.
8. Enable date field enables the display of the date for the blog post.
9. Enable author field enables the display of the author for the blog post.
10. Enable excerpt field enables the display of the excerpt for the blog post
11. Enable "Read all button" field enables the display of a button linking to all blog posts.

Image collage

This section allows to add image collage and link to any source.

1. Heading allows you to set a heading for the section.
2. AUTHOR OPTIONS allows you to customize Author information.
3. Button link field allows you to add a link to any source.
4. Button label field sets the button's label.

Featured products

The section allows you to select products and customize their display.

1. Subheading allows you to set a subheading for the section.
2. Heading allows you to set a heading for the section.
3. Product card options allow you to customize product cards in the section
4. Block Product options Product select product that will be displayed.
5. Block Product options Enable image field enables the display of an image for the block.
6. Block Product options Image allows you to set a image for the block.

Carousel

Allows you to add slides and customize them.

1. Subheading allows you to set a subheading for the section.
2. Enable autoplay checkbox field allows you to enable autoplay for slider
3. Stopping on hover checkbox field allows you to stop slider autoplay while hovering
4. Speed slider allows you to change speed of transition between items
5. Delay slider allows you to change delay after each slide
6. Block Carousel options Image allows you to set a image for the block.
7. Block Carousel options Heading allows you to set a heading for the block.
8. Block Carousel options Text allows you to set a text for the block.

Product with image

Allows you to add one product and images.

1. Subheading allows you to set a subheading for the section.
2. Heading allows you to set a heading for the section.
3. Product select product that will be displayed.
4. Product card options allow you to customize product cards in the section

Image card

Allows you to add card and customize their.

1. Use Color scheme selector to change the color scheme.
2. Subheading allows you to set a subheading for the block.
3. Heading allows you to set a heading for the block.
4. Image allows you to set a image for the block.
5. Hover Image allows you to set a hover image for the block.
6. Overlay opacity slider allows you to change the opacity of the overlay.
7. Hover text allows you to set a text for the block.
8. Button link field allows you to add a link to any source.
9. Button label field sets the button's label.

Brand image

Section allows you to add brand logos with their links.

1. Show border top field allows you to connect the lines above the section.
2. Show border bottom field allows you to connect the lines under the section.

Image Parallax

Section allows you to add blocks with an image or video, that work with a parallax effect.

1. Use Color scheme selector to change the color scheme.
2. Heading allows you to set a heading for the block.
3. Subheading 1 and Subheading 2 allows you to set a subheadings for the block.
4. Text allows you to set a text for the block.
5. Image allows you to set a image for the block.
6. Shopify-hosted video allows you to set a video for the block.
7. Or embed video from URL allows you to set a video link(YouTube or Vimeo URL) for the block.
8. Overlay opacity slider allows you to change the opacity of the overlay.
9. Parallax speed slider allows you to change speed of parallax effect on scrolling

Image slider

This section allows to add an image collage that moves vertically automatically and link to any source.

1. Heading allows you to set a heading for the section.
2. Text allows you to set a text for the section.
3. AUTHOR OPTIONS allows you to customize Author information.
4. Button link field allows you to add a link to any source.
5. Button label field sets the button's label.

Newsletter

You can add and customize a countdown timer.

1. Section type field allows you to select layout type
2. Heading allows you to set a heading for the section.
3. Text allows you to set a text for the section.
4. Button label field sets the button's label.
5. Button link field allows you to add a link to any source.
6. Form text field adds a text to the top of the form.
7. End date allows you to set the countdown end date.
8. End time allows you to set the countdown end time.
9. Date font size allows you to change font size for the numbers.
10. Complete allows you to select what should be when countdown is completed.
11. Text allows you to set a text when countdown is completed.
12. Show border top field allows you to connect the lines above the section.
13. Show border bottom field allows you to connect the lines under the section.
14. Image allows you to set a image for the section when chosen overlay type.
15. Use Color scheme selector to change the color scheme.
16. Overlay opacity slider allows you to change the opacity of the overlay.

Product carousel

The section allows you to select one collection and customize their display.

1. Enable border top field enables a line above the section.
2. Subheading allows you to set a subheading for the section.
3. Heading allows you to set a heading for the section.
4. Button link field allows you to add a link to any source.
5. Button label field sets the button's label.
6. Product card options allow you to customize product cards in the section

Collapsible content

You can add and customize a collapsible content section, such as using it for FAQs.

Video Banner

In this section, you can add and customize an autoplay video.

Page

Information on topic pages

Product page

Product information

1. Desktop product gallery alignment selector allows you to choose alignment type on desktop devices.
2. Mobile product gallery alignment selector allows you to choose alignment type on mobile devices.
3. Block Pop-up allows you to enable and customize pop-up modals.
4. Block Buy buttons option Show dynamic checkout buttons using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay.
5. Block Share allows enable links from the list.
6. Block Additional description optionHeading field sets a header block.
7. Block Additional description optionText field sets a content block.
8. Block Additional description optionIcon field sets an icon for block.

Size chart

To add a size chart, follow these steps:

1. Create new page with a table.

   

2. Add a "Pop-up" block to the product page.
3. Select "Size chart" page.

   

Card grid

Section consisting of several columns with images and descriptions.

Product recommendations

Dynamic recommendations use order and product information to change and improve over time.

To add and edit product recommendations, follow these steps:

1. Install the Search & Discovery app by Shopify from the Apps page in the Admin panel.

   

2. Once installed, open the app and follow the 'View recommendations' link in the Feature overview section to add recommendations to your products.

   

   

1. Enable border top field enables a line above the section.
2. Subheading allows you to set a subheading for the section.
3. Heading allows you to set a heading for the section.
4. Button link field allows you to add a link to any source.
5. Button label field sets the button's label.
6. Product card options allow you to customize product cards in the section

Collections page

Collection banner

1. Show collection description field turn on description display
2. Show collection image field turn on image display
3. Main image allows you to set a large image for the banner. That image is displayed on the All Products page and when the Collection image is empty
4. Block Image allows you to set a small images for the banner.

Product grid

1. Products per page field sets the number of displayed cards
2. Product card options allow you to customize product cards in the section
3. Enable filtering field turn filtering
4. Enable sorting field turn sorting

Collections list

Displays a list of all collections

1. Heading field sets a header section.
2. Sort collections by field filters the collection by the specified parameters
3. Image field allows you to choose cover for collections items.
4. Collection with collection image field allows you to select a collection and assign it a separate featured image.
5. Image ratio field allows you to choose the orientation of pictures for cards.
6. Image fit field allows you to choose the fit of pictures for cards.
7. Show count items enables the display of the products amount.
8. Show description enables the display of the collection description.

About

Carousel

Allows you to add slides and customize them.

Contact Form

1. Heading allows you to set a heading for the section.
2. Text allows you to set a text for the section.
3. Additional text field adds a title to the right of the button.

Cart

1. Image fit field allows you to choose the fit of pictures for cards.
2. Show vendorenables the display of the vendor.
3. Subtotal option Enable cart note field sets note

Blog

1. Show featured image field enables the display of an image for the blog post.
2. Show tags field enables the display of tags for the blog post.
3. Show date field enables the display of the date for the blog post.
4. Show author field enables the display of the author for the blog post.
5. Show excerpt field enables the display of the excerpt for the blog post.

Blog post

1. Header layout allows you to select the location of the image.
2. Block Article header option Show tags field enables the display of tags for the blog post.
3. Block Article header option Show excerpt field enables the display of the excerpt for the blog post.
4. Block Article header option Show date field enables the display of the date for the blog post.
5. Block Article header option Show author field enables the display of the author for the blog post.
6. Block Article header option Image author field allows you to set an image.
7. Block Article header option Featured image height field allows you to select an image ratio.
8. Block Article footer option Show date field enable date for blog post.
9. Block Article footer option Show author field enable author for blog post.
10. Block Article footer option Image author field allows you to set an image.
11. Block Article footer option Share allows enable links from the list.

Importing our demos

You can also copy the structure of any of our 5 demos in a few steps.

1. Download the settings file to copy the demo settings from there.

2. Go to section "Online Store >> Themes" your store. Click on the three dots button of your theme.

   

3. Go to the code editor by clicking the edit code button.

   

4. In the code editor, search for the file "index.json" and change the code to the demo code you want to transfer. Click "save" to save your changes.

   

Demos structure

Click on the demo name to download the file with the appropriate structure.

1. Sophisticated
2. Modern
3. Vibrant
4. Refined
5. Minimal

Support

You can ask any questions about the theme and our support agent will help you within 24 hours on business days.

Visit Help Center      View Terms & Conditions