Explore the Evolution: Embrace the New Era of Our Themes' Capabilities Explore
Home Help center Portland

Portland

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

General sections

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

Header appears at the top of every page right below the Announcement bar. You can customize it to fit your brand and product offerings.

  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 on pages with an overlay header and also in Dark mode.
  4. (Optional.) If you add a logo, you can use the Custom logo width slider to change the logo size.
  5. Use the Logo position on large screen field to select a position of the logo.
  6. Choose a Menu to be displayed in the header.
  7. Active menu item style selector allows you to select an active menu item's style.
  8. Enable Fullscreen overlay menu field enables the display of a Fullscreen overlay menu.
  9. Choose a Fullscreen overlay menu to be displayed in the Fullscreen overlay menu.
  10. Enable country/region selector field enables the display of country/region.
  11. Enable sticky header field enables the display of a header on the screen as the user scrolls up.
  12. Enable Search field enables the display of a Search icon (Not displayed when Menu is not enabled).
  13. Heading allows you to set a heading for the Search modal.
  14. Show collections field enables the display of collection links in the Search modal and the settings below allow you to customize these links.
  15. Show popular items field enables the display of popular items in the Search modal, and the settings below allow you to choose and customize these items.

Fullscreen overlay menu aside

  1. Show social field enables the display of social icons.
  2. Use the Aside options selector to select the type of aside.
  3. Use the Image file selector to select or upload an image for Promo block.
  4. Use the Heading field to set a heading for Promo block.
  5. Description field allows you to add text to Promo block.
  6. Button link field allows you to add a link to any sourse.
  7. Button label field sets the button's label.
  8. Button style field sets the button's style.
  9. Show articles field enables the display of blog articles in search and the settings below allow you to customize these articles.

Mega Menu

You can add a Mega menu to the Header as a new block and choose up to 2 collections as promo blocks.

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

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

  1. Use Color scheme selector to change the color scheme.
  2. Enable border top field enables a line above the section.
  3. Choose a Bottom menu to be displayed in the bottom line footer.
  4. Show social media icons field enables the display of social media icons in the bottom line of the footer.
  5. Enable Follow on Shop field turns on the display of the Follow on Shop button in the bottom line of the footer.
  6. Show payment icons field enables the display of payment methods in the bottom line of the footer.
  7. Show policy links field enables the display of wage types in the bottom line of the footer.
  8. Enable country/region field enables the display of the region selector in the footer.
  9. Enable language field enables the display of the language selector in the footer.
  10. Block Logo info file selector allows you to select or upload your logo files.
  11. (Optional.) If you add a logo, use the Custom logo width slider to change the logo size in the footer.
  12. Block Menu allows you to select up to 6 menus, which will be displayed on the top line of the footer.
  13. Block Subscribe form allows you to add and customize subscribe form.

Theme settings

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.

Overlay Group

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.

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. "notification").
  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.

All sections

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

Interactive section

Allows you to add the main heading, subheading, and images with effects.

  1. Use Color scheme selector to change the color scheme.
  2. Overlay checkbox field allows you to enable an overlay.
  3. Overlay opacity slider allows you to choose an overlay's opacity.
  4. Animation type selector allows you to choose an animation for images.
  5. Heading size selector allows you to choose a heading size.
  6. Heading allows you to set a heading for the section.
  7. Subheading allows you to set a subheading for the section.
  8. Additional information field allows you to add text to the section.
  9. Enable button field includes a button/link to go to the general collections page.
  10. Button label field sets the button's label.
  11. Button style field sets the button's style.
  12. Block Background image allows you to set an image for the section.

Promo images

Allows you to add the main heading, and images with effect on scroll.

  1. Heading allows you to set a heading for the section.
  2. Heading size selector allows you to choose a heading size.
  3. Heading transform selector allows you to choose a heading style.
  4. Additional information field allows you to add text to the section.
  5. Button link field allows you to add a link to any sourse.
  6. Button label field sets the button's label.
  7. Button style field sets the button's style.
  8. Top padding slider allows you to change the top padding in the section.
  9. Bottom padding slider allows you to change the bottom padding in the section.
  10. Block Image allows you to set an image for the section.

The section allows you to 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. Heading size selector allows you to choose a heading size.
  4. Overlay opacity slider allows you to choose an overlay's opacity.
  5. Products field allows you to select products that will be displayed.
  6. Image file selector allows you to select or upload your image files.
  7. Animation selector allows you to choose an animation for the section.
  8. Products position selector allows you to choose the products position.
  9. Product card options allow you to customize product cards in the section.
  10. Button options allow you to customize the button in the section.
  11. Bottom padding slider allows you to change the bottom padding in the section.

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. Subheading allows you to set a subheading for the section.
  3. Heading allows you to set a heading for the section.
  4. Heading size selector allows you to choose a heading size.
  5. Overlay opacity slider allows you to choose an overlay's opacity.
  6. Product card options allow you to customize product cards in the section.
  7. Block Product slider allows you to add an image and choose a product.

Collection list

Allows you to select up to several collections (categories).

  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. Product card options allow you to customize product cards in the section.
  5. Top padding slider allows you to change the top padding in the section.
  6. Bottom padding slider allows you to change the bottom padding in the section.
  7. Block Collection allows you choose a collection and a product.

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

  1. Heading allows you to set a heading for the section.
  2. Link field allows you to set a label for a link.
  3. Button link field includes a button/link to go to the general collections page.
  4. Products field allows you choose up to 12 products.
  5. Enable filtering field allows you to enable filtering products by their type.
  6. Enable border top field enables the display of a line above the section.
  7. Product card options allow you to customize product cards in the section.
  8. Top padding slider allows you to change the top padding in the section.
  9. Bottom padding slider allows you to change the bottom padding in the section.

Testimonials

The section is designed for the review carousel.

  1. Use Color scheme selector to change the color scheme.
  2. Button style field sets the button's style.
  3. Top padding slider allows you to change the top padding in the section.
  4. Bottom padding slider allows you to change the bottom padding in the section.
  5. Block Testimonials slide slider Rating allows you to set a review score.
  6. Block Testimonials slide option Text adds a text for its slide.
  7. Block Testimonials slide option Author's picture adds an author's picture for its slide.
  8. Block Testimonials slide option Author's name adds an author's name for its slide.
  9. Block Testimonials slide option Author's position adds an author's position for its slide.

Multicolumn

Section consisting of several columns with images and descriptions.

  1. Columns per row slider allows you to select the number of columns in one line.
  2. Image fit field allows you to choose the fit of images.
  3. Top padding slider allows you to change the top padding in the section.
  4. Bottom padding slider allows you to change the bottom padding in the section.
  5. Block Column file selector Image allows you to select or upload your image files to the column.
  6. Block Column field Subheading allows you to set a subheading for the column.
  7. Block Column field Heading allows you to set a heading for the column.
  8. Block Column field Description allows you to set a description for the column.
  9. Block Column field Button label allows you to add text for the button.
  10. Block Column field Button link sets a link for the button.

Steps

Allows you to add up to 5 slides/steps and customize them.

  1. Position field allows you to select the position of the section
  2. Heading allows you to set a heading for the section.
  3. Block Steps slide field Headingallows you to set a heading for the slide.
  4. Block Steps slide field Textallows you to set a text for the slide.
  5. Block Steps slide field Imageallows you to set an image for the slide.

Blog posts

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

  1. Post layout field allows you to select layout type.
  2. Heading field adds a header for the section.
  3. Blog field allows you to choose a blog.
  4. Blog posts slider allows you to select the number of columns in one line.
  5. Show featured image field enables the display of an image for the blog post.
  6. Show date field enables the display of the date for the blog post.
  7. Show tags field enables the display of tags for the blog post.
  8. Show author enables the display of the author for the blog post.
  9. Enable "Read all button" field enables the display of a button linking to all blog posts.
  10. Top padding slider allows you to change the top padding in the section.
  11. Bottom padding slider allows you to change the bottom padding in the section.

Image collage

Decorating section with heading, images, and text.

  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. Description allows you to set a description for the section.
  5. Main image allows you to set a large image for the section.
  6. Enable border top field enables the display of a line above the section.
  7. Top padding slider allows you to change the top padding in the section.
  8. Bottom padding slider allows you to change the bottom padding in the section.
  9. Block Image optionImage allows you to set an image for the block.
  10. Block Image optionimage width field sets the width of the image for the block.

Instagram collage

Decorating section with heading, images, link and text.

  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. Description allows you to set a description for the section.
  5. Account avatar allows you to set a left image for the section.
  6. Main image allows you to set a large image for the section.
  7. Account name allows you to set an account name.
  8. Account description allows you to set an account description.
  9. Button label field allows you to add text for the button.
  10. Button link field sets a link for the button.
  11. Button style field sets the button's style.
  12. Enable border top field enables the display of a line above the section.
  13. Top padding slider allows you to change the top padding in the section.
  14. Bottom padding slider allows you to change the bottom padding in the section.
  15. Block Image optionImage allows you to set an image for the block.
  16. Block Image optionimage width field sets the width of the image for the block.

Before/After

You can add two comparable images, along with text and a button, in this section.

Countdown

You can add and customize a countdown timer.

Collapsible content

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

Slideshow

In this section, you can add and customize slides, adjust the color scheme, width, aspect ratio, and slide autoplay duration.

Video Banner

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

Page

Information on topic pages

Product page

Product information

  1. Desktop product gallery alignment selector allows you to choose alignment type on desktop devices.
  2. Mobile product gallery alignment selector allows you to choose alignment type on mobile devices.
  3. Block Text option Text style sets style vendor text.
  4. Block Pop-up allows you to enable and customize pop-up modals.
  5. Block Inventory status displays the number of product items left in stock.
  6. Block Variant picker allows to choose the type of options, either pills or dropdown.
  7. 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.
  8. Block Buy buttons option Show recipient information form for gift card products enables an option to send a gift card as a gift.
  9. Block Share allows you to enable links from the list.

About product

  1. Subheading allows you to set a subheading for the section.
  2. Heading allows you to set a heading for the section.
  3. Block Additional description Heading field sets a heading for the block.
  4. Block Additional description Content field sets a text for the block.

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.

You can easily edit or add recommendations for multiple products using the Bulk Editor in the Products tab in the Admin panel.

  1. Heading field sets a heading for the section.
  2. Link field allows you to add text for the link.
  3. Products to show field allows you to select the total displayed quantity of products.
  4. Enable border top field enables the display of a line above the section.
  5. Image ratio field allows you to choose the orientation of pictures for cards.
  6. Image fit field allows you to choose the fit of pictures for cards.
  7. Show second image on hover field enables the display of the second image on hover.
  8. Show vendor enables the display of the vendor.

Size chart

To add a size chart, follow these steps:

  1. Create new page with a table.
  2. Add a "Popup" block to the product page.
  3. Select "Size chart" page.

Collection page

Collection banner

  1. Layout selector allows you to choose a layout type.
  2. Additional word field sets the additional word to the collection heading.
  3. Show additional word field enables the display of the additional word.
  4. Show collection description field enables the display of the description.
  5. Show collection image field enables the display of the collection image.
  6. Image for "Products" page allows you to set an image for automatically generated page with all products.
  7. Featured products field allows you to select products that will be displayed.
  8. Product card options allow you to customize product cards in the section.

Product grid

  1. Products per page field sets the number of displayed cards.
  2. Image ratio field allows you to choose the orientation of pictures for cards.
  3. Image fit field allows you to choose the fit of pictures for cards.
  4. Show second image on hover field enables the display of the second image on hover.
  5. Show vendor enables the display of the vendor.
  6. Enable filtering field enables filtering.
  7. Enable sorting field enables sorting.

Collections list

Displays a list of all collections

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

Cart

  1. Image fit field allows you to choose the fit of pictures for cards.
  2. Show vendor enables the display of the vendor.
  3. Block Subtotal option Enable cart note field sets a note.
  4. Block Subtotal option Top padding slider allows you to change the top padding in the section.
  5. Block Subtotal option Bottom padding slider allows you to change the bottom padding in the section.

Blog

  1. Show featured image field enables the display of the image for the blog post.
  2. Show tags field enables the display of the tags for the blog post.
  3. Show date field enables of the date for the blog post.
  4. Show author enables the display of the author for the blog post.
  5. Show excerpt enables the display of the excerpt for the blog post.
  6. Top padding slider allows you to change the top padding in the section.
  7. Bottom padding slider allows you to change the bottom padding in the section.

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 the tags for the blog post.
  3. Block Article footer option Show excerpt field enable excerpt for the blog post.
  4. Block Article header option Show date field enables 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 Article header option Share allows enable links from the list.
  8. Block Article footer option Show date field enable date for the blog post.
  9. Block Article footer option Show author field enables the display of the author for the blog post.
  10. Block Article footer option Image author field allows you to set an image.
  11. Block Article footer option Share allows enable links from the list.

Importing Our Demos

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

  1. Copy the demo structure from the links (Cmd-A or Ctrl-A to select all).
  2. Follow to the section Online Store > Themes in your store. Click the three dots button of your theme.
  3. Open the code editor by clicking the Edit code button.
  4. In the code editor, search for the file "index.json" and paste the demo structure. Click "Save" to save your changes. If there's an error, click "Format json" and try to save the file again.

Demos structure

  1. Heartbeat
  2. Balance
  3. Cold Brew
  4. Sparkle
  5. Indian Summer

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