Contents
Include sections can add and remove to the pages
Blog posts
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:
Options | Description |
---|---|
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.
|
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. |
Slideshow
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:
Options | Description |
---|---|
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:
|
Pagination style | The style of the slideshow navigation that appears below the images.
|
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. |
Configure a Slide within a Slideshow section
Click Add Side to insert more image slides (Block). A default Slideshow section contains 2 image blocks. To configure a block inside the section:
Options | Description |
---|---|
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. |
Banner List
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:
Options | Description |
---|---|
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:
|
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 |
Mobile Layout |
|
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. |
Configure a column within the banner list 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.
Options | Description |
---|---|
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. |
Multicolumn
This guide describes setting up a Multicolumn section. The section displays a series of content, a Heading, and a Button.
Setup Multicolumn
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.
Options | Description |
---|---|
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.
|
Image Ratio | The image ratio for the product images:
|
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 |
Column alignment | The alignment of the images and text within the columns:
|
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 |
|
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. |
Configure a column within a 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.
Options | Description |
---|---|
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. |
Featured Collection
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.
Set up a featured collection section
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.
Options | Description |
---|---|
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.
|
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 |
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
|
PRODUCT CARD |
|
PRODUCT CARD - 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 as Shopify Product Reviews, and Meta field definitions for |
PRODUCT CARD - Show product description | Display product description |
PRODUCT CARD - 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 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. |
MOBILE LAYOUT |
|
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 Collection List
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.
Setup Feature Collection list
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.
Options | Description |
---|---|
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 |
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:
|
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 | Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★. Also requires a product review app such as Shopify Product Reviews, and Meta field definitions for |
PRODUCT CARD - 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 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 product page. 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. |
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. |
Configure Collection within a Feature collection list
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:
Options | Description |
---|---|
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
Last updated