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.
On this page
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
Setting | Description |
---|---|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Show separator line | Displays a line to visually separate the announcement bar from the page's content. |
Social media icons | Displays social media icons that link to your social media accounts. |
Auto-rotate announcements | Activate to rotate your announcements automatically. |
Change slides every | Select the frequency of the announcements' rotation. |
Enable country/region selector | Add 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 selector | Add 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.
Setting | Description |
---|---|
Text | The announcement that you want to display to your customers. |
Link | The link that you want customers to navigate to if they click the announcement bar. |
Header
The header displays on all pages in your online store.
Section settings
Setting | Description |
---|---|
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.
|
Menu | The menu to use as your main menu. ClickChangeto select a different menu. |
Desktop menu type | 我们e the drop-down menu to choose a desktop menu type:
|
Sticky header | Choose whether to use a sticky header and how you want it displayed.
|
Show separator line | Displays a line to visually separate the header from the page's content. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Enable country/region selector | Adds 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 selector | Adds 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.
|
Spacing | Add spacing below your header. Use the range slider to add between 0px and 100px of space to the bottom margin. |
Section padding | Add 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 yourHeadersection.
Setting | Description |
---|---|
Apps | Add anOnline 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. |
Footer
The footer displays on all pages in your theme.
Section settings
Setting | Description |
---|---|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Show email signup | Includes an email signup form where customers can subscribe to your newsletter and marketing. |
Heading | The title for theShow email signupform. IfShow email signupisn't enabled, then this doesn't display. Use the buttons to make the text bold or italicized, or to add a link. |
Follow on Shop | Display a follow button for your storefront on the Shop app. Learn more aboutfollow on Shop. |
Social media icons | Displays icons for any social media platforms that you've entered a profile link for in your theme settings. |
Enable country/region selector | Adds 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 selector | Adds 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 icons | Displays the icons for payment methods that are enabled on your store. 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 links | Displays the policy links icons next to your copyright information. Policy links are generated from yourSettings>Policiesin your Shopify admin. Learn more aboutadding store policies. |
Spacing | Add space above your footer. Use the range slider to add between 0px and 100px of space to the top margin. |
Section padding | Add 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. |
Menu block
Setting | Description |
---|---|
Heading | The title for the block. Use the buttons to make the text bold or italicized, or to add a link. |
Menu | The 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 aboutbrand information.
Setting | Description |
---|---|
Show social media icons | Displays icons for any social media platforms that you've entered a profile link for in your theme settings. |
Text block
TheTextblock can be used to highlight important information, such as store details, promotions, or contact information.
Setting | Description |
---|---|
Heading | The title for the block. Use the buttons to make the text bold or italicized, or to add a link. |
Subtext | The text to display in the block. |
Image block
Setting | Description |
---|---|
Image | The image to display in the block. |
Image width | Sets 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:
|
Blog posts
If you have a blog on your Shopify store, then you can use aBlog postsection to highlight posts from that blog. Each blog post in theBlog postssection 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
Setting | Description |
---|---|
Heading | The title of the section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Blog | Which blog you want to display blog posts from. Defaults to the first blog alphabetically on your博客page. |
Blog posts | The number of blog posts that you want to display in the section. Maximum: 4 posts. |
Number of columns on desktop | Number of columns to display on desktop computers. Minimum: 1. Maximum: 4. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Show featured image | Displays the featured image for the blog post. Suggested image aspect ratio: 3:2. |
Show date | Displays the date the blog post was created. |
Show author | Displays the author for the blog post. |
Enable "View all" button if blog includes more blog posts than shown | If the blog has more blog posts than set in theBlog postfield, then this displays a "View all" button that takes the customers to the blog's page. |
Section padding | Add 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
- In your theme editor, click the title of the blog posts section.
- In theBlogsection, clickChange.
- Select the blog.
- ClickSelect, and then clickSave
Collage
You can create a collage of images, products, collections, and videos. EachCollagesection 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 aHeadingvalue 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
Setting | Description |
---|---|
Heading | The title of the section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Desktop layout | How the collage media displays on desktop.
|
Mobile layout | How the blocks display on mobile. Collage- Displays the images in a collage layout:
|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Section padding | Add 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
Setting | Description |
---|---|
Cover image | The image that displays before a customer plays the video. You can upload a custom cover image from your Shopify admin. |
URL | The YouTube or Vimeo link to the video. The video must be publicly available. The video will play in a pop-up window. |
Video alt text | The alt text for the video. Describes the context and purpose of the video for customers using screen readers. |
Product block
Setting | Description |
---|---|
Product | The product that you want to display. |
Show second image on hover | When a customer hovers their cursor over the product image, displays the second product image if the product has one. |
Collection block
Setting | Description |
---|---|
Collection | The collection that you want to display. |
Image block
Setting | Description |
---|---|
Image | The image for the section. ClickSelect Imageto choose an image, or click theChangebutton to change or remove the image. |
Edit alt text | Add 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
Setting | Description |
---|---|
Caption | An optional caption for the collapsible content section. Displays above the section heading. |
Heading | The heading of the collapsible content section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Heading alignment | Choose the alignment of the section heading. Options are left, center (default), or right. |
Layout | Select a layout for your collapsible content:
|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Container color scheme | A set of colors that you can apply to the container. Learn more aboutcolor schemes. The color scheme selected is displayed only when theLayoutoption is set toRoworSectioncontainer. |
Open first collapsible row | When checked, the first row of your collapsible content will be expanded by default. |
Image | The image for the section. ClickSelect Imageto choose an image, or click theChangebutton to change or remove the image. |
Edit alt text | Add a brief image description to improve SEO and to describe the image for customers using screen readers. |
Image ratio | The image ratio for the section image:
|
Desktop layout | Choose whether the image or the collapsible rows appear first. Default setting is text first. On mobile, the image always appears first. |
Section padding | Add 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
Setting | Description |
---|---|
Heading | A heading for the collapsible row. |
Icon | Choose 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 content | Content for the collapsible row. Content can be formatted or include URL links. This feature can be used in conjunction withRow content from page. |
Row content from page | You can insert existing content from another page into a collapsible row. ClickChangeto select or remove a page. This feature can be used in conjunction withRow 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
Setting | Description |
---|---|
Heading | The title of the section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Image ratio | The image ratio for the featured images of the collections:
|
Number of columns on desktop | Number of columns to display on desktop computers. Minimum: 1. Maximum: 5. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Enable "View all" button if list includes more collections than shown | Displays a "View all" button that takes the customers to the full list of collections. |
Number of columns on mobile | Set a specific column layout for mobile devices. Choose between 1 and 2 columns. |
使滑动在移动 | Changes the mobile display from a column to a row, where customers can swipe sideways to see more collection blocks. |
Section padding | Add 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
- From your theme editor, click theCollectionblock that you want to add a collection to.
- ClickSelect collection.
- Click a collection, and then clickSelect.
Contact form
Your contact form sends all submissions to your store's sender email address. You can change the sender email address in theNotificationssettings page of your Shopify admin.
The form has the following fields:
- Name
- Email(required)
- Phone number
- Comment
Section settings
Setting | Description |
---|---|
Heading | The title of the section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Section padding | Add 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
Setting | Description |
---|---|
Custom Liquid | Add app snippets or other custom Liquid code to create advanced customizations. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Section padding | Add 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密码page, where customers can enter their email address to be informed when your store is open. Each email subscription creates acustomer account.
The section comes with three default blocks:
- Heading
- Subheading
- Email form
Section settings
Setting | Description |
---|---|
Background image | The background image for the email signup banner. ClickChangeto replace or remove the image. When the image is removed, the image that comes with the theme is shown. Hide this image by deselecting theShow background imagecheckbox. |
Edit alt text | Click to set image alt text for search engine optimization and to describe the image for customers using screen readers. |
Image overlay opacity | Dims the email signup banner image with an overlay. Use the slider to set the opacity of the overlay. Defaults to 0%. |
Show background image | Check 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 position | Set 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.
|
Show container on desktop | Places your email signup banner image text in a text box over the image for customers shopping from a desktop computer. |
Desktop content alignment | Set 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 aboutcolor schemes.
|
Mobile content alignment | Set the alignment of the image banner text for mobile devices. Choose between right, left, or center (default). |
Show content below on mobile | Content will appear below the email signup banner image on mobile devices. |
Heading block
Setting | Description |
---|---|
Heading | The title for the section. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Subheading block
Setting | Description |
---|---|
Description | The description for the section. |
Text style | Changes 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
Setting | Description |
---|---|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Make section full width | Makes the section the full width of the browser window. |
Heading block
Setting | Description |
---|---|
Heading | The title for the section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Subheading block
Setting | Description |
---|---|
Description | The 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.
Featured collection
You can add a section that displays products in one collection.
Section settings
Setting | Description |
---|---|
Heading | The 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 size | Change the size of the heading text. Choose between small, medium, or large. |
Description | Enter descriptive text for the featured collection. You can format the text to bebold,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 admin | Checking 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 style | 我们e the drop-down menu to choose a style for the description of your featured collection. Options are body (default), subtitle, or upper case. |
Collection | Which collection you want to display products from. ClickChangeto remove or change the collection. |
Maximum products to show | The number of products from the collection to display. Minimum: 2. Maximum: 25. |
Number of columns on desktop | Number of columns to display on desktop computers. Minimum: 1. Maximum: 5. |
Make products full width | Check 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 shown | If the collection has more products than set in theMaximum products to showfield, then this displays a "View all" button that takes the customers to the collections page. |
"View all" style | Choose between a link, a solid button, and an outline button. |
Enable carousel on desktop | Check box to display products in a carousel on screens wider than 989 pixels wide. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Image ratio | The image ratio for the product images:
|
Image shape | Choose one of the following image shapes for your product images:
|
Show second image on hover | When the customer hovers their cursor over the product image, displays the second product image if the product has one. |
Show vendor | Displays the vendors of the products. |
Show product rating | Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such asShopify Product Reviews, andmetafield definitionsforreviews.rating_countandreviews.rating. |
Enable quick add button | The 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 yourproduct 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 mobile | Set a specific column layout for mobile devices. Choose between 1 and 2 columns. |
使滑动在移动 | Changes the mobile display from a column to a row, where customers can swipe sideways to see more products. |
Section padding | Add 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. |
Featured product
You can add a section that features a specific product.
Section settings
Setting | Description |
---|---|
Product | The product that you want to feature in the section. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Show secondary background | Displays the featured product on your secondary background color. |
Desktop media width | Select small, medium, or large media size. The image is automatically optimized for mobile. |
Constrain media to screen height | Selecting this option sets a maximum media height based on the height of the browser window. |
Media fit | SelectOriginalto maintain the media's original aspect ratio orFillto fit the media to its container. |
Desktop media position | Select 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:
|
Hide other variants' media | Select this option to hide the media for other variants after a variant has been selected. |
Enable video looping | Allows the video to be played again. Customers must click to start the replay. |
Section padding | 间隔添加到顶部或底部的product section. Use the range slider to add between 0px and 100px of space to the top or the bottom of the section. |
Section blocks
You can add the following blocks in yourFeatured productsection.
Block | Settings |
---|---|
Text | Enter text for your featured product:
|
Title | Heading size: Choose betweenSmall,Medium, orLarge. |
Price | This block has no customizable settings. |
Variant picker | Choose between pills or a drop-down menu. |
Quantity selector | This block has no customizable settings. |
Buy buttons | Check theShow dynamic checkout buttonsbox to display any dynamic checkout options that you've enabled in yourPaymentssettings. |
Share | Clickable text that allows customers to share the product to their social media. |
Product rating | Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such asShopify Product Reviews, andMetafield definitionsforreviews.rating_countandreviews.rating. |
Custom Liquid | Addcustom Liquid or HTML code. |
Apps | Add anOnline Store 2.0-compatible app. |
Icon with text | This 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. |
SKU | This 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
Setting | Description |
---|---|
First image | The 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 text | Click to set image alt text for search engine optimization and to describe the image for customers using screen readers. |
Second image | The 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 opacity | Adds 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.
|
Desktop content position | Set the position of the desktop image banner. Choose between top, middle, or bottom, and right, left, or center. |
Show container on desktop | Places your banner image text in a text box over the banner image for customers shopping from a desktop computer. |
Desktop content alignment | Set 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 aboutcolor schemes. The color scheme selected is displayed only when theShow text box on desktopoption is selected. |
Animations | Select an animation for your image:
|
Mobile content alignment | Set the alignment of the image banner text for mobile devices. Choose between right, left, or center. |
Stack images on mobile | If two images are added to the section, then displays the images in a column instead of side by side. |
Show container on mobile | Places your banner image text in a text box over the banner image for customers shopping from a mobile device. |
Heading block
Setting | Description |
---|---|
Heading | Large text for the title of the text box. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Text block
Setting | Description |
---|---|
Description | Displays paragraph-style text. |
Text style | Changes the style of text in the image banner. Choose between Body, Subtitle, and Uppercase. |
Button block
Setting | Description |
---|---|
First button label | The text that displays on the first button. |
First button link | The URL that you want the first button to link to. |
我们e outline button style | Adjusts the button styling to be an outline of a button instead of having a solid background. |
Second button label | The text that displays on the second button. |
Second button link | The URL that you want the second button to link to. |
我们e outline button style | Adjusts 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
Setting | Description |
---|---|
Image | ClickSelect imageto choose an image for the section. Click theChangebutton to change or remove the image. |
Edit alt text | Click to set image alt text for search engine optimization and to describe the image for customers using screen readers. |
Image height | Choose the height for the image:
|
Desktop image width | The width for the image:
|
Desktop image placement | Choose whether the image or the text appears first. Image first is default for mobile layouts:
|
Desktop content position | The vertical position of thecontentin the container:
|
Desktop content alignment | The alignment of thetextin the container:
|
Content layout | Allows the image and text boxes to overlap with one another. IfNo overlap被选中时,内容会适应accommodat呢e the text and image.
|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Animations | Select an animation for your image:
|
Mobile layout | Choose the alignment of content for mobile devices:
|
Section padding | Add 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
Setting | Description |
---|---|
Heading | Title text for the section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Text block
Setting | Description |
---|---|
Content | Displays paragraph-style text in the text section. |
Text style | Style for the content text:
|
Button block
Setting | Description |
---|---|
Button label | The text that displays on the button. |
Button link | The URL that you want the button to link to. |
Caption block
Setting | Description |
---|---|
Text | Add a tagline or caption to your image. Text will appear at the bottom of your image with text section. |
Text style | Style of the content text:
|
Text size | Size of the content text:
|
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
Setting | Description |
---|---|
Heading | The title of the section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Image width | The width of images added to the columns.
|
Image ratio | The image ratio for the image:
|
Number of columns on desktop | 我们e 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:
|
Secondary background | ChooseNoneto hide the secondary background, orShow as column backgroundto change the column container colors. |
Button label | The text that displays on the button. |
Button link | The URL that you want the button to link to. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Number of columns on mobile | Set a specific column layout for mobile devices. Choose between 1 and 2 columns. |
使滑动在移动 | Changes the mobile display from a column to a row, where customers can swipe sideways to see more collection blocks. |
Section padding | Add 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
你可以有最多12列在一个切面n. 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使滑动在移动is enabled.
Setting | Description |
---|---|
Image | The image that you want to display. |
Heading | The title of the column. Use the buttons to make the text bold or italicized, or to add a link. |
Description | The 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. |
Link | URL 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 displaymetaobjectscontent through dynamic sources. To display metaobjects entries, you need tobuild a metaobject,create entries, and ensure the metaobject hasstorefront accessbefore you can use them in multirow sections.
Section settings
Setting | Description |
---|---|
Image height | Choose the height for the image:
|
Desktop image width | The width for the image:
|
Heading size | Change the size of the heading text. Choose betweensmall,medium, orlarge. |
Text style | Changes the style of text. Choose betweenBody(default) andSubtitle. |
Button style | Choose between a solid button and an outline button. |
Desktop content position | The vertical position of thecontentin the container:
|
Desktop content alignment | The alignment of thetextin the container:
|
Desktop image placement | Choose the position of the images. Placement is automatically optimized for mobile:
|
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Container color scheme | A set of colors that you can apply to the container. Learn more aboutcolor schemes. |
Mobile layout | Choose the alignment of content for mobile devices:
|
Section padding | Add 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
Setting | Description |
---|---|
Image | ClickSelect imageto choose an image for the row. Click theChangebutton to change or remove the image. Click the source button to link to dynamic sources. |
Edit alt text | Click to set image alt text for search engine optimization and to describe the image for customers using screen readers. |
Caption | Add a tagline or caption to your image. |
Heading | Title text for the row. Use the buttons to make the text bold or italicized, or to add a link. |
Text | Displays paragraph-style text in the row. |
Button label | The text that displays on the button. |
Button link | The 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
Setting | Description |
---|---|
Page | The page from your online store that you want to display. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Section padding | Add 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
Setting | Description |
---|---|
Desktop content position | 选择富文本容器的位置。我们e the drop-down menu to select left, center (default), or right. Content is automatically optimized for mobile devices. |
Content alignment | This 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 scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Make section full width | Sections are full width by default. |
Section padding | Add 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. |
Heading block
You can have up to 3 heading blocks in your rich text section.
Setting | Description |
---|---|
Heading | The 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 size | Change the size of the heading text. Choose between small, medium, large, or extra large. |
Text block
TheTextblock 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.
Setting | Description |
---|---|
Description | Paragraph-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.
Setting | Description |
---|---|
Text | Add a brief tagline to your rich text section. |
Text style | 我们e the drop-down menu to select a text style between Subtitle (default) and Uppercase. |
Text size | 我们e 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.
Setting | Description |
---|---|
Button label | The text that displays on the button. |
Button link | The URL that you want the button to link to. |
我们e outline button style | Adjusts 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
Setting | Description |
---|---|
Layout | Choose betweenFull width(default) orGrid. 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:
|
Pagination style | The style of the slideshow navigation that appears below the images.
|
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 timer | 我们e the bar to set the auto-rotate time of the slideshow. Minimum: 3 seconds, maximum: 9 seconds. |
Animations | Select an animation for your image:
|
Mobile layout | Check the box to show content below images on mobile. |
Accessibility | Add a description for your slideshow for visually impaired customers. |
Image slide settings
Setting | Description |
---|---|
Image | Choose a static or dynamic image for your slideshow. ClickSelect Imageto view your media library, or click the source button to connect a dynamic source. After an image has been selected, clicking theChangebutton 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. |
Subheading | Optional 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 label | Enter text for a button, or leave blank to hide the button entirely. |
Button link | The URL that you want the button to link to. Click the source button to add a dynamic source as a URL. |
我们e outline button style | Click the checkbox to toggle between a solid or outlined button. |
Desktop content position | The 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 desktop | Check the box to show the content box. |
Desktop content alignment | Aligns the text in the container. Choose between left, center (default), or right. |
Image overlay opacity | 使用滑块来调整图像的不透明度overlay. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. This setting requires the container to be displayed in order to affect the slideshow image. |
Mobile layout | Choose 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
Setting | Description |
---|---|
Heading | The title of the section. Use the buttons to make the text bold or italicized, or to add a link. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Play video on loop | When checked, the video will start over after ending. |
Video | Add 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. |
URL | The 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 image | The image that displays before a customer plays the video. |
Video alt text | The alt text for the video. Describes the context and purpose of the video for customers using screen readers. |
Make section full width | 删除默认的填充,使部分the full width of the page. |
Color scheme | A set of colors that you can apply to this section. Learn more aboutcolor schemes. |
Section padding | Add 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. |