# Contents

### 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](https://help.shopify.com/manual/online-store/blogs).

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FIZExvyvyZkVrCM9nLUDy%2FScreenshot_22.png?alt=media&#x26;token=32e4e5a6-2d18-4edc-b0eb-fc544273e499" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
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](https://help.shopify.com/manual/online-store/themes/os20/theme-structure/sections#add-a-section).
{% endhint %}

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:

<table><thead><tr><th width="239">Options</th><th width="506">Description</th></tr></thead><tbody><tr><td>Heading</td><td>In the <strong>Heading</strong> box, enter text to display as a title inside the section, you can select the font size from the Heading size option. </td></tr><tr><td>Heading size</td><td>Change the size of the heading text. Choose between small, medium, or large.</td></tr><tr><td>Title Style</td><td>You can use the 3 styles for Title.</td></tr><tr><td>Description</td><td>Add an sub title for the blog section.</td></tr><tr><td>Blog</td><td><p>Use the <strong>Blog</strong> menu options to set up a blog to display inside the section. </p><ul><li>To add a blog, choose <strong>Select blog</strong>, enter the name of a blog into the <strong>Search</strong> box, and/ or select a blog from the list. Then, choose <strong>Select</strong>.</li><li>To create a new blog, select <strong>Create blog</strong> to open the <strong>New blog</strong> page in Shopify admin. Refer to <a href="https://help.shopify.com/manual/online-store/blogs">Shopify help</a></li><li>To replace a blog, choose <strong>Change</strong> > <strong>Change blog</strong>. Enter the name of a blog into the <strong>Search</strong> box and/ or select a blog from the list. Then, choose <strong>Select</strong>.</li><li>To remove a blog, select <strong>Change</strong> > <strong>Remove blog</strong>.</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>The Number of columns to display on desktop computers. Minimum: 1. Maximum: 4.</td></tr><tr><td>Number of blog posts to show</td><td>The number of blog posts that you want to display in the section. Maximum: 4 posts.</td></tr><tr><td>Color scheme</td><td>The background color of the blog section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.</td></tr><tr><td>Show featured image</td><td>Select <strong>Show featured</strong> checkbox to show/hide the image for posts inside the section.<br>Suggested image aspect ratio: 3:2.</td></tr><tr><td>Show date</td><td>Displays the date the blog post was created.</td></tr><tr><td>Show author</td><td>Displays the author for the blog post.</td></tr><tr><td>View all button</td><td>If the blog has more blog posts than set in the <strong>Blog post</strong> field, then this displays a "View all" button that takes the customers to the blog's page.</td></tr><tr><td>Number of columns on mobile</td><td>The Number of columns to display on Mobile. Minimum: 1. Maximum: 2.</td></tr><tr><td>Section padding</td><td>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.</td></tr><tr><td>Remve section</td><td>Select the <strong>Remove section</strong> to delete the section from the current page.</td></tr></tbody></table>

### 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&#x20;

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FZF3LeSjNXI0R7ckuPsUq%2FScreenshot_23.png?alt=media&#x26;token=cdb83cfa-a672-40fc-9cf0-df378c4b7ba8" alt=""><figcaption></figcaption></figure>

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:&#x20;

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td>Choose between <em>Full width</em> (default) or <em>Grid</em>. Full width displays the slideshow the full width of the section, whereas Grid displays the slideshow with padding on either side.</td></tr><tr><td>Slide height</td><td><p>The height of the slideshow:</p><ul><li>Adapt to first image (default) - all images will be the same height as the first image in the carousel.</li><li>Small</li><li>Medium</li><li>Large</li><li>Width/height: 16/9</li></ul></td></tr><tr><td>Pagination style</td><td><p>The style of the slideshow navigation that appears below the images.</p><ul><li>Dots</li><li>Counter (default)</li><li>Numbers</li></ul></td></tr><tr><td>Auto rotate - styles</td><td>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.</td></tr><tr><td>Mobile layout </td><td>Check the box to show the content below images on mobile.</td></tr><tr><td>Accessibility</td><td>Add a description for your slideshow for visually impaired customers.</td></tr></tbody></table>

#### 2.1. Configure a Slide within a Slideshow section <a href="#configure-a-block-within-a-collage-section" id="configure-a-block-within-a-collage-section"></a>

Click **Add Side** to insert more image slides (Block). A default Slideshow section contains 2 image blocks. To configure a block inside the section:&#x20;

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FyUqAy4Pe3WpAIyBYG6No%2Fslideshow-block.png?alt=media&#x26;token=8fa0c991-e8a7-4ed7-a10a-732b7f17847d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Images</td><td>Choose a static or dynamic image for your slideshow. Click <strong>Select Image</strong> to view your media library, or click the source button to connect a dynamic source. Once an image has been selected, clicking the <strong>Change</strong> button allows you to remove, change, or delete the image.</td></tr><tr><td>Edit Alt text</td><td>Describe the slideshow image and provide context for customers using screen readers.</td></tr><tr><td>Heading</td><td>Optional <strong>heading</strong> text for the image. Text is added to each image individually.</td></tr><tr><td>Heading size</td><td>Choose between a small, medium (default), or large heading.</td></tr><tr><td>Subheading</td><td>Optional subheading text for the image. Text is added to each image individually.</td></tr><tr><td>Button Label</td><td>Enter text for a button, or leave blank to hide the button entirely.</td></tr><tr><td>Button link</td><td>The URL that you want the button to link to. Click the source button to add a dynamic source as a URL.</td></tr><tr><td>Link style</td><td>Click the checkbox to toggle between a solid or outlined button.</td></tr><tr><td>Desktop content position</td><td>Select the position that you want to show all the content (Heading, Sub heading, and Button). The position is automatically optimized for mobile.</td></tr><tr><td>Show container on desktop</td><td>Check the box to show the content box. A background overlays the content.</td></tr><tr><td>Desktop content alignment</td><td>Aligns the text in the container. Choose between left, center (default), or right.</td></tr><tr><td>Image overlay opacity</td><td>Use the slider to adjust the opacity of the image overlay.</td></tr><tr><td>Color scheme</td><td>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.</td></tr><tr><td>Mobile setting</td><td>Choose how the content will appear on a mobile device. Choose between left, center (default), or right.</td></tr></tbody></table>

### 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&#x20;

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FJvCtX0dPUJP7789c0ztP%2FScreenshot_24.png?alt=media&#x26;token=f5eca5af-7e83-4c23-bb16-b2753634b6ba" alt=""><figcaption></figcaption></figure>

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:&#x20;

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><ul><li>Full Width</li><li>Grid</li><li>Grid Gapless</li></ul></td></tr><tr><td>Slide Height</td><td><ul><li>Square</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Change slides every</td><td>Choose between 3s to 9s.</td></tr><tr><td>Mobile layout</td><td>Show content below images on mobile</td></tr><tr><td>Padding </td><td>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.</td></tr><tr><td>Border</td><td>Add the border arround the section</td></tr></tbody></table>

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

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FZ6UToo7Hh04QzwLd7Gdk%2FScreenshot_25.png?alt=media&#x26;token=95c85ffe-4ffd-4ae6-b0a4-d6c9fa067a30" alt=""><figcaption></figcaption></figure>

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:&#x20;

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>The title for the section.</td></tr><tr><td>Heading size</td><td>Choose between a small, medium (default), or large heading.</td></tr><tr><td>Layout</td><td>Choose between <em>Full width</em> (default) or <em>Grid</em>. Full width displays the slideshow the full width of the section, whereas Grid displays the slideshow with padding on either side.</td></tr><tr><td>Image Ratio</td><td><p> The image ratio for the product images:</p><ul><li><strong>Portrait</strong> - Crops the images to use a 2:3 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio.</li><li>Width/Height: 3/4</li><li>Width/Height: 4/3</li><li>Width/Height: 16/9</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>Adjust the slider <strong>Number of columns</strong> to set the total number of columns to display inside the section. The minimum number is <code>1</code>, and the maximum is <code>6</code>.</td></tr><tr><td>Mobile Layout</td><td><ul><li>The Number of columns on mobile: Adjust the Dropdown <strong>Number of columns</strong> to set the total number of columns to display inside the section. The minimum number is <code>1,</code> and the maximum is <code>2</code></li><li>Enable swipe on mobile: Changes the mobile display from a column to a row, where customers can swipe sideways to see more products.</li></ul></td></tr><tr><td>Section padding</td><td>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.</td></tr><tr><td>Border</td><td>Add the boder around images.</td></tr></tbody></table>

#### 4.1. Configure a column within the banner list section <a href="#configure-a-block-within-a-collage-section" id="configure-a-block-within-a-collage-section"></a>

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.

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FarzCobUkAEYKORpKQJmH%2FScreenshot_26.png?alt=media&#x26;token=52d87c03-6737-40d8-a870-202c88b45bdf" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Images</td><td>The image to display in the block/Column.</td></tr><tr><td>Heading</td><td>Optional <strong>heading</strong> text for the image. Text is added to each image individually.</td></tr><tr><td>Link label</td><td>The text of a link is added below the column block. Leave blank if you don't have a link added.</td></tr><tr><td>Link</td><td>URL for the link. Leave empty for no link.</td></tr><tr><td>Link style</td><td>Adjusts the Link styling to be an outline of a link instead of having a solid background.</td></tr><tr><td>Desktop content position</td><td>Set the position of the content on the desktop. Choose between the top, middle, or bottom, and right, left, or center.</td></tr><tr><td>Desktop content alignment</td><td>Set the alignment of the image banner text for the Desktop. Choose between the right, left, or center.</td></tr></tbody></table>

### 5. Multicolumn

This guide describes setting up a **Multicolumn** section. The section displays a series of content, a Heading, and a Button.

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2Fa6oxf0oWVRj2H2dOLDgi%2FScreenshot_27.png?alt=media&#x26;token=aed1fcc6-8442-424c-81f5-c80014d30066" alt=""><figcaption></figcaption></figure>

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

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>The title of the section</td></tr><tr><td>Sub Heading</td><td>The description for the section. A small content will show below the Heading.</td></tr><tr><td>Heading size</td><td>Change the size of the heading text. Choose between small, medium, or large.</td></tr><tr><td>Module Class Suffix</td><td>Extra class to custom style for section.</td></tr><tr><td>Image width</td><td><p>The width of images added to the columns.</p><ul><li><strong>Full width of column</strong> (default) - The width of the image is the full size of the column.</li><li><strong>Half width of column</strong> - The width of the image is half the size of the column.</li><li><strong>One-third width of column</strong> - The width of the image is a third of the size of the column.</li></ul></td></tr><tr><td>Image Ratio</td><td><p>The image ratio for the product images:</p><ul><li><strong>Adapt to image</strong> (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 2:3 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio.</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>Adjust the slider <strong>Number of columns</strong> to set the total number of columns to display inside the section. The minimum number is <code>1</code>, and the maximum is <code>6</code>.</td></tr><tr><td>Column alignment</td><td><p>The alignment of the images and text within the columns:</p><ul><li><strong>Left (default)</strong> - Aligns the images and text to the left.</li><li><strong>Center</strong> - Aligns the images and text in the center.</li></ul></td></tr><tr><td>Button Label</td><td>The text that displays on the button.</td></tr><tr><td>Button link</td><td>The URL that you want the button to link to.</td></tr><tr><td>Color scheme</td><td>The background color of the <strong>Multicolumn</strong> section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.</td></tr><tr><td>Secondary background</td><td>Choose <strong>None</strong> to hide the secondary background, or <strong>Show as column background</strong> to change the column container colors.</td></tr><tr><td>Mobile layout</td><td><ul><li>Number of column: Set a specific column layout for mobile devices. Choose between 1 and 2 columns.</li><li>Enable swipe on mobile: Changes the mobile display from a column to a row, where customers can swipe sideways to see more collection blocks.</li></ul></td></tr><tr><td>Section padding</td><td>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.</td></tr></tbody></table>

#### 5.1. Configure a column within a Multicolumn section <a href="#configure-a-block-within-a-collage-section" id="configure-a-block-within-a-collage-section"></a>

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.

&#x20;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.

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2F9BkPex8nblSfDXhNsakY%2FMulticolumn-block.png?alt=media&#x26;token=360d209d-2b35-4a2c-8562-0f5c0337832e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Images</td><td>The image that you want to display.</td></tr><tr><td>Heading</td><td>The title of the column.</td></tr><tr><td>Description</td><td>The paragraph text in the column.</td></tr><tr><td>Icon</td><td>Add an icon beside the Heading</td></tr><tr><td>Icon Position</td><td>Change Icon position with left, right, and center. </td></tr><tr><td>Link label</td><td>The text of a link is added below the column block. Leave blank if you don't have a link added.</td></tr><tr><td>Link</td><td>URL for the link. Leave empty for no link.</td></tr></tbody></table>

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

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FTZIRXmOV5KTG2fJjnfbd%2FScreenshot_28.png?alt=media&#x26;token=1e381013-c8b7-49b7-bf4d-e308c4c9bcb3" alt=""><figcaption></figcaption></figure>

#### Set up a featured collection section <a href="#set-up-a-featured-collection-section" id="set-up-a-featured-collection-section"></a>

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.

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FbSXZVHP9UpVWf9bjRctf%2FGroup%209%20(1).png?alt=media&#x26;token=29a8a651-3c63-47ac-95f1-3cfa8caed598" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="261">Options</th><th width="479">Description</th></tr></thead><tbody><tr><td>Heading</td><td>The title of the section. Click the dynamic source button to insert a dynamic source as the title of the section.</td></tr><tr><td>Heading size</td><td>Change the size of the heading text. Choose between small, medium, or large.</td></tr><tr><td>Title Styles</td><td><ul><li>01: Show on the left-hand side with the border on top and bottom</li><li>02: Center Title</li><li>03: Show Multiple Titles</li></ul></td></tr><tr><td>Description</td><td>Enter descriptive text for the featured collection. You can format the text to be <strong>bold</strong>, <em>italics</em>, or to include a link. Click the dynamic source button to insert a dynamic source for the featured collection description.<br><strong>NOTE</strong>: Only show when enabling the "<em><strong>Show Card collection</strong></em>" option.</td></tr><tr><td>Show collection description from the admin</td><td>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.<br><strong>NOTE</strong>: Only show when enabling the "<em><strong>Show Card collection</strong></em>" option.</td></tr><tr><td>Description style</td><td>Use the drop-down menu to choose a style for the description of your featured collection. Options are body (default), subtitle, or upper case.</td></tr><tr><td>Collection</td><td><p>Use the <strong>Collection</strong> menu options to set up a collection to display inside the section.</p><ul><li>To add a collection, choose <strong>Select collection</strong>, enter the name of a collection into the <strong>Search</strong> box and/ or select a collection from the list. Then, choose <strong>Select</strong>.</li><li>To create a new collection, select <strong>Create collection</strong> to open the <strong>Create collection</strong> page in Shopify admin. Refer to <a href="https://help.shopify.com/manual/products/collections">Shopify help - Collection</a></li><li>To replace a collection, choose <strong>Change</strong> > <strong>Change collection</strong>. Enter the name of a collection into the <strong>Search</strong> box and/ or select a collection from the list. Then, choose <strong>Select</strong>.</li><li>To remove a collection, select <strong>Change</strong> > <strong>Remove collection</strong>.</li></ul><p></p></td></tr><tr><td>Show Card collection</td><td>Add a Collection image with a description and link to the Collection, product, or pages. </td></tr><tr><td>Maximum products to show</td><td>Adjust the slider <strong>Number of products</strong> to set the total number of products to display inside the section. The minimum number is <code>2</code>, and the maximum is <code>12.</code></td></tr><tr><td>Number of columns on desktop</td><td>Number of columns to display on desktop computers. Minimum: 1. Maximum: 5.</td></tr><tr><td>Make products full width</td><td>Check the box to display products in the full width of the window, regardless of the page width setting.</td></tr><tr><td>Enable "View all" </td><td>If the collection has more products than set in the <strong>Maximum products to show</strong> field, then this displays a "View all" button that takes the customers to the collections page.</td></tr><tr><td>View all style</td><td>Choose between a link, a solid button, and an outline button.</td></tr><tr><td>Enable carousel on desktop</td><td>Check the box to display products in a carousel on screens wider than 989 pixels wide.</td></tr><tr><td>Color scheme</td><td>The background color of the <strong>Featured collection</strong> section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.</td></tr><tr><td>Desktop layout</td><td><p><strong>NOTE</strong>: Only show when enabling the "<em><strong>Show Card collection</strong></em>" option.<br>Change the position of the products and <strong>Card collection</strong></p><ul><li><strong>Left image block (default)</strong> - The first block (<strong>Card collection</strong>) in the section displayed on the left.</li><li><strong>Right image block</strong> - The last block (<strong>Card collection</strong>) in the section displays on the right and is larger than any other block.</li></ul></td></tr><tr><td>PRODUCT CARD</td><td><ul><li><p><strong>Image ratio</strong>: </p><p>The image ratio for the product images:</p><ul><li><strong>Adapt to image</strong> (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 2:3 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio.<br></li></ul></li><li><strong>Show the second image on hover</strong>: When the customer hovers their cursor over the product image, display the second product image if the product has one.</li><li><strong>Show vendor</strong>: Displays the vendors of the products.</li></ul></td></tr><tr><td>PRODUCT CARD - Show product rating</td><td>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 <a href="https://help.shopify.com/en/manual/products/product-reviews">Shopify Product Reviews</a>, and <a href="https://help.shopify.com/en/manual/metafields/metafield-definitions">Meta field definitions</a> for <code>reviews.rating_count</code> and <code>reviews.rating</code>.</td></tr><tr><td>PRODUCT CARD - Show product description</td><td>Display product description</td></tr><tr><td>PRODUCT CARD - Enable quick add button</td><td>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 <a href="https://help.shopify.com/en/manual/online-store/dynamic-checkout">product page</a>. 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.</td></tr><tr><td>MOBILE LAYOUT</td><td><ul><li>The Number of columns on mobile: Adjust the Dropdown <strong>Number of columns</strong> to set the total number of columns to display inside the section. The minimum number is <code>1,</code> and the maximum is <code>2</code></li><li>Enable swipe on mobile: Changes the mobile display from a column to a row, where customers can swipe sideways to see more products.</li></ul><p></p></td></tr><tr><td>Section padding</td><td>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.</td></tr></tbody></table>

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

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2Fhkg9D5wFWzCNeVn5LQO0%2F5.png?alt=media&#x26;token=f388f288-6f55-4df1-a8a5-462c8b28b0cb" alt=""><figcaption></figcaption></figure>

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

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Heading size</td><td>Change the size of the heading text. Choose between small, medium, or large.</td></tr><tr><td>Number of columns on desktop</td><td>Adjust the slider <strong>Number of columns</strong> to set the total number of columns to display inside the section. The minimum number is <code>1</code>, and the maximum is <code>5.</code></td></tr><tr><td>Make products full width</td><td>Makes the section the full width of the browser window.</td></tr><tr><td>Color scheme</td><td>The background color of the <strong>Featured collection list</strong> section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.</td></tr><tr><td><em>PRODUCT CARD</em> -  <br>Image Ratio</td><td><p>The image ratio for the featured images of the collections:</p><ul><li><strong>Adapt to image</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 2:3 ratio.</li><li><strong>Square (default)</strong> - Crops the images to use a 1:1 ratio.</li></ul></td></tr><tr><td><em>PRODUCT CARD</em> - Show second image on hover</td><td>When the customer hovers their cursor over the product image, displays the second product image if the product has one.</td></tr><tr><td><em>PRODUCT CARD</em> - Show Vendor</td><td>Displays the vendors of the products.</td></tr><tr><td><em>PRODUCT CARD</em> - Show product rating</td><td>Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★. Also requires a product review app such as <a href="https://help.shopify.com/en/manual/products/product-reviews">Shopify Product Reviews</a>, and <a href="https://help.shopify.com/en/manual/metafields/metafield-definitions">Meta field definitions</a> for <code>reviews.rating_count</code> and <code>reviews.rating</code>.</td></tr><tr><td><em>PRODUCT CARD -</em> Enable quick add button</td><td>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 <a href="https://help.shopify.com/en/manual/online-store/dynamic-checkout">product page</a>. 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.</td></tr><tr><td><em>MOBILE LAYOUT -</em> Number of columns on mobile</td><td>Set a specific column layout for mobile devices. Choose between 1 and 2 columns.</td></tr><tr><td><em>MOBILE LAYOUT -</em> Enable swipe on mobile</td><td>Changes the mobile display from a column to a row, where customers can swipe sideways to see more products.</td></tr><tr><td>Section padding</td><td>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.</td></tr></tbody></table>

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

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FGRSdAeqFqGgAaiBdPfof%2Ffeatured_collection_list-block.png?alt=media&#x26;token=b8e7e2bc-f001-4f05-817e-0ebf333889f5" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="261">Options</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td>Which collection you want to display products from. Click <strong>Change</strong> to remove or change the collection.</td></tr><tr><td>Maximum products to show</td><td>The number of products from the collection to display. Minimum: 2. Maximum: 12.</td></tr><tr><td>Enable "View all"</td><td>If the collection has more products than set in the <strong>Maximum products to show</strong> field, then this displays a "View all" button that takes the customers to the collections page.</td></tr></tbody></table>

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

<figure><img src="https://2633927261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4k5c4mbNgGVVOJl0Fdz%2Fuploads%2FJXav6LoHEc62OaiOLfCd%2FScreenshot_33.png?alt=media&#x26;token=b0a3cf3b-c5aa-44b0-9790-9368d775f6d9" alt=""><figcaption></figcaption></figure>

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

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

{% hint style="warning" %}
For Some sections of Shopify can refer here: [Theme Section](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-features)
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://joomlart.gitbook.io/peaks-documentation/basic-configuration/theme-sections/contents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.