Themes Services Help Center
Home Help Center Select

Select Documentation

General Settings

Settings that are used in almost all sections.

Section Margin

This option lets you adjust the top and bottom margins of 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

This option lets you adjust the top and bottom paddings of 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, go to Theme settings > Color Swatches. The swatch trigger must match the option in Product variants. You can also add custom colors by specifying their name and HEX color code.

Infinite Scroll

To enable and customize Infinite Scroll, go to Theme settings > Pagination > Pagination type.

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. Go 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.

Header Group

Sections that are used on all pages by default.

Announcement Bar

The announcement bar appears at the top of every page and displays custom messages with optional links. It's ideal for promoting sales or important updates.

  1. Color scheme selector allows you to change the color scheme. You can change the background color in the Theme settings.
  2. Height slider allows you to change the announcement height only on desktop devices.
  3. Height on mobile devices slider allows you to change the announcement height only on mobile devices.
  4. Uppercasefield allows you to make the all texts uppercase.
  5. Overlay options allows you to change the opacity of the text.
  6. Button options allows you to set a button and customize it.
  7. Text field allows you to add and edit text.
  8. Use the 'Image (Optional)' field to add or change the image.
  9. Enable country/region selector field enables the display of country/region.
  10. Enable language selector field enables the display of language.

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. Color scheme selector lets you change the color scheme and adjust the background color in the Theme settings.
  3. Enable bottom border field allows you to connect the lines under the header.
  4. Use the Logo image file selector to select or upload your logo file.
  5. Use the Logo image 2 file selector to select or upload a logo for Dark Mode.
  6. (Optional) If a logo is added, you can adjust its size using the Custom logo width slider.
  7. Choose a Menu to be displayed in the header.
  8. Select a Bottom Menu to display in the header. This option is available only for the 'Center logo with a bottom menu' header type.
  9. Enable country/region selector field enables the display of country/region.
  10. Enable country/region selector on mobile devices displays the country/region selector on mobile devices.
  11. Enable language selector field enables the display of language.
  12. Enable language selector on mobile devices selector field enables the display of language on mobile devices.
  13. Use the sticky header to select a header variant that remains visible as the user scrolls the page.
  14. Search options allows you to add Search modal and customize it.

Fullscreen Menu

  1. Choose a Menu to display in the dropdown.
  2. The promo block lets you add an image and text.

Mega Menu

To add a Mega Menu, ensure the main menu link has sublinks, 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. The promo block lets you add an image and text.

Follow Modal

  1. Color scheme selector lets you change the color scheme and adjust the background color in Theme settings.
  2. Description lets you set a description for the modal.
  3. Info allows you to add more detailed information.
  4. Subscribe form allows you to add and customize the subscribe form.
  5. Social media icons enable the display of social media icons.
  6. Image lets you set an image for the modal.
  7. Overlay opacity slider allows you to change the opacity of the overlay.

This theme offers predictive search, enabled by default. You can disable it in Theme settings > Search.

You can also enable the Search promo block in the Header settings. This block can display three types of information: products, collections, and blog posts.

Overlay Group

In the Popup settings, you can adjust the layout, add an image, customize the subscribe form, edit the position, and modify open/exit animations and options.

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

  1. Add the ID of the popup/notification bar you want 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 "#" at the beginning) in 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 want to open in the ID field under the Triggers section (e.g., "popup").
  2. Navigate to the popup/notification bar settings and add the ID (with "#" at the beginning) in the "CSS selector for manual trigger" field.

Age Verification Popup

An Age verification popup prompts users to confirm their age before accessing restricted content. In the Age verification popup settings, you can customize the text and buttons.

Sections are used on all pages by default.

The Footer appears at the bottom of every page. You can customize it to align with 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 Logo image file selector allows you to select or upload your logo file.
  4. Use the Logo image 2 file selector to select or upload your logo, which can be seen in Dark mode.
  5. (Optional) If you add a logo, use the Custom logo width slider to adjust its size.
  6. Country/region selector field enables the display of the region selector in the footer.
  7. Language selector field enables the display of the language selector in the footer.
  8. Payment methods field enables the display of payment methods in the bottom line of the footer.
  9. Follow on Shop allows customers to follow your store on the Shop app from your storefront, but Shop Pay must be enabled.
  10. Social media icons enable the display of social media icons in the bottom line of the footer.
  11. Policy links allow you to display policy links in the footer.
  12. Block Menu lets you select menus to be displayed on the top line of the footer.
  13. Block Subscribe form allows you to add and customize subscribe form.
  14. Block Contacts allows you to add additional description, which will be displayed on the top line of the footer.

All Sections

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

Slideshow

The section lets you add slides with images and headings.

  1. Aspect ratio sets the aspect ratio of the image.
  2. Heading size selector field allows you to change the size of the block header.
  3. Heading max width field allows you to change the maximum width of the heading.
  4. Description max width field allows you to change the maximum width of the description.
  5. Button style selector to change the button style.
  6. Enable autoplay checkbox allows you to enable autoplay for the slider.
  7. Disable sliding on hover checkbox stops the slider autoplay when hovering.
  8. Enable buttons checkbox field enables the display arrows.
  9. Enable pagination checkbox field enables the display bullets.
  10. Duration allows you to change speed of transition between items.
  11. Block Slide options Color scheme selector to change the color scheme for the block.
  12. Block Slide options Background image allows you to set a image for the block.
  13. Block Slide options Video allows you to set a video for the block.
  14. Block Slide options Overlay opacity slider allows you to change the opacity of the overlay.
  15. Block Slide options Heading allows you toset a heading for the block.
  16. Block Slide options Description allows you toset a description for the block.
  17. Block Slide 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. Aspect ratio for mobile sets the aspect ratio of the image on mobile devices.
  3. Image allows you to set a image for the section.
  4. Video allows you to set a video for the section.
  5. Position allows you to change content position.
  6. Use Color scheme selector to change the color scheme.
  7. Enable padding allows you to add more padding for the content block.
  8. Heading allows you to set a heading for the section.
  9. Heading size selector field allows you to change the size of the block header.
  10. Text allows you to set a text for the section.
  11. Text position allows you to change text position.
  12. Button options allows you to set a button and customize it.

Banner Grid

In this section you can flexibly customize the section and blocks, their position, height, text size, overlay, add a background image or video over the block.

"Grid cells amount" defines the layout of the grid in the section. To create a block that spans 3 columns, set the "Grid cells amount" to 3. For the block's "Column start", choose 1, and for "Column end", choose 4, since both columns and rows start from 1, not 0.

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

  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. Button label field sets the button's label.
  4. Button link field allows you to add a link to any source.
  5. Card options allow you to customize product cards in the section.

Countdown

You can add and customize a countdown timer.

  1. Section type lets you select the layout type.
  2. Use Color scheme selector to change the color scheme.
  3. Image allows you to set a image for the section.
  4. Video allows you to set a video for the section.
  5. Overlay opacity slider allows you to change the opacity of the overlay.
  6. Content position allows you to change content position.
  7. Heading allows you to set a heading for the section.
  8. Text allows you to set a text for the section.
  9. Form text field adds a text to the top of the form.
  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 lets you select the action that should occur when the 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.

Logo lis

Section allows you to add brand logos with their links.

  1. Subheading allows you to set a subheading for the section.
  2. Enable top border field allows you to connect the lines above the section.
  3. Enable bottom border field allows you to connect the lines under the section.

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.

Ticker

The section allows you to add scrolling ticker

  1. Use 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. Text size selector field allows you to change the size of the section text.

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

  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. Button label sets the text displayed on the button.
  4. Button link field allows you to add a link to any source.
  5. Card options allow you to customize product cards in the section.

Product Markers

The section lets you mark products in the image and choose their display position.

  1. Section type lets you select the layout type.
  2. Aspect ratio sets the aspect ratio of the image.
  3. Use Color scheme selector to change the color scheme.
  4. Heading allows you to set a heading for the section.
  5. Heading size selector field allows you to change the size of the section header.
  6. Image allows you to set a image for the section.
  7. Card options allow you to customize product cards in the section.
  8. Button options allows you to set a button and customize it.
  9. Block Markers options Product select product that will be displayed.
  10. Block Markers options Position allow you to choose display position for the marker.
  11. Block Markers options Opening direction allow you to choose product marker window direction.

Before/After

The section allows you to compare products results.

  1. Section type lets you select the layout type.
  2. Enable top border field allows you to connect the lines above the section.
  3. Enable top border field allows you to connect the lines under the section.
  4. Subheading allows you to set a subheading 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. Heading size selector field allows you to change the size of the section header.
  8. Button options allows you to set a button and customize it.
  9. Before options allows you to add images and texts for compare.

Collapsible Content

You can add and customize a Collapsible Content section, such as using it for FAQs.

  1. Content position allows you to change content position.
  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.

Multicolumn

The section lets you add a scrolling ticker.

  1. Columns per row slider allows you to change the number of blocks per line only on desktop devices.
  2. Image size allows you to change the size of the icon.
  3. Heading size selector field allows you to change the size of the section header.
  4. Swipe on mobile checkbox field allows you to enable the slider on mobile devices.
  5. Enable top border field allows you to connect the lines above the section.
  6. Enable bottom border field allows you to connect the lines under the section.
  7. Block Column options Image file selector allows you to select or upload your image file.
  8. Block Column options Dark Mode image file selector to select or upload your image, which can be seen in Dark Mode.
  9. Block Column options Icon file selector allows you to select icon from a list.
  10. Block Column options Heading allows you to set a heading for the block.
  11. Block Column options Description allows you to set a description for the block.
  12. Block Column options Button label field sets the button's label.
  13. Block Column options Button link field allows you to add a link to any source.

Brands

Section allows you to add all the brands of your store.

  1. Columns per row slider allows you to change the number of brands per line only on desktop devices.
  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 top border field allows you to connect the lines above the section.
  5. Enable bottom border field allows you to connect the lines under the section.

Information Bar

Section allows you to add logos and tests.

  1. Enable top border field allows you to connect the lines above the section.
  2. Enable bottom border field allows you to connect the lines under the section.
  3. Image size allows you to change the size of the icon.

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

  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. Post layout field allows you to select layout type.
  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. Show featured image field enables the display of an image for the blog post.
  7. Show tags field enables the display of tags for the blog post.
  8. Show date field enables the display of the date for the blog post.
  9. Show author field enables the display of the author for the blog post.
  10. Show excerpt field enables the display of the excerpt for the blog post
  11. Overlay opacity slider allows you to change the opacity of the overlay.
  12. Button options allows you to display of a button linking to all blog posts.

About

In this section, you can provide information about your business or brand.

  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.
  6. Image 2 allows you to set a second image for the section.

This section allows you to display a single product and highlight its key information.

Video Banner

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

Page

Information on topic pages includes relevant details.

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. Enable sticky on scroll makes the gallery stick to the page when scrolling up.
  5. Heading size selector field allows you to change the size of the section header.
  6. Block Pop-up allows you to enable and customize pop-up modals.
  7. Block Buy buttons option shows dynamic checkout buttons based on the payment methods available in your store, allowing customers to see their preferred option, such as PayPal or Apple Pay.
  8. Block Share allows enable links from the list.

Product Reviews

To enable and manage customer reviews on your shop, follow these steps:

  1. Install the Product Reviews app by Shopify from the Apps page in the Admin Panel.
  2. After installing the app, add the Rating and Reviews blocks to your Product page.

Size Chart

To add a Size Chart, follow these steps:

  1. Enable Show guide works only if the product has a Size variant.
  2. Create new page with a table.
  3. Select the "Size chart" page.
  4. If you don't want to use the existing size chart, create a new page with a table or add an image.

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 description field turn on description display
  2. Show collection image field turn on image display
  3. Image for "Products" page Image for automatically generated page with all products
  4. Overlay opacity slider allows you to change the opacity of the overlay.

Product Grid

  1. Layout field allows you to select layout type
  2. Use Color scheme selector to change the color scheme.
  3. Products per page field sets the number of displayed cards
  4. Product card options allow you to customize product cards in the section
  5. Enable filtering field turn filtering
  6. Enable sorting field turn sorting

Image Banner

Collections List

Displays a list of all collections

  1. Heading field sets a header section.
  2. Sort collections by filters the collections based on 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

  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.

Free Shipping

To avoid issues in stores with multiple languages, keep the text '{amount}' untranslated.

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. Overlay opacity slider allows you to change the opacity of the overlay.
  3. Enable border bottom field allows you to connect the lines under the section.
  4. Block Article header option Show tags field enables the display of tags for the blog post.
  5. Block Article header option Show excerpt field enables the display of the excerpt for the blog post.
  6. Block Article header option Show date field enables the display of the date for the blog post.
  7. Block Article header option Show author field enables the display of the author for the blog post.
  8. Block Article header option Image author field allows you to set an image.
  9. Block Article header option Featured image height field allows you to select an image ratio.
  10. Block Content option Show Share block allows enable links from the list.
  11. Block Content option Promo block allows you to add image and text
  12. Block Article footer option Show date field enable date for blog post.
  13. Block Article footer option Show author field enable author for blog post.
  14. Block Article footer option Image author field allows you to set an image.
  15. Block Article footer option Share allows enable links from the list.

About

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. Refined
  2. Active
  3. Reserved
  4. Pure
  5. Authentic

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
High-end Shopify themes with advanced feature sets. You are Here Premium Shopify themes with broader functionality. Budget-friendly Shopify themes with all primary features for your store.