Contents

Include sections can add and remove to the pages

1. 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:

1. Go to Customize theme. At the top of the page, use the dropdown to select the Homepage template that contains a blog post section.

2. From the side menu, select Blog posts.

3. 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.
Title Style	You can use the 3 styles for Title.
Description	Add an sub title for the blog section.
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 create a new blog, select Create blog to open the New blog page in Shopify admin. Refer to Shopify help 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.

2. 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:

1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Slideshow section.

2. From the side menu, select Slideshow.

3. Select a section setting described in the following table.

4. 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: 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.

2.1. 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.

3. JA Slider

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:

1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Slideshow section.

2. From the side menu, select Ja Slider.

3. Select a section setting described in the following table.

4. You will see some Global options for the slider:

Options	Description
Layout	Full Width Grid Grid Gapless
Slide Height	Square Small Medium Large
Change slides every	Choose between 3s to 9s.
Mobile layout	Show content below images on mobile
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.
Border	Add the border arround the section

4. Banner

This guide describes setting up the Banner 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 section:

1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains the Banner section.

2. From the side menu, select Banner.

3. Select a section setting described in the following table.

4. 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: 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.
Border	Add the boder around images.

4.1. 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:

1. 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).

2. From the side menu, expand the Banner List section menu.

3. 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.

5. 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:

1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Mutilcolumn section (Home page).

2. From the side menu, select Multicolumn.

3. 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. 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.

5.1. 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:

1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Multicolumn section (Home Page).

2. From the side menu, expand the Multicolumn section menu.

3. 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.

6. 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:

1. 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.

2. From the side menu, select Featured collection.

3. 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.
Title Styles	01: Show on the left-hand side with the border on top and bottom 02: Center Title 03: Show Multiple Titles
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 create a new collection, select Create collection to open the Create collection page in Shopify admin. Refer to Shopify help - Collection 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	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 reviews.rating_count and reviews.rating.
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	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.

7. 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:

1. 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).

2. From the side menu, select the Feature Collection list.

3. 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 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	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 reviews.rating_count and reviews.rating.
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.

7.1. Configure Collection within a Feature collection list

A default Feature collection list section is empty. To configure a Column (block) inside the section:

1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Multicolumn section (Home Page).

2. From the side menu, expand the Multicolumn section menu.

3. 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.

4. 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.

8. Image Banner

This guide describes setting up the Image Banner section. Use the section to advertise and promote a selection of products from a collection on a store page.

Setup Image Banner

To set up an Image Banner section:

1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains an Image Banner section (Home page).

2. From the side menu, select the Image Banner.

3. Select a section setting described in the following table.

Options	Description
Module Class Suffix	Add a global class for this block
First Image	Show only 1 image
Second image	Show image as 2 column if you upload first and second images
Image overlay opacity	Choose between 0% to 100%
Banner height	Small Medium Large
Adapt section height to first image size	Overwrites image banner height setting when checked.
Desktop content position	Set the position of the content on the desktop. Choose between the top, middle, or bottom, and right, left, or center.
Show container on desktop	Check the box to show the content box. A background overlays the content.
Desktop content alignment	Choose between Left, right and Center
Color scheme	The background color of the Featured collection list section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Mobile content alignment	Choose between Left, right and Center
Show container on mobile
Stack images on mobile
Border	Add the border to the section

For Some sections of Shopify can refer here: Theme Section