Themes Services Help Center
Home Help Center Outsiders

Outsiders Documentation

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.

Section borders

To enable top and bottom borders in the section

  1. Enable top field enables a line above the section.
  2. Enable bottom field enables a line below the section.

Buttons

Allows you to change button options

  1. Button label field sets the button's label.
  2. Button link field allows you to add a link to any source.
  3. Button style selector to change the button style.
  4. Enable arrow field enables an arrow in the button.

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.

Custom product badgesl

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.

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. Color scheme selector allows you to change the color scheme. You can change the background color in the Theme settings.
  3. Use the field Icon (Optional.) to add/change the image.
  4. Text field allows you to add and edit text.

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. Color scheme selector allows you to change the color scheme. You can change the background color in the Theme settings.
  4. End date allows you to set the countdown end date.
  5. End time allows you to set the countdown end time.
  6. Title size selector field allows you to change the size of the title.
  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.

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

  1. Full width enables the header to span the full width of the page.
  2. Minimum height sets the smallest allowable height for the header, ensuring it looks consistent across devices.
  3. Color scheme selector allows you to change the color scheme. You can change the background color in the Theme settings.
  4. Enable bottom border field allows you to connect the lines under the header.
  5. Use the Logo file selector allows you to select or upload your logo file.
  6. Use the Secondary logo file selector to select or upload your logo, which can be seen in Dark mode.
  7. (Optional.) If you add a logo, you can use the Custom logo width slider to change the logo size.
  8. On scroll inverse color enables the header color to invert when scrolling down the page.
  9. Header overlay enables an overlay effect for the header when the first section is a hero.
  10. Choose a Menu to be displayed in the header.
  11. Enable country/region selector field enables the display of country/region.
  12. Enable language selector field enables the display of language.
  13. Use the sticky header field to select a variant of the header when user scrolls in page.
  14. Search options allows you to add Search modal and customize it.

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. Promo block allows you to add image.
  4. Promo block Trigger allows you to specify the submenu link name, and when you add an image, it will be displayed on hover over that link.

Burger menu

  1. Choose a Menu to display it in the dropdown.
  2. Show social enables the display of social icons.
  3. Promo block allows you to add image.
  4. Promo block Trigger allows you to specify the submenu link name, and when you add an image, it will be displayed on hover over that link.

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

Overlay Group

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

Sections is used on all pages by default

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. Show logo enables the display of the logo in the footer.
  3. Use the Logo 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. Language selector field enables the display of the language selector in the footer.
  7. Country/region selector field enables the display of the region selector in the footer.
  8. Follow on Shop To 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. Policy links field enables the display of the policies links in the footer.
  11. Social media icons field enables the display of social media icons in the bottom line of the footer.
  12. Block Menu allows you to select menus, which will be displayed on the top line of the footer.
  13. Block Subscribe form allows you to add and customize subscribe form.
  14. Block Store information allows you to add details about your store, which will be displayed in 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. Image size selector allows you to change the height of this section.
  2. Button style selector to change the button style.
  3. Enable autoplay checkbox field allows you to enable autoplay for slider.
  4. Show bullets checkbox field enables the display bullets.
  5. Speed sliding allows you to change speed of transition between items.
  6. Delay sliding allows you to change delay after each slide.
  7. Block Slide options Color scheme selector to change the color scheme for the block.
  8. Block Slide options Image allows you to set a image for the block.
  9. Block Slide options Video allows you to set a video for the block.
  10. Block Slide options Overlay opacity slider allows you to change the opacity of the overlay.
  11. Block Slide options Heading allows you toset a heading for the block.
  12. Block Slide options Text allows you toset a text for the block.
  13. Block Slide options Button options allows you to set a button and customize it.

Multi slider

The section allows you to add slides with image and heading

  1. Image size selector allows you to change the height of this section.
  2. Direction lets you choose either vertical or horizontal slide transitions.
  3. Enable autoplay checkbox field allows you to enable autoplay for slider.
  4. Show bullets checkbox field enables the display bullets.
  5. Speed sliding allows you to change speed of transition between items.
  6. Delay sliding allows you to change delay after each slide.
  7. Block Slide options Color scheme selector to change the color scheme for the block.
  8. Block Slide options Image allows you to set a image for the block.
  9. Block Slide options Video allows you to set a video for the block.
  10. Block Slide options Overlay opacity slider allows you to change the opacity of the overlay.
  11. Block Slide options Heading allows you toset a heading for the block.
  12. Block Slide options Text allows you toset a text for the block.
  13. Block Slide options Button options allows you to set a button and customize it.

Hero

  1. Use Color scheme selector to change the color scheme.
  2. Image size selector allows you to change the height of this section.
  3. Overlay opacity slider allows you to change the opacity of the overlay.
  4. Heading allows you toset a heading for the section.
  5. Button options allows you to set a button and customize it.
  6. Description allows you toset a description for the section.
  7. Block Slide options Image allows you to set a image for the block.
  8. Block Slide options Video allows you to set a video for the block.

Animated image collage

  1. Use Color scheme selector to change the color scheme.
  2. Image size selector allows you to change the height of this section.
  3. Overlay opacity slider allows you to change the opacity of the overlay.
  4. Heading allows you toset a heading for the section.
  5. Button options allows you to set a button and customize it.
  6. Description allows you toset a description for the section.
  7. Block Slide options Image allows you to set a image for the block.
  8. Block Slide options Video allows you to set a video for the block.

The section allows you to add slides with image, description and button

  1. Use Color scheme selector to change the color scheme.
  2. Background image allows you to set a image for the section.
  3. Background video allows you to set a video for the section.
  4. Heading allows you toset a heading for the section.
  5. Image size selector allows you to change the height of this images.
  6. Enable autoplay checkbox field allows you to enable autoplay for slider.
  7. Show navigation checkbox field enables the display arrows.
  8. Speed sliding allows you to change speed of transition between items.
  9. Delay sliding allows you to change delay after each slide.
  10. Block Slide options Image allows you to set a image for the block.
  11. Block Slide options Video allows you to set a video for the block.
  12. Block Slide options Description allows you toset a description for the block.

Flicker collage

The section allows you to add slides with image and heading

  1. Use Color scheme selector to change the color scheme.
  2. Heading allows you toset a heading for the section.
  3. Description allows you toset a description for the section.
  4. Button options allows you to set a button and customize it.
  5. Block Slide options Image allows you to set a image for the block.
  6. Block Slide options Video allows you to set a video for the block.

Countdown

You can add and customize a countdown timer.

  1. Section type field allows you to select 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. Heading allows you to set a heading for the section.
  7. Heading animation checkbox field allows you to enable animation for heading.
  8. Description allows you to set a description for the section.
  9. End date allows you to set the countdown end date.
  10. End time allows you to set the countdown end time.
  11. After the timer ends. allows you to select what should be when countdown is completed.
  12. Text allows you to set a text when countdown is completed.
  13. Button options allows you to set a button and customize it.

Logo list

Section allows you to add brand logos with their links.

  1. Ticker speed allows you to change speed for the ticker.

Ticker

The section allows you to add ticker

  1. Use Color scheme selector to change the color scheme.
  2. Speed allows you to change speed for the ticker.
  3. Block Media options Text allows you to set a text for the block.
  4. Block Media options Image allows you to set a image for the block.
  5. Block Media options Link field allows you to add a link to any source.
  6. Block Media options Social icon allows you to add a icon that appears on hover over the image.
  7. Block Info options Heading allows you to set a heading for the block.
  8. Block Info options Description allows you to set a description for the block.

Before/After

The section allows you to compare products results.

  1. Before options allows you to add images and texts for compare.
  2. After 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. Use Color scheme selector to change the color scheme.
  2. Heading allows you to set a heading for the section.
  3. Description allows you to set a description for the section.
  4. Image allows you to set a image for the section.
  5. Video allows you to set a video for the section.
  6. Subheading allows you to set a subheading for the section.
  7. Heading allows you to set a heading for the section.
  8. Heading animation checkbox field allows you to enable animation for heading.
  9. Description allows you to set a description for the section.
  10. Button options allows you to set a button and customize it.

Multicolumn

  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. Swipe on mobile checkbox field allows you to enable the slider on mobile devices.
  4. Block Column options Image file selector allows you to select or upload your image file.
  5. Block Column options Secondary image file selector to select or upload your image, which can be seen in Dark mode.
  6. Block Column options Heading allows you to set a heading for the block.
  7. Block Column options Description allows you to set a description for the block.
  8. Block Column options Button label field sets the button's label.
  9. Block Column options Button link field allows you to add a link to any source.

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

Image Banner

In this section, you can add and customize an image/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. 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.

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

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. Collections per row slider allows you to change the number of collections per line only on desktop devices.
  3. Collections per page field sets the number of displayed collections.
  4. Sort collections by field filters the collection by the specified parameters
  5. Image ratio field allows you to choose the orientation of pictures for cards.
  6. Title size selector field allows you to change the size of the title.
  7. Description size selector field allows you to change the size of the description.
  8. Heading animation checkbox field allows you to enable animation for heading.
  9. Show description enables the display of the collection description.

Cart

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

Free shipping

There can be issues when a store has multiple languages. To avoid them, 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. Section type allows you to select the type of section to define its layout and style.
  2. Image size field allows you to select an image ratio.
  3. Show tags field enables the display of tags for the blog post.
  4. Show excerpt field enables the display of the excerpt for the blog post.
  5. Show date field enables thedisplay of the date for the blog post.
  6. Show author field enablesthe display of the author for the blog post.

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. Outsiders
  2. Rebels
  3. Misfits
  4. Wrong
  5. Eccentrics

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.