Monaco

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. Height slider allows you to change the announcement height only on desktop devices.
3. Color scheme selector allows you to change the color scheme. You can change the background color in the Theme settings.
4. Text field allows you to add and edit text.
5. 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. Height slider allows you to change the header's height only on desktop devices.
2. Use the Logo image file selector allows you to select or upload your logo file.
3. Use the Logo image 2 file selector to select or upload your logo, which can be seen in Dark mode.
4. (Optional) If you add a logo, you can use the Custom logo width slider to change the logo size.
5. Choose a Menu to be displayed in the header.
6. Enable fullscreen overlay menu field enables the display a fullscreen menu only on desktop devices.
7. Enable country/region selector field enables the display of country/region.
8. Sticky header field allows the display of a header on the screen as the user scrolls up.
9. If enable Overlay, header will be without background
10. Color scheme selector allows you to change the color scheme for the overlay header.
11. Enable search selector field enables the display of search modal in the header.
12. Show popular items selector field enables the display of items in the search modal.
13. Show collections selector field enables the display of collections in the search modal.
14. Show articles selector field enables the display of articles in the search modal.

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. Collection field enables the display of collection in the Mega menu.

Fullscreen menu

1. Choose a top level menu to display a menu at the top.
2. Enable italic selector field enables you to display headings in italic font.
3. Product card options allow you to add products and customize product cards.
4. Choose a bottom level menu to display a menu at the bottom.
5. Phone number allows you to set info at the bottom.
6. E-mail address allows you to set info at the bottom.
7. Show social field enables the display of social icons.

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 Enable search in the Header settings.

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 settings 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 settings 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 the Logo image file selector allows you to select or upload your logo file.
2. Use the Dark logo image file selector to select or upload your logo, which can be seen in Dark mode.
3. If you add a logo, you can use the Custom logo width slider to change the logo size.
4. Use Color scheme selector to change the color scheme.
5. Enable border field enables a line above the section.
6. Payment methods field enables the display of payment methods in the bottom line of the footer.
7. Country/region selector field enables the display of the region selector in the footer.
8. Language selector field enables the display of the language selector in the footer.
9. Phone number allows you to set info in the footer.
10. E-mail address allows you to set info in the footer.
11. Block Subscribe form allows you to add and customize subscribe form.
12. Block Menu allows you to select menus
13. Block Info allows you to add and customize additional info.

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 size selector allows you to change the height of this section.
2. Content position selector allows you to change the content position.
3. Overlay options allows you to change the opacity of the overlay.
4. Speed slider allows you to change speed of transition between items.
5. Delay slider allows you to change delay after each slide.
6. Enable autoplay checkbox field allows you to enable autoplay for slider.
7. Disable sliding on hover checkbox field allows you to stop slider autoplay while hovering.
8. Show arrows checkbox field enables the display arrows.
9. Show bullets checkbox field enables the display bullets.
10. Block Slide options Color scheme selector to change the color scheme for the block.
11. Block Slide options Image allows you to set an image for the block.
12. Block Slide options Heading allows you to set a heading for the block.
13. Block Slide optionsText allows you to set a text for the block.
14. Block Slide options Button options allows you to set a button and customize it.

Product slideshow

The section allows you to add slides with the product

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. Products select products to be added to the section.
5. Product card options allow you to customize product cards in the section.
6. Enable autoplay checkbox field allows you to enable autoplay for slider.
7. Disable sliding on hover checkbox field allows you to stop slider autoplay while hovering.
8. Show bullets checkbox field enables the display bullets.
9. Speed slider allows you to change speed of transition between items.
10. Delay slider allows you to change delay after each slide.
11. Sliding effects selector allows you to choose a few sliding effects.

Logo slideshow

The section allows you to display a large logo and add slides with image and heading

1. Logo image allows you to set an logo for the section.
2. (Optional) If you add a logo, you can use the Custom logo width slider to change the logo size.
3. Section size selector allows you to change the height of this section.
4. Enable parallax checkbox field allows you to enable the parallax effect when scrolling.
5. Overlay options allows you to change the opacity of the overlay.
6. Speed slider allows you to change speed of transition between items.
7. Delay slider allows you to change delay after each slide.
8. Enable autoplay checkbox field allows you to enable autoplay for slider.
9. Disable sliding on hover checkbox field allows you to stop slider autoplay while hovering.
10. Show arrows checkbox field enables the display arrows.
11. Show bullets checkbox field enables the display bullets.
12. Block Slide options Color scheme selector to change the color scheme for the block.
13. Block Slide options Image allows you to set an image for the block.
14. Block Slide optionsText allows you to set a text for the block.
15. Block Slide options Button options allows you to set a button and customize it.

Product carousel

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

1. Heading allows you to set a heading for the section.
2. Products select products to be added to the section.
3. Product displayslider allows you to change the number of products displayed on desktop devices only.
4. Button options allows you to set a button and customize it.
5. Product card options allow you to customize product cards in the section.

Split screen slideshow

The section allows you to add slides with image and heading.

1. Section size selector allows you to change the height of this section.
2. Speed slider allows you to change speed of transition between items.
3. Delay slider allows you to change delay after each slide.
4. Enable autoplay checkbox field allows you to enable autoplay for slider.
5. Disable sliding on hover checkbox field allows you to stop slider autoplay while hovering.
6. Show arrows checkbox field enables the display arrows.
7. Show bullets checkbox field enables the display bullets.
8. Sliding effects selector allows you to choose a few sliding effects.
9. Enable parallax checkbox field allows you to enable the parallax effect for sliding.
10. Block Screen Slideshow options Color scheme selector to change the color scheme.
11. Block Screen Slideshow options Image allows you to set an image for the block.
12. Block Screen Slideshow options Heading allows you to set a heading for the block.
13. Block Screen Slideshow options Text allows you to set a text for the block.
14. Block Screen Slideshow options Button options allows you to set a button and customize it.

Ticker

The section allows you to add scrolling ticker

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

Product slider

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

1. Use Color scheme selector to change the color scheme.
2. Heading allows you to set a heading for the section.
3. Position selector allows you to choose the image position.
4. Image size selector allows you to change the height of this section.
5. Product card options allow you to customize product cards in the section.
6. Block Product slide options Image allows you to set an image for the block.
7. Block Product slide options Product select product that will be displayed and customize the product card in the block.

Compare

The section allows you to compare products results.

1. Use Color scheme selector to change the color scheme.
2. Image before allows you to set a first comparison image.
3. Image after allows you to set a second comparison image.
4. Product select product that information will be displayed.
5. Heading allows you to set a heading for the section.
6. Subheading allows you to set a subheading for the section.
7. Button options allows you to set a button and customize it.

Product markers

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

1. Use Color scheme selector to change the color scheme.
2. Image allows you to set an image for the section.
3. Product card options allow you to customize product cards in the section
4. Block Marker options Product select product that will be displayed and customize the product card in the block.
5. Block Marker options Position allow you to choose display position for the marker.

Product full screen

The section allows you to show one product with a full screen photo

1. Size allows you to change text size for the section.
2. Two columns selector field enables you to display two images from product
3. Use Color scheme selector to change the color scheme.
4. Image allows you to set an image for the section.
5. Logo allows you to set an logo for the section.
6. Overlay options allows you to change the opacity of the overlay.
7. Product select product that information will be displayed.

Product timer

Allows you to add image, texts, countdown, products and ticker.

1. Use Color scheme selector to change the color scheme.
2. Image allows you to set an image for the section.
3. Heading allows you to set a heading for the section.
4. Text allows you to set a text for the section.
5. Countdown options allows you to set the time and action after the end of the time.
6. Ticker options allows you to add ticker and customize it.
7. Product card options allow you to customize product cards in the section
8. Slider options allows you to customize slider.

Featured Blog

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

1. Heading allows you to set a heading for the section.
2. Blog field allows you to choose a blog.
3. Posts count slider allows you to change the posts display limit.
4. Show featured image field enables the display of an image for the blog post.
5. Show tags field enables the display of tags for the blog post.
6. Show date field enables the display of the date for the blog post.
7. Show author field enables the display of the author for the blog post.
8. Show excerpt field enables the display of the excerpt for the blog post

Image collage

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

1. Use Color scheme selector to change the color scheme.
2. Heading allows you to set a heading for the section.
3. Text allows you to set a text for the section.
4. Background Image allows you to set a background image for the section.
5. Overlay options allows you to change the opacity of the overlay.
6. Button options allows you to set a button and customize it.
7. Block options Card allows you to set an image for the block.
8. Block options Text allows you to add and customize additional info.

Multicolumn

Allows you to add blocks and customize them.

1. Use Color scheme selector to change the color scheme.
2. Heading allows you to set a heading for the section.
3. Subheading allows you to set a subheading for the section.
4. Use Text horizontal alignment selector to change the position of the text horizontally.
5. Columns per row slider allows you to change the number of blocks per line only on desktop devices.
6. Use Horizontal alignment selector to change the position of the text horizontally.
7. Heading size selector field allows you to change the size of the block header.
8. Image options allows you to customize the image and their dimensions.
9. Swipe on mobile checkbox field allows you to enable the slider on mobile devices.
10. Block Column options Image file selector allows you to select or upload your image file.
11. Block Column options Image 2 file selector to select or upload your image, which can be seen in Dark mode.
12. Block Column options Heading allows you to set a heading for the block.
13. Block Column options Description allows you to set a description for the block.
14. Block Column options Button options allows you to set a button and customize it.

Countdown

You can add and customize a countdown timer.

1. Use Color scheme selector to change the color scheme.
2. Heading allows you to set a heading for the section.
3. Subheading allows you to set a subheading for the section.
4. End date allows you to set the countdown end date.
6. End time allows you to set the countdown end time.
7. Use italic selector field enables you to use italic font for numbers.
8. After the timer ends allows you to select what should be when countdown is completed.
9. Text allows you set a text when countdown is completed.
10. Background Image allows you to set a background image for the section.
11. Button options allows you to set a button and customize it.
12. Overlay opacity slider allows you to change the opacity of the overlay.

Blockqoute

Section allows you to add image and blockqoute.

1. Use Color scheme selector to change the color scheme.
2. Text allows you to set a text for the section.
3. Size allows you to change text size for the section.

Image with text

Allows you to add image and texts

1. Use Position selector to change the position
2. Image allows you to set an image for the section.
3. Image size selector allows you to change the height of this section.
4. Enable frame checkbox field allows you to add frame to image
5. Use Color scheme for image column selector to change the color scheme.
6. Img text allows you to set a text for the image column.
7. Text column options allow you to add texts and customize it.
8. Subheading options allows you to set a subheadings for the text column.
9. Button options allows you to set a button and customize it.

Banner with text

Allows you to add full screen image and texts

1. Use Color scheme selector to change the color scheme.
2. Background image allows you to set a background image for the section.
3. Background video allows you to set a background video for the section.
4. Size allows you to change text size for the section.
5. Heading allows you to set a heading for the section.
6. Text allows you to set a text for the section.
7. Text alignment allows you to change the position of the text horizontally.
8. Content width allows you to change the width of the content.
9. Overlay opacity slider allows you to change the opacity of the overlay.
10. Button options allows you to set a button and customize it.

Image card grid

Allows you to add image blocks

1. Heading allows you to set a heading for the section.
2. Columns per row slider allows you to change the number of blocks per line only on desktop devices.
3. Ratio field allows you to choose the orientation of pictures for block.

FAQ

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

1. Heading allows you to set a heading for the section.

Video Banner

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

Page

Information on topic pages

Product page

Product information

1. Desktop layout selector allows you to choose gallery type on desktop devices.
2. Desktop product gallery alignment selector allows you to choose alignment type on desktop devices.
3. Mobile product gallery alignment selector allows you to choose alignment type on mobile devices.
4. Desktop layout field allows you to select layout the type of layout on desktop devices, it is automatically optimized for mobile devices.
5. Social shares checkbox allows you to include a social network icon with links.
6. Block Vendor allows you to enable vendor.
7. Block Pop-up allows you to enable and customize pop-up modals.
8. 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.
9. Block Perfect-fit allows you to add a complementary products and adjust the quantity per line.
10. Block Product description allows you to show product description
11. Block About option Heading field sets a heading block.
12. Block About option Text field sets a content 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.

   

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. Heading allows you to set a heading for the section.
2. Product number slider allows you to change the number of products per line only on desktop devices.
3. Product card options allow you to customize product cards in the section.

Collections page

Collection banner

1. Use Color scheme selector to change the color scheme.
2. Additional word field allows you to add additional word of title.
3. Show additional word field turn on additional word display.
4. Show collection description field turn on description display.
5. 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.
6. Overlay options allows you to change the opacity of the overlay.

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. Columns per row slider allows you to change the number of collections per line only on desktop devices.
3. Sort collections by field filters the collection by the specified parameters.
4. Image ratio selector allows you to change the height of the collection of cards in this section.
5. Overlay options allows you to change the opacity of the overlay.

About

Allows you to add sections describing the store.

Cart

Blog

1. Use Color scheme selector to change the color scheme.
2. Section size selector allows you to change the height of this section.
3. Speed slider allows you to change speed of transition between items.
4. Delay slider allows you to change delay after each slide.
5. Enable autoplay checkbox field allows you to enable autoplay for slider.
6. Disable sliding on hover checkbox field allows you to stop slider autoplay while hovering.
7. Show bullets checkbox field enables the display bullets.
8. Overlay options allows you to change the opacity of the overlay.
9. Show featured image field enables the display of an image for the blog post.
10. Show tags field enables the display of tags for the blog post.
11. Show date field enables the display of the date for the blog post.
12. Show author field enables the display of the author for the blog post.
13. Show excerpt field enables the display of the excerpt for the blog post.

Blog post

1. Layout allows you to select the location of the image.
2. Overlay options allows you to change the opacity of the overlay.
3. Block Article header option Show featured image field enables the display of an image for the blog post.
4. Block Article header option Show tags field enables the display of tags for the blog post.
5. Block Article header option Show date field enables the display of the date for the blog post.
6. Block Article header option Show author field enables the display of the author for the blog post.
7. Block Article header option Show excerpt field enables the display of the excerpt for the blog post.
8. Block Article header option Share allows enable links from the list.
9. Block Article footer option Show date field enable date for blog post.
10. Block Article footer option Show author field enable author for blog post.
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. Allure
2. Bliss
3. Essence
4. Pastel
5. Savour

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