Madrid

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.

For the pill variant of the product picker you can enable Variant image

Custom product badges

To enable and edit Custom badges, navigate to Theme settings > Product card.

The next step is to add metafields to the products.

To add and edit metafields, follow these steps:

1. Navigate to Settings > Custom data in the Admin panel.

   

2. Select Products.
3. Click the button "Add definition" and fill the fields.

   

4. Navigate to the product and add information below.

   

Infinite scroll

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

Demo-Slider

To enable this funtion navigate to Theme settings > Advanced > Enable Home page scroll slider animation.

It is recommended to add sections with a full screen height option, which is only applicable to the Home page

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. Height slider allows you to change the announcement height only on desktop devices.
2. Height on mobile devices slider allows you to change the announcement height only on mobile devices.
3. Color scheme selector allows you to change the color scheme. You can change the background color in the Theme settings.
4. Text alignment allows you to change the position of the text horizontally.
5. Text field allows you to add and edit text.
6. Use the field Icon (Optional.) to add/change the image.

Countdown timer bar

1. Height slider allows you to change the announcement height only on desktop devices.
2. Height on mobile devices slider allows you to change the announcement height only on mobile devices.
3. Use Color scheme selector to change the color scheme.
4. Promo text allows you to set a text for the section.
5. End date allows you to set the countdown end date.
6. End time allows you to set the countdown end time.
7. After the timer ends. allows you to select what should be when countdown is completed.
8. Text allows you to set a text when countdown is completed.
9. Button options allows you to set a button and customize it.

Header

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

1. Enable bottom border field allows you to connect the lines under the header.
2. Use the Header type field to select a variant of the header.
3. Use the Logo image file selector allows you to select or upload your logo file.
4. Use the Secondary logo 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. Choose a Main menu to be displayed in the header.
7. Enable country/region selector field enables the display of country/region.
8. Enable language selector field enables the display of language.
9. Enable search allows you to add Search modal and customize it.
10. Use the Dark/light mode toggle position field to select the position of that button.
11. Use the Sticky header field to select a variant of the header when user scrolls in page.

Burger menu

1. Choose a Main menu to display it in the dropdown.
2. Choose a Secondary menu to display it in the dropdown.
3. Description allows you to set a description for the block.
4. Promo block allows you to add image and text
5. Promo block - Trigger allows you to select the menu level that the promo block can display. Write the exact name of the link with the submenu

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. Choose a Secondary menu to display it in the dropdown.
4. Promo block allows you to add image and text
5. Promo block - Trigger allows you to select the menu level that the promo block can display. Write the exact name of the link with the submenu

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 and Collections in the Search 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 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.

Full screen footer version is only shown in Demo-Slider (home page only)

1. Use Color scheme selector to change the color scheme.
2. Enable border top field enables a line above the section.
3. Use the Logo image file selector allows you to select or upload your logo file.
4. Use the Secondary logo 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. Logo layout field allows you to select layout type.
7. Description allows you to add additional description
8. Subscribe form allows you to add and customize subscribe form.
9. Country/region selector field enables the display of the region selector in the footer.
10. Language selector field enables the display of the language selector in the footer.
11. Payment methods field enables the display of payment methods in the bottom line of the footer.
12. Follow on Shop allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled.
13. Copyright allow to show info about copyright.
14. Block Social media field enables the display of the social media links in the footer.
15. Block Policy links field enables the display of the policies links in the footer.
16. Block Menu allows you to select menus, 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. Use Color scheme selector to change the color scheme for the section.
2. Aspect ratio sets the aspect ratio of the image.
3. Heading size selector field allows you to change the size of the block header.
4. Tabs heading size selector field allows you to change the size of the block tabs.
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. Speed sliding allows you to change speed of transition between items.
8. Delay sliding allows you to change delay after each slide.
9. Sliding effects selector allows you to select multiple slider effects.
10. Block Item options Image allows you to set a image for the block.
11. Block Item options Overlay opacity slider allows you to change the opacity of the overlay.
12. Block Item options Video options allows you to set a video for the block.
13. Block Item options Heading allows you to set a heading for the block.
14. Block Item options Description allows you to set a description for the block.
15. Block Item options Tabs info allows you to set a subheading and heading for the block.
16. Block Item options Button options allows you to set a button and customize it.

Image with text

1. Aspect ratio sets the aspect ratio of the image.
2. Content position selector allows you to change the content position.
3. Content width allows you to change the width of the content.
4. Animations settings allows you enable animation effect on scroll
5. Image options allows you to set a image for the section and customize it.
6. Text position allows you to change text position.
7. Button options allows you to set a button and customize it.

Media banner

1. Aspect ratio sets the aspect ratio of the image.
2. Sticky effectallows you enable animation effect on scroll
   • Sticky section will only work if the next section is a Media banner, Image banner, Slideshow or Countdown.
   • Sticky content will only work if the content is placed at the top of the section.
3. Layout allows you to select section type.
4. Content width allows you to change the width of the content.
5. Image allows you to set a image for the block.
6. Overlay opacity slider allows you to change the opacity of the overlay.
7. Video options allows you to set a video for the block.
8. Content options allows you to add many types of content and customize it.
9. Button options allows you to set a button and customize it.

Popular products

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

1. Products per row slider allows you to change the number of blocks per line.
2. Product card allow you to customize product cards in the section.
3. Button options allows you to set a button and customize it.

Product slider

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

1. Aspect ratio sets the aspect ratio of the image.
2. Button options allows you to set a button and customize it.
3. Slider options allows you to customize slider.
4. Animations settings allows you enable animation effect on scroll
5. Product card allow you to customize product cards in the section.

Featured products

The section allows you to select products.

1. Use Color scheme selector to change the color scheme for the section.
2. Columns per row slider allows you to change the number of block per line.
3. Slider options allows you to customize slider.
4. Item Hover Effect allows you to choose hover effects and animation effects on scrolling
5. Product card allow you to customize product cards in the section.

Product popup

1. Aspect ratio sets the aspect ratio of the image.
2. Image allows you to set a image for the block.
3. Overlay opacity slider allows you to change the opacity of the overlay.
4. Button options allows you to set a button and customize it.
5. Popup Options allows you to add heading and chose products for a popup modal.

Banner with popup

1. Aspect ratio sets the aspect ratio of the image.
2. Full Screen Image allows you to make full screen image
3. Button options allows you to set a button and customize it.
4. Enable animation effect allows you enable animation effect on scroll
5. Speed sliding allows you to change speed of transition between items.
6. Popup Options allows you to add content and an image for a popup modal.

Countdown

You can add and customize a countdown timer.

1. Use Color scheme selector to change the color scheme.
2. Aspect ratio sets the aspect ratio of the image.
3. Enable sticky section effect allows you enable animation effect on scroll. It will only work if the next section is a Media banner, Image banner, Slideshow or Countdown.
4. Image allows you to set a image for the section.
5. Video options allows you to set a video for the block.
6. Overlay opacity slider allows you to change the opacity of the overlay.
7. Text alignment allows you to change content position.
8. Heading allows you to set a heading for the section.
9. Description allows you to set a text for the section.
10. End date allows you to set the countdown end date.
11. End time allows you to set the countdown end time.
12. After the timer ends. allows you to select what should be when countdown is completed.
13. Text allows you to set a text when countdown is completed.
14. Button options allows you to set a button and customize it.

Brand list

Section allows you to add brand logos with their links.

1. Subheading allows you to set a subheading for the section.
2. Aspect ratio sets the aspect ratio of the image.
3. Content alignment allows you to change content position.

Collection list

Displays a list of all collections.

1. Heading allows you to set a heading for the section.
2. Heading size selector field allows you to change the size of the section header.
3. Image ratio selector allows you to change the height of the collection of cards in this section.
4. Columns per row slider allows you to change the number of collections per line only on desktop devices.

Collection carousel

1. Collectionallows you to select one collection and display products from it.
2. Collectionsallows you to choose many collections and display its.
3. Heading options allows you to set a content for the section.
4. Button options allows you to set a button and customize it.
5. Product card allow you to customize product cards in the section.

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. Main image ratio sets the aspect ratio of the image.
3. Overlay opacity slider allows you to change the opacity of the overlay.
4. Product card allow you to customize product cards in the section
5. Block Markers options Product select product that will be displayed.
6. Block Markers options Position allow you to choose display position for the marker.

Before/After

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. Heading size selector field allows you to change the size of the section header.
4. Button options allows you to set a button and customize it.
5. Content Group allows you to add images and texts for compare.
6. Product 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.

1. Aspect ratio sets the aspect ratio of the image.
2. Heading allows you to set a heading for the section.
3. Heading size selector field allows you to change the size of the section header.
4. Enable animation effect allows you enable animation effect on scroll
5. Speed sliding allows you to change speed of transition between items.
6. Button options allows you to set a button and customize it.

Multicolumn

The section allows you to add scrolling ticker

1. Use Color scheme selector to change the color scheme.
2. Slider options allows you to customize slider.
3. Card options allows you to customize card.
4. Button options allows you to set a button and customize it.
5. Block Column options Image allows you to select image.
6. Block Column options Overlay opacity slider allows you to change the opacity of the overlay.
7. Block Column options Subheading allows you to set a subheading for the block.
8. Block Column options Heading allows you to set a heading for the block.
9. Block Column options Description allows you to set a description for the block.
10. Block Column options Button label field sets the button's label.
11. Block Column options Button link field allows you to add a link to any source.

Featured blog

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

1. Blog field allows you to choose a blog.
2. Blog posts display limit slider allows you to change the posts display limit..
3. Columns per row slider allows you to select the number of columns in one line.
4. Content layout field allows you to select layout type.
5. Heading allows you to set a heading for the section.
6. Heading size selector field allows you to change the size of the section header.
7. Blog post allows you to customize blog posts.

Email signup

You can add and customize subscribe form.

1. Use Color scheme selector to change the color scheme.
2. Aspect ratio sets the aspect ratio of the image.
3. Text alignment allows you to change content position.
4. Heading allows you to set a heading for the section.
5. Description 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.

About us

In this section, you can tell about you.

1. Subheading allows you to set a subheading for the section.
2. Heading allows you to set a heading for the section.
3. Heading size selector field allows you to change the size of the section header.
4. Description allows you to set a description for the section.
5. Image allows you to set a image for the section.

Steps

1. Image ratio field allows you to choose the orientation of pictures for block.
2. Heading size selector field allows you to change the size of the section header.
3. Image allows you to set a image for the block.

Featured product

In this section, you can display one product and show information about it .

Page

Information on topic pages

Product page

Product information

1. Gallery type 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. Block Pop-up allows you to enable and customize pop-up modals.
5. 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.
6. Block Share allows enable links from the list.

Size chart

To add a size chart, follow these steps:

1. Enable Show guide. Works only if product have Size variant.
2. Create new page with a table.

   

3. Select "Size chart" page.

   

Floated product form

You can add a floating product form and it will be displayed on that page when you scroll.

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. Heading size selector field allows you to change the size of the section header.
3. Product card options allow you to customize product cards in the section

Collections page

Collection banner

1. Show collection image field turn on image display
2. Image for "Products" page Image for automatically generated page with all products

Product grid

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

You can add engaging full-screen banners

Product type filter

1. The Product Type must be added to the product parameters.

   

2. The Product type filter must be added from the Search & Discovery app.

   

3. Enable sticky product type filter in the Product Grid section.

   

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. Image ratio field allows you to choose the orientation of pictures for cards.
5. Image fit field allows you to choose the fit of pictures for cards.
6. Show description enables the display of the collection description.
7. Collections per row slider allows you to change the number of collections per line only on desktop devices.

Cart

Blog

1. Blog posts per page field sets the number of displayed cards.
2. Blog posts per row slider allows you to select the number of columns in one line.
3. Animations settings allows you enable animation effect on scroll
4. Slider options allows you to customize slider.
5. Blog post options allows you to customize slider blog post.
6. On the block you can select a blog that can add the intro banner

   

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 Featured image height field allows you to select an image ratio.
7. Block Content option Show Share block allows enable links from the list.
8. Block Content option Show date field enable date for blog post.
9. Block Contentr option Show author field enable author for blog post.

Our Story

Stores

Services

Lookbook

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. Modern
2. Heritage
3. Bronze
4. Glossy
5. Signature

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