Online store features

You can add features to any page of your online store, using sections. You can choose, add, and configure sections with images, text, brand colors, and more.

Some pages will have default sections, such as the announcement bar, the header, and the footer. These sections appear on every page.

All themes by Shopify include the Online Store features detailed on this page. Additionally, paid themes might also include some of these features. For more details, refer to the support guide for your specific theme.

Announcement bar

The announcement bar lets you communicate important information to your customers from any page and customize up to 12 different announcement blocks. You can also add a language selector, a country or region selector, and social media icons to your announcement bar.

If you have multiple announcements, then you can choose whether to automatically rotate your announcements or let your customers go through your announcements using the chevron buttons manually.

Section settings

The settings for the announcement bar section
SettingDescription
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Show separator lineDisplays a line to visually separate the announcement bar from the page's content.
Social media iconsDisplays social media icons that link to your social media accounts.
Auto-rotate announcementsActivate to rotate your announcements automatically.
Change slides everySelect the frequency of the announcements' rotation.
Enable country/region selectorAdd a selector where a customer can choose the countries and regions that you activate in your payment settings, so that customers can view your product prices in the currency of their choice.
Enable language selectorAdd a selector where a customer can choose the countries and regions that you activate in your language settings, so that customers can browse your store in the language of their choice.

Announcement block

You can add a text and a link to an announcement block to make it clickable and take customers to a specific page.

The settings for the announcement block in the announcement bar section
SettingDescription
TextThe announcement that you want to display to your customers.
LinkThe link that you want customers to navigate to if they click the announcement bar.

The header displays on all pages in your online store.

Section settings

The settings for the heading section
SettingDescription
Desktop logo position

Where the logo displays in the header when a customer views the site on a large screen. The position of the logo is automatically optimized for mobile.

  • Middle left - Displays the logo inline with the main menu, centered vertically and aligned to the left.
  • Top left - Displays the logo above the main menu, and aligns the logo and menu items to the left.
  • Top center (default) - Displays the logo above the main menu, and aligns the logo and menu items in the center.
MenuThe menu to use as your main menu. Click Change to select a different menu.
Desktop menu typeUse the drop-down menu to choose a desktop menu type:
  • Dropdown - Displays second level menu content, with the third level collapsed until the corresponding second level item is clicked. The menu type is automatically optimized for mobile.
  • Mega menu - Displays all second and third level menu content upon the first click. The menu type is automatically optimized for mobile.
  • Drawer - Displays the drawer menu through a hamburger menu icon. Which when clicked will display all level one menu items, that can be clicked to open futher layers of navigation (level two and three).
Sticky header

Choose whether to use a sticky header and how you want it displayed.

  • None - Header does not scroll with the customer.
  • On scroll up - Header displays when the customer scrolls up the page.
  • Always - Header is always displayed when the customer scrolls up or down the page.
  • Always, reduce logo size - Header is always displayed when the customer scrolls up or down the page. The logo size is reduced by 25% as the customer scrolls the page.
Show separator lineDisplays a line to visually separate the header from the page's content.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Enable country/region selectorAdds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.
Enable language selectorAdds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.
Mobile logo position

Choose where the logo displays on mobile.

  • Center - Logo displays in the center of the header.
  • Left - Logo displays on the left of the header.
SpacingAdd spacing below your header. Use the range slider to add between 0px and 100px of space to the bottom margin.
Section paddingAdd space to the top or bottom of the header. Use the range slider to add between 0px and 100px of space to the top or the bottom of your header.

Header block

You can add the following blocks in your Header section.

The settings for the app block in the header section
SettingDescription
AppsAdd an Online Store 2.0-compatible app. Add up to 3 apps. They will be positioned to the left of the cart icon and limited to a 44px by 44px size.

The footer displays on all pages in your theme.

Section settings

The settings for the footer section
SettingDescription
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Show email signupIncludes an email signup form where customers can subscribe to your newsletter and marketing.
HeadingThe title for the Show email signup form. If Show email signup isn't enabled, then this doesn't display. Use the buttons to make the text bold or italicized, or to add a link.
Follow on ShopDisplay a follow button for your storefront on the Shop app. Learn more about follow on Shop.
Social media iconsDisplays icons for any social media platforms that you've entered a profile link for in your theme settings.
Enable country/region selectorAdds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.
Enable language selectorAdds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.
Show payment iconsDisplays the icons for payment methods that are active on your store. Icons might not be available for a payment method when an icon hasn't been registered by the payment provider. When a customer visits your store, these icons are filtered so that only the payment methods that are supported in the current customer's region and currency are displayed.
Show policy linksDisplays the policy links icons next to your copyright information. Policy links are generated from your Settings > Policies in your Shopify admin. Learn more about adding store policies.
SpacingAdd space above your footer. Use the range slider to add between 0px and 100px of space to the top margin.
Section paddingAdd space to the top or bottom of the footer. Use the range slider to add between 0px and 100px of space to the top or the bottom of your footer.
The settings for the menu block in the footer section
SettingDescription
HeadingThe title for the block. Use the buttons to make the text bold or italicized, or to add a link.
MenuThe menu to display in the block. Only top level menu items are shown in the footer, so drop-down menu types won't display as expected.

Brand information block

Your brand information is managed in your theme settings. Learn more about brand information.

The settings for the brand information block in the footer section
SettingDescription
Show social media iconsDisplays icons for any social media platforms that you've entered a profile link for in your theme settings.

Text block

The Text block can be used to highlight important information, such as store details, promotions, or contact information.

The settings for the text block in the footer section
SettingDescription
HeadingThe title for the block. Use the buttons to make the text bold or italicized, or to add a link.
SubtextThe text to display in the block.

Image block

The settings for the image block in the footer section
SettingDescription
ImageThe image to display in the block.
Image widthSets the width of the image. Can be any multiple of 5, from 50 px to 200 px. Default is 100 px.
Image alignment on large screen

Aligns the image within the block:

  • Left - Aligns the image to the left of the block.
  • Center (default) - Aligns the image to the center of the block.
  • Right - Aligns the image to the right of the block.

Blog posts

If you have a blog on your Shopify store, then you can use a Blog post section to highlight posts from that blog. Each blog post in the Blog posts section shows the first 55 words of a post's excerpt. If the blog post doesn't have an excerpt, then the first 30 words of the post are displayed instead.

Section settings

The settings for the blog posts section
SettingDescription
HeadingThe title of the section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
BlogWhich blog you want to display blog posts from. Defaults to the first blog alphabetically on your Blogs page.
Blog postsThe number of blog posts that you want to display in the section. Maximum: 4 posts.
Number of columns on desktopNumber of columns to display on desktop computers. Minimum: 1. Maximum: 4.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Show featured imageDisplays the featured image for the blog post. Suggested image aspect ratio: 3:2.
Show dateDisplays the date the blog post was created.
Show authorDisplays the author for the blog post.
Enable "View all" button if blog includes more blog posts than shownIf the blog has more blog posts than set in the Blog post field, then this displays a "View all" button that takes the customers to the blog's page.
Section paddingAdd spacing to the top or bottom of the blog post section. Use the range slider to add between 0px and 100px of space above or below the blog post section.

Select a blog

  1. In your theme editor, click the title of the blog posts section.
  2. In the Blog section, click Change.
  3. Select the blog.
  4. Click Select, and then click Save

Collage

You can create a collage of images, products, collections, and videos. Each Collage section contains three blocks. By default, the section contains an image, product, and collection block. By removing one of the blocks, you can add a video block.

To create a collage of more than three blocks, add additional collage sections below the first and don't include a Heading value to the lower collage sections. The collage sections will appear to flow together as a single section.

The recommended aspect ratios for all images in this section are 2:3 or 1:1.

Section settings

The settings for the collage section
SettingDescription
HeadingThe title of the section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
Desktop layout

How the collage media displays on desktop.

  • Left large block (default) - The first block in the section displays on the left and larger than any other blocks.
  • Right large block - The last block in the section displays on the right and larger than any other block.
Mobile layout

How the blocks display on mobile.

Collage - Displays the images in a collage layout:
  • If Left large block is enabled in Desktop layout, then the first block in the section displays on the top and larger than any other block.
  • If Right large block is enabled in Desktop layout, then the last block in the section displays on the bottom and larger than any other block.
Column - Displays all media the same size and in a column.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Section paddingAdd spacing to the top or bottom of the collage section. Use the range slider to add between 0px and 100px of space to the top or the bottom of the section.

Video block

The settings for the video block in the collage section
SettingDescription
Cover imageThe image that displays before a customer plays the video. You can upload a custom cover image from your Shopify admin.
URLThe YouTube or Vimeo link to the video. The video must be publicly available. The video will play in a pop-up window.
Video alt textThe alt text for the video. Describes the context and purpose of the video for customers using screen readers.

Product block

The settings for the product block in the collage section
SettingDescription
ProductThe product that you want to display.
Show second image on hoverWhen a customer hovers their cursor over the product image, displays the second product image if the product has one.

Collection block

The settings for the collection block in the collage section
SettingDescription
CollectionThe collection that you want to display.

Image block

The settings for the image block in the collage section
SettingDescription
ImageThe image for the section. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.

Collapsible content

The collapsible content section supports rows that can be collapsed or expanded to view the content within, and an image that can be placed to the left or the right of the collapsible content.

Section settings

The settings for the collapsible content section
SettingDescription
CaptionAn optional caption for the collapsible content section. Displays above the section heading.
HeadingThe heading of the collapsible content section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
Heading alignmentChoose the alignment of the section heading. Options are left, center (default), or right.
Layout

Select a layout for your collapsible content:

  • No container (default)
  • Row container - Each collapsible row is contained in a shaded box
  • Section container - Contains the entire collapsible content section in a shaded box
Color scheme A set of colors that you can apply to this section. Learn more about color schemes.
Container color scheme A set of colors that you can apply to the container. Learn more about color schemes. The color scheme selected is displayed only when the Layout option is set to Row or Section container.
Open first collapsible rowWhen checked, the first row of your collapsible content will be expanded by default.
ImageThe image for the section. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.
Image ratioThe image ratio for the section image:
  • Adapt to image (default)- Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Small
  • Large
Desktop layoutChoose whether the image or the collapsible rows appear first. Default setting is text first. On mobile, the image always appears first.
Section paddingAdd spacing to the top or bottom of the collapsible content. Use the range slider to add between 0px and 100px of space above or below the collapsible content section.

Collapsible row block

The settings for the collapsible row block
SettingDescription
HeadingA heading for the collapsible row.
IconChoose an icon from the drop-down list to display in front of the collapsible content heading. The check mark icon is selected by default.
Row contentContent for the collapsible row. Content can be formatted or include URL links. This feature can be used in conjunction with Row content from page.
Row content from pageYou can insert existing content from another page into a collapsible row. Click Change to select or remove a page. This feature can be used in conjunction with Row content.

Collection list

You can add a list of collections that you want to highlight. You can add up to 16 collection blocks to a collection list.

Section settings

The settings for the collection list section
SettingDescription
HeadingThe title of the section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
Image ratioThe image ratio for the featured images of the collections:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Square (default) - Crops the images to use a 1:1 ratio.
Number of columns on desktopNumber of columns to display on desktop computers. Minimum: 1. Maximum: 5.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Enable "View all" button if list includes more collections than shownDisplays a "View all" button that takes the customers to the full list of collections.
Number of columns on mobileSet a specific column layout for mobile devices. Choose between 1 and 2 columns.
Enable swipe on mobileChanges the mobile display from a column to a row, where customers can swipe sideways to see more collection blocks.
Section paddingAdd spacing to the top or bottom of the collection list. Use the range slider to add between 0px and 100px of space above or below the collection section.

Choose collections

  1. From your theme editor, click the Collection block that you want to add a collection to.
  2. Click Select collection.
  3. Click a collection, and then click Select.

Contact form

Your contact form sends all submissions to your store's sender email address. You can change the sender email address in the Notifications settings page of your Shopify admin. If you have a third-party domain, then you might also need to authenticate your domain.

The form has the following fields:

  • Name
  • Email (required)
  • Phone number
  • Comment

Section settings

The settings for the contact form section
SettingDescription
HeadingThe title of the section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Section paddingAdd spacing to the top or bottom of the contact form. Use the range slider to add between 0px and 100px of space above or below the contact form section.

Custom Liquid

You can add your own Liquid code to create a custom section.

  • Add app snippets provided in the instructions from your downloaded apps to introduce apps to your pages.
  • Add custom Liquid code directly in the editor.

Section settings

The settings for the custom liquid section
SettingDescription
Custom LiquidAdd app snippets or other custom Liquid code to create advanced customizations.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Section paddingAdd spacing to the top or bottom of the custom Liquid section. Use the range slider to add between 0px and 100px of space above or below the custom Liquid section.

Email signup banner

You can add a section to your password page, where customers can enter their email address to be informed when your store is open. Each email subscription creates a customer account.

The section comes with three default blocks:

  • Heading
  • Subheading
  • Email form

Section settings

The settings for the email signup banner section
SettingDescription
Background imageThe background image for the email signup banner. Click Change to replace or remove the image. When the image is removed, the image that comes with the theme is shown. Hide this image by deselecting the Show background image checkbox.
Edit alt textClick to set image alt text for search engine optimization and to describe the image for customers using screen readers.
Image overlay opacityDims the email signup banner image with an overlay. Use the slider to set the opacity of the overlay. Defaults to 0%.
Show background imageCheck this box to display the background image on your email signup banner.
Banner height

Set the height of your email signup banner image using the drop-down menu. Choose between Adapt to Image, small, medium (default), or large.

Desktop content positionSet the position of the email signup banner for desktop computers. Choose between top, middle, or bottom, and right, left, or center. Middle center is the default option.


On desktop, the text box partially covers the image. On mobile, the text box displays below the image.

Show container on desktopPlaces your email signup banner image text in a text box over the image for customers shopping from a desktop computer.
Desktop content alignmentSet the alignment of the image banner text for desktop computers. Choose between right, left, or center (default).
Color scheme A set of colors that you can apply to this section. Learn more about color schemes.


On desktop, the color scheme selected is displayed only when the Show container on desktop option is selected. On mobile, the color scheme selected is displayed only when Show content below image on mobile is selected.

Mobile content alignmentSet the alignment of the image banner text for mobile devices. Choose between right, left, or center (default).
Show content below on mobileContent will appear below the email signup banner image on mobile devices.

Heading block

The settings for the heading block in the email signup section
SettingDescription
HeadingThe title for the section.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.

Subheading block

The settings for the subheading block in the email signup section
SettingDescription
DescriptionThe description for the section.
Text styleChanges the style of text in the email signup section. Choose between Body (default) and Subtitle.

Email signup

You can add a section where customers can enter their email address and subscribe to your newsletter or marketing. When a customer subscribes, a customer account is created in your Shopify admin.

The section comes with three default blocks:

  • Heading
  • Subheading
  • Email form

Section settings

The settings for the email signup section
SettingDescription
Color scheme A set of colors that you can apply to this section. Learn more about color schemes.
Make section full widthMakes the section the full width of the browser window.

Heading block

The settings for the heading block in the email signup section
SettingDescription
HeadingThe title for the section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.

Subheading block

The settings for the subheading block in the collection list section
SettingDescription
DescriptionThe description for the section.

Email form

The email form block displays a field where a customer can enter an email address to sign up to opt into your marketing materials. The block has no customizable settings.

You can add a section that displays products in one collection.

Section settings

The settings for the featured collection section
SettingDescription
HeadingThe title of the section. Use the buttons to make the text bold or italicized, or to add a link. Click the dynamic source button to insert a dynamic source as the title of the section.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
DescriptionEnter descriptive text for the featured collection. You can format the text to be bold, italics, or to include a link. Click the dynamic source button to insert a dynamic source for the featured collection description.
Show collection description from the adminChecking this box will use the collection description that you added to the collection in your Shopify admin, instead of any text entered in the Description field above.
Description styleUse the drop-down menu to choose a style for the description of your featured collection. Options are body (default), subtitle, or upper case.
CollectionWhich collection you want to display products from. Click Change to remove or change the collection.
Maximum products to showThe number of products from the collection to display. Minimum: 2. Maximum: 25.
Number of columns on desktopNumber of columns to display on desktop computers. Minimum: 1. Maximum: 5.
Make products full widthCheck box to display products in the full width of the window, regardless of the page width setting.
Enable "View all" button if collection has more products than shownIf the collection has more products than set in the Maximum products to show field, then this displays a "View all" button that takes the customers to the collections page.
"View all" styleChoose between a link, a solid button, and an outline button.
Enable carousel on desktopCheck box to display products in a carousel on screens wider than 989 pixels wide.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Image ratioThe image ratio for the product images:
  • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Square - Crops the images to use a 1:1 ratio.
Image shapeChoose one of the following image shapes for your product images:
  • Default - Changes your product image into a rectangle shape.
  • Arch - Curves the top your product image.
  • Blob - Rounds your product image into one of the six random blob shapes that has a unique animation on hover.
  • Chevron left - Changes your product image into a chevron shape that has a sharp bend to the left.
  • Chevron right - Changes your product image into a chevron shape that has a sharp bend to the right.
  • Diamond - Changes your product image into a four-sided diamond shape.
  • Parallelogram - Changes your product image into a shape that has two pairs of parallel lines.
  • Round - Rounds your product image into a circle or oval shape that has a unique animation on hover.
Show second image on hoverWhen the customer hovers their cursor over the product image, displays the second product image if the product has one.
Show vendorDisplays the vendors of the products.
Show product ratingDisplays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app, and metafield definitions for reviews.rating_count and reviews.rating.
Enable quick add buttonThe quick add button allows customers to add an item to their cart from the product card. If the product has variants, then the button will read "Choose options" and display the product details in a pop-up, where the customer can select the desired variants, add the item to cart, checkout immediately with "Buy it now", or click to view the item's full details. Note that this setting is dependent on the "Buy it now" button being enabled on your product page. If "Buy it now" button isn't enabled on the product template, then customers have the option to add the product to their cart, but won't see the quick "Buy it now" checkout workflow.
Number of columns on mobileSet a specific column layout for mobile devices. Choose between 1 and 2 columns.
Enable swipe on mobileChanges the mobile display from a column to a row, where customers can swipe sideways to see more products.
Section paddingAdd spacing to the top or bottom of the featured collection section. Use the range slider to add between 0px and 100px of space above or below the featured collection section.

You can add a section that features a specific product.

Section settings

The settings for the featured product section
SettingDescription
ProductThe product that you want to feature in the section.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Show secondary backgroundDisplays the featured product on your secondary background color.
Desktop media widthSelect small, medium, or large media size. The image is automatically optimized for mobile.
Constrain media to screen heightSelecting this option sets a maximum media height based on the height of the browser window.
Media fitSelect Original to maintain the media's original aspect ratio or Fill to fit the media to its container.
Desktop media positionSelect whether to have the featured product media on the left or right. Only applies for users accessing the page on a desktop computer.
Image zoom

Choose how the image zooms on desktop:

  • Open lightbox - Opens the large image. Default for mobile.
  • No zoom - Deactivates the zoom on images. Recommended for images that aren't high resolution.
  • Click and hover - Click to zoom in on the image, then hover to view different sections zoomed in. Zoom on hover is disabled when the enlarged images is clicked again or when the mouse leaves the image's container. When this setting is enabled and the user is on a mobile device, the image will default to opening in a modal (lightbox).
Hide other variants' mediaSelect this option to hide the media for other variants after a variant has been selected.
Enable video loopingAllows the video to be played again. Customers must click to start the replay.
Section paddingAdd spacing to the top or bottom of the featured product section. Use the range slider to add between 0px and 100px of space to the top or the bottom of the section.

You can add the following blocks in your Featured product section.

The blocks available in the featured product section
BlockSettings
TextEnter text for your featured product:
  • Text: Accepts text or dynamic source.
  • Text style: Choose between Body, Subtitle, or Uppercase.
Title Heading size: Choose between Small, Medium, or Large.
PriceThis block has no customizable settings.
Variant pickerChoose between pills or a drop-down menu.
Quantity selectorThis block has no customizable settings.
Buy buttonsCheck the Show dynamic checkout buttons box to display any dynamic checkout options that you've enabled in your Payments settings.
ShareClickable text that allows customers to share the product to their social media.
Product ratingDisplays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app, and Metafield definitions for reviews.rating_count and reviews.rating.
Custom LiquidAdd custom Liquid or HTML code.
AppsAdd an Online Store 2.0-compatible app.
Icon with textThis block displays up to three icons that you can select from a list of preinstalled icons, or from an image that you upload. If you choose to upload an image, then the uploaded image overrides any icon drop-down selection. For the layout of your icons, you can select vertical or horizontal. To delete an icon, clear the heading field. To display more than three icons, add another **Icon with text** block.
SKUThis block displays the SKU (stock keeping unit) associated with a product when your variant has a SKU associated with it. Learn more about [adding SKU numbers to your product variants from the admin](/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku#add-sku-numbers-to-your-product-variants-from-the-admin-sectioned%20themes-specific).

Image banner

The image banner section supports one or two images, and a text box with buttons. If two images are used, then they are displayed side by side on desktop. On mobile, you can choose whether the images display side by side or in a column.

On desktop, the text box partially covers the image. On mobile, the text box displays below the image. You can change the text alignment between right, left, or center for both desktop and mobile.

Section settings

The settings for the image banner section
SettingDescription
First imageThe main image for the banner. If two images are added to the section, then this image displays on either the left or the top, depending on whether the customer is on desktop or mobile.
Edit alt textClick to set image alt text for search engine optimization and to describe the image for customers using screen readers.
Second imageThe secondary image for the banner. If two images are added to the section, then this image displays on either the right or the bottom, depending on whether the customer is on desktop or mobile.
Image overlay opacityAdds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%.
Banner height

Set the height of your banner images using the drop-down menu.

  • Adapt to first image - Sets the height of the section to the height of the first image.
  • Small - Desktop: 420 px, mobile: 280 px
  • Medium (default) - Desktop: 560 px, mobile: 340 px
  • Large - Desktop: 720 px, mobile: 390 px
Desktop content positionSet the position of the desktop image banner. Choose between top, middle, or bottom, and right, left, or center.
Show container on desktopPlaces your banner image text in a text box over the banner image for customers shopping from a desktop computer.
Desktop content alignmentSet the alignment of the image banner text for desktop computers. Choose between right, left, or center.
Color scheme A set of colors that you can apply to this section. Learn more about color schemes. The color scheme selected is displayed only when the Show text box on desktop option is selected.
Animations

Select an animation for your image:

  • None (default)
  • Ambient movement - Slowly moves the image position within its container.
  • Fixed background position - When a customer scrolls the page, the foreground elements, such as text and buttons, move at the same speed, while the background stays fixed.
  • Zoom in on scroll - When a customer scrolls the page, the foreground elements, such as text and buttons, move at the same speed, while the background stays fixed and the image zooms in.
Mobile content alignmentSet the alignment of the image banner text for mobile devices. Choose between right, left, or center.
Stack images on mobileIf two images are added to the section, then displays the images in a column instead of side by side.
Show container on mobilePlaces your banner image text in a text box over the banner image for customers shopping from a mobile device.

Heading block

The settings for the heading block in the image banner section
SettingDescription
HeadingLarge text for the title of the text box. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.

Text block

The settings for the text block in the image banner section
SettingDescription
DescriptionDisplays paragraph-style text.
Text styleChanges the style of text in the image banner. Choose between Body, Subtitle, and Uppercase.

Button block

The settings for the button block in the image banner section
SettingDescription
First button labelThe text that displays on the first button.
First button linkThe URL that you want the first button to link to.
Use outline button styleAdjusts the button styling to be an outline of a button instead of having a solid background.
Second button labelThe text that displays on the second button.
Second button linkThe URL that you want the second button to link to.
Use outline button styleAdjusts the button styling to be an outline of a button instead of having a solid background.

Image with text

You can add a section that contains an image and a text block with an optional button to link customers to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

Section settings

The settings for the image with text section
SettingDescription
ImageClick Select image to choose an image for the section. Click the Change button to change or remove the image.
Edit alt textClick to set image alt text for search engine optimization and to describe the image for customers using screen readers.
Image heightChoose the height for the image:
  • Adapt to image (default)
  • Small
  • Medium
  • Large
Desktop image widthThe width for the image:
  • Small
  • Medium (default)
  • Large
Desktop image placementChoose whether the image or the text appears first. Image first is default for mobile layouts:
  • Image first (default for mobile)
  • Image second
Desktop content positionThe vertical position of the content in the container:
  • Top (default)
  • Middle
  • Bottom
Desktop content alignmentThe alignment of the text in the container:
  • Left (default)
  • Center
  • Right
Content layoutAllows the image and text boxes to overlap with one another. If No overlap is selected, the content will adjust to accommodate the text and image.
  • Overlap
  • No overlap (default)
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Animations

Select an animation for your image:

  • None (default)
  • Ambient movement - Slowly moves the image position within its container.
  • Zoom in on scroll - When a customer scrolls the page, the foreground elements, such as text and buttons, move at the same speed, while the background stays fixed and the image zooms in.
Mobile layoutChoose the alignment of content for mobile devices:
  • Left (default)
  • Right
  • Center
Section paddingAdd spacing to the top or bottom of the image with text section. Use the range slider to add between 0px and 100px of space above or below the image with text section.

Heading block

The settings for the heading block in the image with text section
SettingDescription
HeadingTitle text for the section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.

Text block

The settings for the text block in the image with text section
SettingDescription
ContentDisplays paragraph-style text in the text section.
Text styleStyle for the content text:
  • Body (default)
  • Subtitle

Button block

The settings for the button block in the image with text section
SettingDescription
Button labelThe text that displays on the button.
Button linkThe URL that you want the button to link to.

Caption block

The settings for the caption block in the image with text section
SettingDescription
TextAdd a tagline or caption to your image. Text will appear at the bottom of your image with text section.
Text styleStyle of the content text:
  • Uppercase (default)
  • Subtitle
Text sizeSize of the content text:
  • Small
  • Medium (default)
  • Large

Multicolumn

You can use the multicolumn section to display content in a column layout, and add a button below the columns to take the customer to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or provide a review.

Section settings

The settings for the multicolumn section
SettingDescription
HeadingThe title of the section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
Image width

The width of images added to the columns.

  • Full width of column (default) - The width of the image is the full size of the column.
  • Half width of column - The width of the image is half the size of the column.
  • One-third width of column - The width of the image is a third of the size of the column.
Image ratio

The image ratio for the image:

  • Adapt to image (default) - Uses the aspect ratio of the image. This prevents the image from being cropped.
  • Portrait - Crops the image to use a 2:3 ratio.
  • Square - Crops the image to use a 1:1 ratio.
  • Circle - Crops the image to display in a circle
Number of columns on desktopUse the range scale to select the number of columns that appear on desktop computers. Minimum is 1, maximum is 6.
Column alignment

The alignment of the images and text within the columns:

  • Left (default) - Aligns the images and text to the left.
  • Center - Aligns the images and text in the center.
Secondary backgroundChoose None to hide the secondary background, or Show as column background to change the column container colors.
Button labelThe text that displays on the button.
Button linkThe URL that you want the button to link to.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Number of columns on mobileSet a specific column layout for mobile devices. Choose between 1 and 2 columns.
Enable swipe on mobileChanges the mobile display from a column to a row, where customers can swipe sideways to see more collection blocks.
Section paddingAdd spacing to the top or bottom of the multicolumn section. Use the range slider to add between 0px and 100px of space above or below the multicolumn section.

Column block

You can have a maximum of 12 columns in one section. If you have one, two, or three column blocks, then they display in one row on desktop. If you have four or more column blocks, then they display in a layout of two columns. On mobile, the column blocks dislpay in a single column, unless Enable swipe on mobile is enabled.

The settings for the column block in the multicolumn section
SettingDescription
ImageThe image that you want to display.
HeadingThe title of the column. Use the buttons to make the text bold or italicized, or to add a link.
DescriptionThe paragraph text in the column.
Link label [optional]The text of a link added below the column block. Leave blank if you don't have a link added.
LinkURL for the link. Leave empty for no link.

Multirow

You can add a section that contains multiple rows each with an image, text, and an optional button. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

You can also display metaobjects content through dynamic sources. To display metaobjects entries, you need to build a metaobject, create entries, and ensure the metaobject has storefront access before you can use them in multirow sections.

Section settings

The settings for the multirow section
SettingDescription
Image heightChoose the height for the image:
  • Adapt to image
  • Small
  • Medium (default)
  • Large
Desktop image widthThe width for the image:
  • Small
  • Medium (default)
  • Large
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
Text styleChanges the style of text. Choose between Body (default) and Subtitle.
Button styleChoose between a solid button and an outline button.
Desktop content positionThe vertical position of the content in the container:
  • Top
  • Middle (default)
  • Bottom
Desktop content alignmentThe alignment of the text in the container:
  • Left (default)
  • Center
  • Right
Desktop image placementChoose the position of the images. Placement is automatically optimized for mobile:
  • Alternate from left (default)
  • Alternate from right
  • Aligned left
  • Aligned right
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Container color schemeA set of colors that you can apply to the container. Learn more about color schemes.
Mobile layoutChoose the alignment of content for mobile devices:
  • Left (default)
  • Right
  • Center
Section paddingAdd spacing to the top or bottom of the multirow section. Use the range slider to add between 0px and 100px of space above or below the image with text section.

Row Block

The settings for the row blocks in the multirow section
SettingDescription
ImageClick Select image to choose an image for the row. Click the Change button to change or remove the image. Click the source button to link to dynamic sources.
Edit alt textClick to set image alt text for search engine optimization and to describe the image for customers using screen readers.
CaptionAdd a tagline or caption to your image.
HeadingTitle text for the row. Use the buttons to make the text bold or italicized, or to add a link.
TextDisplays paragraph-style text in the row.
Button labelThe text that displays on the button.
Button linkThe URL that you want the button to link to.

Page

You can choose to display the content of a custom page in a section. This brings the entire content of the page into the section, but doesn't bring any Liquid code from any template.

Section settings

The settings for the page section
SettingDescription
PageThe page from your online store that you want to display.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Section paddingAdd spacing to the top or bottom of the page section. Use the range slider to add between 0px and 100px of space above or below the page section.

Rich text

You can add a rich text section with a heading, a caption, text, and a button to link customers to a new page.

Section settings

The settings for the rich text section
SettingDescription
Desktop content positionChoose the position of the rich text container. Use the drop-down menu to select left, center (default), or right. Content is automatically optimized for mobile devices.
Content alignmentThis setting affects the text alignment for all blocks within the rich text section. Use the drop-down menu to select left, center (default), or right.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Make section full widthSections are full width by default.
Section paddingAdd spacing to the top or bottom of the rich text section. Use the range slider to add between 0px and 100px of space above or below the rich text section.
Connecting to dynamic sourcesUse dynamic sources in your rich text section to reference information such as metafields or metaobjects. You can even use list references to output lists of text in your theme. For example, a metafield list (even if available on a referenced metaobject), can be used to output a list of text within the rich text setting in your theme.

Heading block

You can have up to 3 heading blocks in your rich text section.

The settings for the heading block in the rich text section
SettingDescription
HeadingThe title of the section. Use the buttons to make the text bold or italicized, or to add a link. Click the source button to link to dynamic sources.
Heading sizeChange the size of the heading text. Choose between small, medium, large, or extra large.

Text block

The Text block is a good way to share information about your brand with your customers. You can describe the benefits of your products, make announcements, welcome customers to your store, or talk about your brand values.

You can have up to 3 text blocks in your rich text section.

The settings for the text block in the rich text section
SettingDescription
DescriptionParagraph-style text for the main content of the section. Click the source button to link to dynamic sources.

Caption block

You can have up to 3 caption blocks in your rich text section.

The settings for the text block in the rich text section
SettingDescription
TextAdd a brief tagline to your rich text section.
Text styleUse the drop-down menu to select a text style between Subtitle (default) and Uppercase.
Text sizeUse the drop-down menu to set your caption text size. Choose between small, medium (default), and large.

Button block

You can have up to 2 button blocks in your rich text section.

The settings for the button block in the rich text section
SettingDescription
Button labelThe text that displays on the button.
Button linkThe URL that you want the button to link to.
Use outline button styleAdjusts the button styling to be an outline of a button instead of having a solid background.

Slideshow

You can add a slideshow section to display a carousel of up to 5 images on a page in your store.

Section settings

The settings for the slideshow section
SettingDescription
LayoutChoose between Full width (default) or Grid. Full width displays the slideshow the full width of the section, whereas Grid displays the slideshow with padding on either side.
Slide height

The height of the slideshow:

  • Adapt to first image - all images will be the same height as the first image in the carousel.
  • Small
  • Medium (default)
  • Large
Pagination style

The style of the slideshow navigation that appears below the images.

  • Dots
  • Counter (default)
  • Numbers
Auto-rotate slides

Check this box to automatically rotate through the images in the slideshow. If this box isn't checked, then the slideshow displays a static image until the customer manually advances the slideshow.

Change slides timerUse the bar to set the auto-rotate time of the slideshow. Minimum: 3 seconds, maximum: 9 seconds.
Animations

Select an animation for your image:

  • None (default)
  • Ambient movement - Slowly moves the image position within its container
Mobile layoutCheck the box to show content below images on mobile.
AccessibilityAdd a description for your slideshow for visually impaired customers.

Image slide settings

The settings for the slideshow section images
SettingDescription
ImageChoose a static or dynamic image for your slideshow. Click Select Image to view your media library, or click the source button to connect a dynamic source. After an image has been selected, clicking the Change button allows you to remove, change, or delete the image.
Edit alt text

Describe the slideshow image and provide context for customers using screen readers.

Heading

Optional heading text for the image. Text is added to each image individually. Use the buttons to make the text bold or italicized, or to add a link.

Heading size

Choose between a small, medium (default), or large heading.

SubheadingOptional subheading text for the image. Text is added to each image individually. Use the buttons to make the text bold or italicized, or to add a link.
Button labelEnter text for a button, or leave blank to hide the button entirely.
Button linkThe URL that you want the button to link to. Click the source button to add a dynamic source as a URL.
Use outline button styleClick the checkbox to toggle between a solid or outlined button.
Desktop content positionThe position of the content box over the image. Choose between top, middle, or bottom, and left, center, or right. Middle center is the default setting.
Show container on desktopCheck the box to show the content box.
Desktop content alignmentAligns the text in the container. Choose between left, center (default), or right.
Image overlay opacityUse the slider to adjust the opacity of the image overlay.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes. This setting requires the container to be displayed in order to affect the slideshow image.
Mobile layoutChoose how the content will appear on a mobile device. Choose between left, center (default), or right.

Video

You can add a video section to embed a video from YouTube or Vimeo on a page in your store.

Section settings

The settings for the video section
SettingDescription
HeadingThe title of the section. Use the buttons to make the text bold or italicized, or to add a link.
Heading sizeChange the size of the heading text. Choose between small, medium, or large.
Play video on loopWhen checked, the video will start over after ending.
VideoAdd or select your own video to the section. You can edit the video to use a custom cover image, as well as add some alt text. If a Shopify-hosted video is added, it will be used over a URL video from the setting below.
URLThe YouTube or Vimeo link to the video. The video must be publicly available and will only be shown if no Shopify-hosted video is added in the setting above.
Cover imageThe image that displays before a customer plays the video.
Video alt textThe alt text for the video. Describes the context and purpose of the video for customers using screen readers.
Make section full widthRemoves the default padding and makes the section the full width of the page.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Section paddingAdd spacing to the top or bottom of the video. Use the range slider to add between 0px and 100px of space above or below the video section.
Can’t find the answers you’re looking for? We’re here to help.