Contents
Include sections can add and remove to the pages
Last updated
Include sections can add and remove to the pages
Last updated
This guide describes setting up a Blog posts section to display a selection of blog posts on a store page. Use blog posts to write about new products, collections, promotions, or other news. Refer to Shopify help Blogs.
The blog posts section can be added to any page, except the Checkout and Giftcard pages. To add a blog posts section to the current page, select Add section > Blog posts. Refer to Shopify help - Add a section.
To set up a blog posts section:
Go to Customize theme. At the top of the page, use the dropdown to select the Homepage template that contains a blog post section.
From the side menu, select Blog posts.
Select a section setting described in the following table:
Heading
In the Heading box, enter text to display as a title inside the section, you can select the font size from the Heading size option.
Heading size
Change the size of the heading text. Choose between small, medium, or large.
Blog
Use the Blog menu options to set up a blog to display inside the section.
To add a blog, choose Select blog, enter the name of a blog into the Search box, and/ or select a blog from the list. Then, choose Select.
To replace a blog, choose Change > Change blog. Enter the name of a blog into the Search box and/ or select a blog from the list. Then, choose Select.
To remove a blog, select Change > Remove blog.
Number of columns on desktop
The Number of columns to display on desktop computers. Minimum: 1. Maximum: 4.
Number of blog posts to show
The number of blog posts that you want to display in the section. Maximum: 4 posts.
Color scheme
The background color of the blog section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Show featured image
Select Show featured checkbox to show/hide the image for posts inside the section. 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.
View all button
If 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.
Number of columns on mobile
The Number of columns to display on Mobile. Minimum: 1. Maximum: 2.
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.
Remve section
Select the Remove section to delete the section from the current page.
This guide describes setting up a slideshow section. Use the section to display a series of shapes on a store page, with embedded media
To set up a Slideshow section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Slideshow section.
From the side menu, select Slideshow.
Select a section setting described in the following table.
You will see some Global options for the slideshow:
Layout
Choose 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 (default) - all images will be the same height as the first image in the carousel.
Small
Medium
Large
Width/height: 16/9
Pagination style
The style of the slideshow navigation that appears below the images.
Dots
Counter (default)
Numbers
Auto rotate - styles
Check this box to automatically rotate through the images in the slideshow. If this box is not checked, then the slideshow displays a static image until the customer manually advances the slideshow.
Mobile layout
Check the box to show the content below images on mobile.
Accessibility
Add a description for your slideshow for visually impaired customers.
Click Add Side to insert more image slides (Block). A default Slideshow section contains 2 image blocks. To configure a block inside the section:
Images
Choose 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. Once 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.
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.
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.
Link style
Click the checkbox to toggle between a solid or outlined button.
Desktop content position
Select the position that you want to show all the content (Heading, Sub heading, and Button). The position is automatically optimized for mobile.
Show container on desktop
Check the box to show the content box. A background overlays the content.
Desktop content alignment
Aligns the text in the container. Choose between left, center (default), or right.
Image overlay opacity
Use the slider to adjust the opacity of the image overlay.
Color scheme
Change the background color of the content box. Choose between Accent 1, Accent 2, Background 1 (default), Background 2, or Inverse. This setting requires the container to be displayed in order to affect the slideshow image.
Mobile setting
Choose how the content will appear on a mobile device. Choose between left, center (default), or right.
This guide describes setting up the Banner List section. Use the section to display 2 columns, when you add more columns it will show in the next row.
To set up the Banner List section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains the Banner List section.
From the side menu, select Banner List.
Select a section setting described in the following table.
You will see some Global options for the Banner list:
Heading
The title for the section.
Heading size
Choose between a small, medium (default), or large heading.
Layout
Choose 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.
Image Ratio
The image ratio for the product images:
Portrait - Crops the images to use a 2:3 ratio.
Square - Crops the images to use a 1:1 ratio.
Width/Height: 3/4
Width/Height: 4/3
Width/Height: 16/9
Number of columns on desktop
Adjust the slider Number of columns to set the total number of columns to display inside the section. The minimum number is 1, and the maximum is 6.
Mobile Layout
The Number of columns on mobile: Adjust the Dropdown Number of columns to set the total number of columns to display inside the section. The minimum number is 1, and the maximum is 2
Enable swipe on mobile: 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.
A default Banner List section contains 2 Columns (Image Block). To configure a block inside the section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Banner List section (Home Page).
From the side menu, expand the Banner List section menu.
To configure an existing block, select the block from the side menu.
To add a new block, select Add Column, choose a Column to add, and then select the block(Column) you added.
Images
The image to display in the block/Column.
Heading
Optional heading text for the image. Text is added to each image individually.
Link label
The text of a link is 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.
Link style
Adjusts the Link styling to be an outline of a link instead of having a solid background.
Desktop content position
Set the position of the content on the desktop. Choose between the top, middle, or bottom, and right, left, or center.
Desktop content alignment
Set the alignment of the image banner text for the Desktop. Choose between the right, left, or center.
This guide describes setting up a Multicolumn section. The section displays a series of content, a Heading, and a Button.
To set up a Multicolumn section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Mutilcolumn section (Home page).
From the side menu, select Multicolumn.
Select a section setting described in the following table.
Heading
The title of the section
Sub Heading
The description for the section. A small content will show below the Heading.
Heading size
Change the size of the heading text. Choose between small, medium, or large.
Module Class Suffix
Extra class to custom style for section.
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 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.
Number of columns on desktop
Adjust the slider Number of columns to set the total number of columns to display inside the section. The minimum number is 1, and the 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.
Button Label
The text that displays on the button.
Button link
The URL that you want the button to link to.
Color scheme
The background color of the Multicolumn section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Secondary background
Choose None to hide the secondary background, or Show as column background to change the column container colors.
Mobile layout
Number of column: Set a specific column layout for mobile devices. Choose between 1 and 2 columns.
Enable swipe on mobile: 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.
A default Multicolumn section contains 2 Columns. 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 the desktop. If you have four or more column blocks, then they display in a layout of two columns. On mobile, the column blocks display in a single column, unless Enable swipe on mobile is enabled.
To configure a Column (block) inside the section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Multicolumn section (Home Page).
From the side menu, expand the Multicolumn section menu.
To configure an existing block, select the block from the side menu.
To add a new Column(Block), select Add Column, choose a Column to add, and then select the Column(Block) you added.
Images
The image that you want to display.
Heading
The title of the column.
Description
The paragraph text in the column.
Icon
Add an icon beside the Heading
Icon Position
Change Icon position with left, right, and center.
Link label
The text of a link is 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.
This guide describes setting up the Featured collection section. Use the section to advertise and promote a selection of products from a collection on a store page.
To set up a featured collection section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a featured collection section. For example, select the Home page template.
From the side menu, select Featured collection.
Select a section setting described in the following table.
Heading
The title of the section. 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 be bold, italics, or to include a link. Click the dynamic source button to insert a dynamic source for the featured collection description. NOTE: Only show when enabling the "Show Card collection" option.
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. NOTE: Only show when enabling the "Show Card collection" option.
Description style
Use the drop-down menu to choose a style for the description of your featured collection. Options are body (default), subtitle, or upper case.
Collection
Use the Collection menu options to set up a collection to display inside the section.
To add a collection, choose Select collection, enter the name of a collection into the Search box and/ or select a collection from the list. Then, choose Select.
To replace a collection, choose Change > Change collection. Enter the name of a collection into the Search box and/ or select a collection from the list. Then, choose Select.
To remove a collection, select Change > Remove collection.
Show Card collection
Add a Collection image with a description and link to the Collection, product, or pages.
Maximum products to show
Adjust the slider Number of products to set the total number of products to display inside the section. The minimum number is 2, and the maximum is 12.
Number of columns on desktop
Number of columns to display on desktop computers. Minimum: 1. Maximum: 5.
Make products full width
Check the box to display products in the full width of the window, regardless of the page width setting.
Enable "View all"
If 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 style
Choose between a link, a solid button, and an outline button.
Enable carousel on desktop
Check the box to display products in a carousel on screens wider than 989 pixels wide.
Color scheme
The background color of the Featured collection section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Desktop layout
NOTE: Only show when enabling the "Show Card collection" option. Change the position of the products and Card collection
Left image block (default) - The first block (Card collection) in the section displayed on the left.
Right image block - The last block (Card collection) in the section displays on the right and is larger than any other block.
PRODUCT CARD
Image ratio:
The 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.
Show the second image on hover: When the customer hovers their cursor over the product image, display the second product image if the product has one.
Show vendor: Displays the vendors of the products.
PRODUCT CARD - Show product rating
PRODUCT CARD - Show product description
Display product description
PRODUCT CARD - Enable quick add button
MOBILE LAYOUT
The Number of columns on mobile: Adjust the Dropdown Number of columns to set the total number of columns to display inside the section. The minimum number is 1, and the maximum is 2
Enable swipe on mobile: 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.
This guide describes setting up the Featured collection List section. Use the section to advertise and promote a selection of products from a collection on a store page.
To set up a Feature Collection list section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Feature Collection list section (Home page).
From the side menu, select the Feature Collection list.
Select a section setting described in the following table.
Heading size
Change the size of the heading text. Choose between small, medium, or large.
Number of columns on desktop
Adjust the slider Number of columns to set the total number of columns to display inside the section. The minimum number is 1, and the maximum is 5.
Make products full width
Makes the section the full width of the browser window.
Color scheme
The background color of the Featured collection list section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
PRODUCT CARD - Image Ratio
The 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.
PRODUCT CARD - 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.
PRODUCT CARD - Show Vendor
Displays the vendors of the products.
PRODUCT CARD - Show product rating
PRODUCT CARD - Enable quick add button
MOBILE LAYOUT - Number of columns on mobile
Set a specific column layout for mobile devices. Choose between 1 and 2 columns.
MOBILE LAYOUT - Enable swipe on mobile
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.
A default Feature collection list section is empty. To configure a Column (block) inside the section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Multicolumn section (Home Page).
From the side menu, expand the Multicolumn section menu.
To configure an existing block, select the block from the side menu.
To add a new Column(Block), select Add Column, choose a Column to add, and then select the Column(Block) you added.
Select a section setting described in the following table:
Collection
Which collection you want to display products from. Click Change to remove or change the collection.
Maximum products to show
The number of products from the collection to display. Minimum: 2. Maximum: 12.
Enable "View all"
If 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.
For Some sections of Shopify can refer here: Theme Section
To create a new blog, select Create blog to open the New blog page in Shopify admin. Refer to
To create a new collection, select Create collection to open the Create collection page in Shopify admin. Refer to
Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as , and for reviews.rating_count and reviews.rating.
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 your . 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.
Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★. Also requires a product review app such as , and for reviews.rating_count and reviews.rating.
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 the 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 . If the "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.
