Product information
The "Product information" section provides options to change the layout of a product page.
Tip: Drag and drop the section to the desired position on a product page.
Product information
The theme displays the full-width sticky "Add to cart" button if you activate the "Enable sticky product "Add to cart" option. The sticky button will be displayed at the top of a page on desktop and at the very bottom on mobile. Thus, customers can add a product to the cart while scrolling down a page or up to the "Add to cart" button in the product information section.
The "Action after selecting a variant" provides options for grouping images by the selected product variant. To deactivate this functionality, select the "No" option.
Note! If you use one of the options described below, firstly, group images by product variants in your Shopify admin -> Products. Read the detailed instructions on the help page.
"Hide other variants' media". This option is relevant if each color variant includes a single image added in your admin. To hide images of unwanted color variants, select the current setting from the drop-down. Otherwise, all product images will be displayed in the gallery. The product variant images can be replaced with the appropriate ones when you select another variant.
"Group gallery by options". Group product images by the selected color variant. Images related to another color variant will be hidden. Initially, when landing on a product page, all product images will be displayed in the gallery. This functionality is activated by clicking the color swatch.
View the example of the functionality on the DEMO.
"Group with tag 'group-gallery'". This option works the same as the "Group gallery by options" in the storefront, with one exception: you can specify products in your admin to use this functionality. Activate the option for a particular product using the tag 'group-gallery' in your Shopify admin -> Products. This option is unavailable for products without a custom tag.
Use the "Enable sticky product information" option to pin the product details when scrolling down the page to the bottom of the product gallery.
Gallery
In the "Layout" drop-down, select the type of image gallery on the desktop:
Note! The following options can be applied to host the image gallery. Using one of these options initiates a view of product images assigned to product variants in the admin. Clicking on a color option will switch the first image to the corresponding one. Product variants can not be changed by selecting an image in the gallery.
"Stacked". The following layout displays the main product variant image across the media width with two additional images in each row displayed below.
"Full-stacked". The provided layout displays product images as one element in a row, one below the other.
The "Full-stacked" option can be viewed on the DEMO.
"2 columns". This layout shows two images in each row.
"Thumbnails". Show the image gallery below the main variant image by activating the current option.
The "Thumbnails" option can be viewed on the DEMO.
"Thumbnail carousel". To place an image carousel instead of a thumbnail list underneath the product image, select the option.
The "Thumbnail carousel" option can be viewed on the DEMO.
"Vertical thumbnail carousel". The product gallery will be moved to the left of the main image and displayed as a vertical carousel.
View the "Vertical thumbnail carousel" layout on the DEMO.
Once selecting the "Thumbnail carousel" option above, use the "Thumbnails in row" scale (ranging from 4 to 10) to determine the number of visible thumbnails in the carousel.
The full-width image gallery can be used if the "Enable lightbox" option is enabled. The zooming logo will be placed in the bottom-right corner of product images on all screen sizes. To view the zooming logo on the desktop view, hover over the desired image. The zoom-in icon is designed to appear on mobile without the mouse hover.
If you filled in the product information with video content in your admin, enable the "Enable video looping" option to display a video continuously.
To modify the image zoom on the desktop, activate the "Enable zoom scale" option. Then, use the "Zoom coefficient" scale from 1 to 5 in increments of 0.1 to 0.9 points. If you leave the default value equal to 1, image scaling will be disabled.
Media
Tip: Due to the wide range of options that interact with each other, investigate the media settings to achieve the best product page appearance.
The width of the screen filled with a product media/image gallery can be adjusted using the "Width" scale, the parameters of which vary from 40% to 60%. This function determines the size of the image gallery relative to the product information.
Swap the image gallery to the left or right in the "Position" picker. These options can be applied to the desktop view.
Activating the "Constrain media to screen height" feature controls how the populated area displays a main product image: either in its original size or filling the entire media width. Operate an image appearance in the "Media fit" to "Original" or "Fill".
Using the "Medium" or "Large" options in the prior picker, you can limit the main product image size to fit the screen by checking the "Constrain to screen height".
Sidebar
Control the sidebar width according to the specified parameters in the range from 280 to 480 pixels using the "Width" scale. Add sidebar content using the provided blocks.
Section layout
Use the "Dividing line" drop-down to specify whether to add the line separator on the top or bottom of the "Product information" section. If you need to use the line, select its position as "Top", "Bottom", or "Both". To hide the dividing line, use the "None" option.
The "Top spacing" option controls the space between the breadcrumbs or Header (if the breadcrumbs are disabled) and the "Product information" section. Use the scale from 0 to 100 pixels to set the desired parameter.
Handle the parameters on the "Bottom spacing" scale from 0 to 100 pixels to add or remove the space at the bottom of the "Product information" section.
Mobile settings
In the "Gallery layout" drop-down, change the image gallery appearance on mobile view. Select one of the options that works best for your store design:
"Bullets". The current option displays product gallery navigation as markers. The number of bullets indicates the number of available product images.
Note! This option is a good solution for product galleries with a limited number of product images, which sets bullets in a line.
"Thumbnails". To show the image gallery below the main image, select the provided option.
View the layout example on the DEMO.
"Arrows". The product image navigation can be illustrated as arrows with the number of available product images located centrally.
"2 columns and bullets". The product images will be placed next to each other, two items per row, and will rotate one at a time when a bullet is clicked. In this case, the image navigation consists of markers, each indicating the number of pages to view.
"2 columns and arrows". The last option shows the image gallery with two items per row. Image navigation is accomplished by switching images one at a time in a pagination style based on the number of media available in the gallery.
The product information (such as title, price, SKU, product type, collection, inventory status, stock, and question pop-up, share, and pop-up) can be aligned to the left or center on mobile view by selecting the required option in the "Mobile text alignment" picker.
The following examples show how the product page might display on desktop and mobile:
Theme Blocks
Tip: To add a block, press "Add block" in the "Product information" section and select one from the list.
The "Product information" section can be added with the dynamic content blocks, such as: "Text", "Title", "SKU", "Collection or product", "Product type", "Price", "Time countdown", "Option popup", "Free shipping", "Delivery countdown", "Inventory status", "Quantity selector", "Variant picker", "Buy buttons", "Stock and question popup", "Availability status", "Question popup", "Description", "List item", "Share", "Custom liquid", "Collapsible tab", "Tabs", "Pop-up", "Personalized fields", "Complementary products", "Guaranteed safe checkout", "Image (Sidebar)", "Featured promo (Sidebar)", "Collection (Sidebar)", and "Icon with text (Sidebar)". Each block can be moved to the needed position in the product information section.
You can add the following blocks more than once: "Text", "Option popup", "Icon with text", "Custom liquid", "Collapsible tab", "Tabs", "Pop-up", and "Guaranteed safe checkout".
Text
Use the block to add a product subtitle, paragraphs, promotion text, and more.
The "Text" field allows you to paste any text line or choose a Metafield that will be displayed as text. Press on a dynamic source icon to add a meta field. In order to create a meta field, navigate to the Shopify admin -> Settings -> Metafields and metaobjects -> Products. How to build metafields can be read in the following article.
Title
Add this block if you need to display a title in the product information section.
In the "Mobile text alignment" picker, set one of the options, "Use section setting" or "Center". If you hit the "Use section setting" option, the mobile alignment will be used from the section settings. To center the title position regardless of the section settings, use the "Center" option.
In the following example, you can view the described settings:
SKU
Use the following block to place the Stock Keeping Unit in the product information section:
Be aware of adding the necessary information to your admin for each product.
Collection or product
To display a link to a collection with specified products, add the current block. You can assign each product to the required collection in your Shopify admin -> Products -> Collections. Read more details in the initial documentation.
In the following example, you can view how the block might appear in the section:
Product type
To place the product type, add the corresponding block.
Here is how the block appears in the product information section:
Be aware of adding the necessary information to your admin for each product. Read more details in the initial documentation.
Price
Add the block to display a price on product pages. Ensure that each product includes price settings in the admin. Read how to add and edit products in the following article.
Time countdown
If you need to display the Sale countdown on product pages, the theme allows you to add the "Time countdown" block to the product information section.
Note! The Time countdown is a custom feature that requires additional settings to be customized in your Shopify admin -> Settings -> Metafields and metaobjects -> Products. To display the sale countdown for an individual product page, use the Metafield. Find the instructions on the following help page.
In the "Title", place the block heading.
Colors
Use the provided color pickers to colorize the time countdown: "Background", "Border", "Title", "Icon", "Counter background", and "Counter text".
Adding the "Free shipping" block first, followed by the "Delivery countdown" block in order, organized a single unified block. Any other configurations will display information in separate boxes.
Option popup
Add the current block to show an informational pop-up next to the option name, such as "Size Chart".
In the "Option name" field, enter the exact option name as defined in your admin. This ensures the pop-up is correctly linked to the selected product option.
Use the "Page" option to link a page's content with the block. Detailed instructions on creating a page can be found here.
Free shipping
To show the Free shipping progress bar in the product information section, two steps should be completed:
activate the option in Theme settings -> Cart;
add the current block.
Show top dividing line
To show a separator line before the block, enable the option.
Show bottom dividing line
To show a separator line below the block, tick the checkbox.
Check the example of how the block might be displayed in the section:
Delivery countdown
Use the following block to display the calculated delivery date of the item purchased in your store.
In the "Hours of the day to reset delivery countdown" slider, select a specific time of the day between 0 and 23 hours to reset the countdown.
Example:
So, if you move the value on the slider to 14, it indicates that the delivery will be shifted one day later, at 2 PM, every subsequent day at the same time.
The "Average delivery time of delivery countdown (days)" slider lets you define the number of days before the delivery date. The scale range can be set from 1 to 30 days.
Example:
Let's say you set the reset time to 2 p.m. and the delivery time to 3 days.
The delivery date depends on the time of day the customer purchases the item from your store. If the purchase time is:
On Wednesday before 2 p.m., the delivery time will be displayed as "Order in the next x hours x minutes to get it by Saturday xx/xx/xxxx";
On Wednesday after 2 p.m., the delivery time will be displayed as "Order in the next x hours x minutes to get it by Sunday xx/xx/xxxx".
In the "Format of delivery countdown date", determine the date format. The supported date formats and date orders are:
Day DD/MM/YYYY
Day MM/DD/YY
YY/MM/DD
Use the "Exclude days of the week" input field in order to paste the days of the week that should be skipped for delivery. For example, the weekends or holidays.
Example:
Let's say you set the reset time to 2 p.m. and the delivery time to 3 days. Then added the excluded days: Saturday and Sunday. So, if a customer purchased an item:
On Wednesday, before 2 p.m., the delivery time will be displayed as "Order in the next x hours x minutes to get it by Monday xx/xx/xxxx";
On Wednesday after 2 p.m., the delivery time will be displayed as "Order in the next x hours x minutes to get it by Tuesday xx/xx/xxxx".
Show top dividing line
To show a separator line before the block, enable the option.
Show bottom dividing line
To show a separator line below the block, tick the checkbox.
Here is how this feature might be displayed in the product information section:
Inventory status
The "Inventory status" illustrates the number of products in stock with a green or red color point depending on the limit set in the block.
Add the block to display the information with the stock status and the number of available product variants. The value will automatically change according to the selected product variant. The stock quantity of each product variant can be edited in your Shopify admin -> Products. Additionaly, make sure to activate quantity tracking for each product/product variant in your admin:
Activate the "Enable low inventory threshold" option to display the inventory threshold slider.
Use the "Threshold" slider to set the minimum value for when the products display low inventory. The boundary value can be set from 1 to 100 items, which determines how to display the stock status of the product variant: "X in stock" or "Low stock".
In stock. These details will be added to the product information section when the threshold is less than the in-stock products. The products will be displayed as always available until they are completely out of stock if you set the value to 0.
Low stock. It will only be shown for products whose stock status is equal to or less than the boundary value you set on the slider.
Enable the "Show inventory count" checkbox to add the product count to the stock status.
Quantity selector
Use the "Quantity selector" block to add a quantity input box where visitors can enter the number of products added to the cart. Or use the plus and minus symbols to increase or decrease the number of product items.
Note! Using the "Show quantity selector" in the "Buy buttons" block hides the quantity selector input box in a separate area.
Check the example of how the block might be displayed in the section:
Variant picker
This block is valuable if you want to showcase product variants for products that have multiple options, for example, color, size, material, etc.
Show dividing line
To show a separator line before the block, enable the option.
Choose the "Type" of product variants in the selector. It is presented as "Dropdown" or "Button":
The theme provides numerous options for changing the design of the color variants. Read more information on the following help page.
Buy buttons
The "Buy buttons" block allows you to display the "Add to cart" button and dynamic checkout buttons on a product page.
If you hit the "Show quantity selector" checkbox, the quantity input box will be placed next to the "Add to cart" button.
The dynamic checkout buttons help skip the process of adding products to the cart and navigate directly to the checkout page. More about the checkout method used by the button can be found in the initial documentation.
Add the block to display buttons in the product information section on product pages. The "Add to cart" button will be displayed after adding the block. The dynamic checkout buttons will be shown after the "Show dynamic checkout buttons" option is enabled.
Here is how the block might be displayed in the section:
Enable the "Show recipient information form for gift card products" option to add the Gift card recipient form to the product information section. The recipient form can be displayed after accepting the "I want to send this as a gift" checkbox. For how to set up a gift card in your Shopify admin -> Products -> Gift card, read the initial documentation.
To add the recipient fields to the gift card form, follow the steps from the help page.
"Add to cart" button
The "Add to cart" button style can be changed from "Primary" to "Secondary" using the "Style" picker.
Additionally, set the button color in the "Color" picker using the hex code or specify it in the paint palette. The background color will be changed for the "Primary" style. For the "Secondary" style, the colorized text and inside button border will be added.
The button styles can be viewed below:
Subscription plans
Note! The Subscriptions can be applied to a specific product page using the Shopify Subscriptions app. Create a subscription plan for each product in your Shopify admin -> Apps -> Subscriptions -> Plans.
The subscription will be automatically displayed per product above the buttons related to the "Buy buttons" block.
After selecting a subscription plan, the "Add to Cart" button changes to the "Pre-order" button. Additionally, the "Pre-order" badge appears above the product price. The background color of the "Pre-order" button can be set in Theme settings -> Products.
The subscription details will appear in the Cart drawer, on the Cart page, and on the Checkout page after adding a product to the cart.
Stock and question popup
Use the given block if you need to showcase the inventory status of product variants, and add the contact form pop-up for clarifications:
Stock
The "Stock" option shows the product inventory status below the limit set in the block.
Enable the "Show stock" checkbox to place the information line with the number of available product variants. The value will automatically change according to the selected product variant. The stock quantity of each product variant can be edited in your Shopify admin -> Products. Additionaly, make sure to activate quantity tracking for each product/product variant in your admin:
Use the "Minimum stock count" slider to set the minimum weight of available product variants in a store to display information about the number of remaining products in stock. The boundary value can be set from 1 to 10, which determines whether to display the stock status of the product variant. It will only be shown for those variants whose stock status is equal to or less than the boundary value you set on the slider.
For example, if you set the value to 10 on the slider, then "Low stock - X items left" will only be shown for product variants that have an inventory number equal to or less than 10:
Question popup
For quick and easy customer contact with the owner, display a pop-up feedback form in the product information section. To use the pop-up, turn on the "Show question popup" option. It will be displayed on the right side of the screen after hitting the "ASK A QUESTION" button next to the stock availability:
Availability status
Add the block to display information about the product availability in a separate line. The example configurations of the block can be viewed above.
Enable the "Show stock" checkbox to place the information line with the number of available product variants. The value will automatically change according to the selected product variant. The stock quantity of each product variant can be edited in your Shopify admin -> Products. Additionaly, make sure to activate quantity tracking for each product/product variant in your admin.
Use the "Minimum stock count" slider to set the minimum weight of available product variants in a store to display information about the number of remaining products in stock. The boundary value can be set from 1 to 10, which determines whether to display the stock status of the product variant. It will only be shown for those variants whose stock status is equal to or less than the boundary value you set on the slider.
Question popup
Use the block to display the Question pop-up in a separate line. Turn on the "Show question popup" option to display the text button. It will be displayed on the right side of the screen after hitting the "ASK A QUESTION" button next to the product image.
Description
If you add this block, the product description from the admin will be shown on product pages. Read about how to add and edit products in your admin here.
Enable or disable the "Show as accordion" option to decide whether to show the description in the tab.
Activate the "Open by default" option to show a tab open by default. This option works in a pair with the "Show as accordion" option.
In the following examples, you can view available configurations:
List item
If you need to place the list of icons with the text strings, use the "List item" block.
Specify the block layout by selecting one of the options in the "Layout" picker: "Horizontal" or "Vertical".
To display a dividing line in front of the block, enable the "Show dividing line" option.
Content
First section - Sixth section
The "Icon SVG" field is designed to link SVG icons that come with the theme or your custom SVG icons:
To display the built-in theme graphics, add an icon name to the field. Learn how to operate the theme SVG icons here.
Use the provided field to paste the HTML code of your custom SVG icon. Refer to the following help page for step-by-step instructions on the required modifications.
Leave the field blank to hide an icon.
To display an image instead of an icon, use the image picker. Press the "Select" in the "Icon image".
The descriptive paragraph can be added to the "Text" input field. This field can be used to add content using Metafields. Press on a dynamic source icon to add a Metafield. In order to create a metafield, go to the Shopify admin -> Settings -> Metafields and metaobjects -> Products. Read about creating metafields in the article.
Share
To display a share button in the section, use the following block.
In the "Text" field, you can place the button's title for the pop-up.
Custom Liquid
This is an advanced option to generate dynamic content for output objects and their properties that can be customized by designers and developers only. Learn more in the following article.
Collapsible tab
Add this block to display collapsible tabs in the product information section. To showcase an accordion, add several content blocks.
This block allows you to paste texts into the input field, connect a page with the product details or additional information, and add content via Metafields.
Enable or disable the "Show as accordion" option to determine whether to place content in the tab.
Activate the "Open by default" option to show a tab open by default. This option works in a pair with the "Show as accordion" option.
In the "Heading", put the tab's title. The paragraph inside the tab will be displayed if you edit the "Tab content" field. This field can be used to add content using Metafields. Press on a dynamic source icon to add a Metafield. In order to create a metafield, go to the Shopify admin -> Settings -> Metafields and metaobjects -> Products. Read about how to build metafields in the following article.
To connect "Tab content from page", press "Select". Detailed instructions regarding building a page can be found here.
Tabs
Add this block to demonstrate product details in a horizontally stacked tabbed layout on the desktop view. On mobile view, the tabs will appear vertically in sequential order.
By default, the "Tab" block appears in the product information section. To move the block underneath the product details, activate the "Show at the bottom of the section" option.
Tab #1 - Tab #6
Edit each setting group from Tab #1 to Tab #6 to add a new tab.
Note! Only one tab can be opened by default.
Activate the "Open by default" checkbox for the main tab regardless of its position in the tab section.
The next options let you add dynamic content using metafields. Press on a dynamic source icon to add a Metafield. In order to create a metafield, go to the Shopify admin -> Settings -> Metafields and metaobjects -> Products. How to build metafields can be read in the following article.
Title the tab using the "Heading" field.
Enable the "Show product description" for the tab to link with a product description. Add a product description to each product page in your admin. Read how to apply the changes in the following help page.
Place the text paragraphs into the "Tab content" input field. Use options in the field panel above to style your text.
To connect "Tab content from page", press "Select". Detailed instructions regarding building a page can be found here.
Pop-up
This block allows you to display a whole page as content in the side-out drawer.
Add the title to the "Link label" field. Then, select a page. The detailed instructions on how to create a page can be found here.
The "Page" option enables adding content using Metafields. Press on the dynamic source icon to add a Metafield. In order to create a metafield, navigate to Shopify admin -> Settings -> Metafields and metaobjects -> Products. How to build metafields can be read in the following article.
Here is how the text drawer might be displayed on product pages:
Personalized fields
This block provides customers with personalized fields to fill out and add special details to their order. It can be formed as a particular service for individual products. For example, engraving jewelry, printing on clothes or cups, and so on. The information will be added to the order as product options.
Here is how the feature might be displayed in a store:
Tick the "Show as accordion" option to display fields in the collapsible tab.
Activate the "Open by default" option to show a tab open by default. This option works in a pair with the "Show as accordion" option.
In the "Heading", type the block title.
This block provides settings to activate up to three fields and customize each individually.
First field - Third field
Check the "Show field" box to activate the field.
Use the "Label" field to give the field's name.
In the "Placeholder", type any string to display inside the field before the customer enters any information.
Change the field appearance using the "Type" picker. Use the "Input" or "Text area" options.
If this field is mandatory to purchase a product, enable the "Required" option.
Activate the "Enable maximum number of characters" option to set the parameters using the scale below.
On the "Limit" scale, set the character limit from 1 to 100. The value set to 100 means that there is no limit to the number of characters that can be entered into the field.
The example of the described options can be viewed below:
Complementary products
Note! This block requires using the Shopify Search & Discovery app in your Shopify admin -> Apps. Learn more about Complementary Products here.
Add this block to display the desired products in the product information section on product pages.
To display a title for the block, insert the text into the "Heading" field. If there is no need to title the block, leave the field empty.
The block can be displayed as a collapsible tab if you activate the "Show as accordion" option.
Activate the "Open by default" option to make complementary products visible by default. This option works in a pair with the "Show as accordion" option.
Here, you can control the number of products displayed for the block using the "Maximum products to show" scale. It can be changed from 1 to 10 items.
In the "Number of products per page", arrange the number of products that should be placed in the column on the first viewing page. If the number of complementary products exceeds the quantity you set on the scale, the products will be displayed in a carousel. The value can be set from 1 to 4.
Use the settings from the "Pagination style" to display pagination as "Counter", "Numbers", or "Bullets".
Product card
Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile: "Adapt to image", "Portrait", "Square", "Landscape", or ''Circle". Each image ratio can be checked here.
Enable quick add button
The "Add to cart" button will be shown next to each product if you enable the "Enable quick add button" option.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Tip: To display the complementary products in the section, go to your admin and apply the settings described below:
Step 1
In your Shopify admin -> Apps, select the Shopify Search & Discovery app:
Step 2
Then, you can press the "Recommendations" item in the side menu to navigate to the needed chapter:
Step 3
Here you can select or search for the desired product to edit recommendations:
Select a product.
Step 4
In the "Edit complementary products" block, press the "Browse" button to search for products or type the product name in the search bar:
Step 5
Add up to ten products to display on the product page:
After specifying the complementary products in the list, hit the "Add' button on the pop-up.
Step 6
Save the settings:
Guaranteed safe checkout
Title the block using the "Heading" field.
Turn on or off the "Show as accordion" option to determine whether to display content in a tab.
Activate the "Open by default" option to show a tab open by default. This option works in a pair with the "Show as accordion" option.
In the "Columns" drop-down, choose the number of items to display per row. You can set any value from 1 to 12, depending on your layout needs.
The "Mobile columns" picker helps you adapt the items to display in a row on mobile. Set any value that fits your layout.
Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile: "Adapt to image", "Portrait", "Square", "Landscape", or ''Circle". Each image ratio can be checked here.
Change the image appearance in the "Media fit" to "Original" or "Fill".
Adjust the image’s corner rounding using the "Border radius" scale, which ranges from 4 to 20 pixels. This lets you create anything from slightly rounded to more pill-shaped image corners.
Images
In the "Image" selectors from #1 to #12, press "Select" to upload the necessary animation for both desktop and mobile.
Use the following blocks to build the Sidebar with additional content on product pages.
Image (Sidebar)
Block link
Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the "Link" source selector.
Media
Tip: The "Image" settings described below can be used for the desktop and mobile.
Use the "Mobile settings" to apply the required changes specifically for mobile.
In the "Image" selector, press "Select" to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one.
Media overlay
Turn on the "Enable" option to display the related settings.
Adjust the transparency of an image color overlay using the "Opacity" scale, which ranges from 0 to 100%.
In the "Type" picker, select one of the options: "Background" or "Gradient".
By selecting the "Background" option, change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.
Press the "Gradient" option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option here.
Heading
Use the "Heading" field to insert a title. The "Size" can be set to "Large", "Medium", or "Small".
If you need to change a title color, use the "Color" picker. The same color as for the desktop can be applied to the mobile view by enabling the "Apply color on mobile" option.
Description
Use the "Text" input field to add some descriptive text strings to the section that will appear under the heading.
Additionally, you can insert a text paragraph in the "Text" placeholder and select a page in the "Custom HTML". Alternatively, connect only a page with the block using the "Custom HTML" selector. Press the "Select" button to choose the created page from the list or add a new one by pressing the "Create page" button. If you press the "Create page" button, you will be redirected to your Shopify admin -> Online Store -> Pages. Read details on how to create pages in the following article.
If you need to change the description color, use the "Text" picker.
The same color as for the desktop can be applied to the mobile view by enabling the "Apply color on mobile" option.
Button/Second button
Change the internal button text in the "Label" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Link". Use the link from the source selector, or paste the one if you use an external link.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three available styles that can be applied in the section: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
The same color as for the desktop can be applied to the mobile view by enabling the "Apply color on mobile" option.
Content box
Tip: Use the options in the "Mobile settings" subsection to modify the section layout on mobile. Read details here.
The "Position" option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains the settings, such as "Left", "Center", and Right". Select the desired option by operating the drop-down that best fits your needs.
If you need to align the text for the desktop to "Left", "Center", or "Right", select one of the options in the "Alignment" picker.
The "Width" scale allows you to adjust the width of the text box, changing the parameters from 30% to 100%.
Activate the "Enable background" option to view additional background settings.
Use the "Opacity" scale to change the text box background transparency from 0 to 100 %, where 0% is an invisible background and 100% is opaque.
In the "Background", specify the color from the color picker. By default, the color is set to transparent.
Section layout
Use the "Height" options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:
"Adapt to image". Displays an image in its original aspect ratio.
"Proportion of height". Select the option to adjust a media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%*.
* The "Proportion of height" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "Mobile settings" subsection.
"Proportion of height" indicators:
* 100% = Square image
* Less than 100% = Landscape
* More than 100% = Portrait
* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
Animation
To add a dynamic image motion to a static image, select the option under the "Image behavior" drop-down:
"None". Disables smooth image motion.
"Ambient movement". The option adds a slight circular movement to an image.
"Zoom in out". Creates a smooth zoom-in and then zoom-out effect on the image.
"Zoom out in". Applies a zoom-out effect followed by image enlargement.
"Zoom random". Using multiple pictures in a slideshow, this option randomly zooms in or out as each image changes.
Hover animation
If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the "Inherit global settings" option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "Banner image" desktop hover animation drop-down. Read the details on the following help page.
The "Zoom in" and "Zoom out" options create a zoom effect when the mouse hovers over, either enlarging or decreasing the image. You can activate opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Background" or "Gradient" pickers. To use this option, ensure that the "Opacity" is set to transparent. The overlay opacity and zooming effect on an image can be achieved by selecting the "Zoom in, add overlay opacity" or "Zoom out, add overlay opacity". The option "None" deactivates the animation.
You can read more about the described options on the following help page.
Mobile settings
Using the "Enable" option, you can apply changes to the mobile mode regardless of the desktop settings. Activate the option to view additional functionality.
Set a specific media for mobile devices using the "Image" source selector.
Check the "Show media overlay" option to display the color overlay of the image. This option works with the configured settings of the media overlay in the block. Find more details here.
The "Media height" of an image on mobile can be changed by operating one of the options:
"Same as on desktop". Choose the option to apply the same settings as on the desktop set in the main section.
"Adapt to image". Displays the image in its original aspect ratio.
"Fixed in px". This option helps to change an image size in pixels by specifying the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 700 pixels.
"Proportion of height". Select the option to adjust the image height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%.
"Proportion of height" indicators:
* 100% = Square image
* Less than 100% = Landscape
* More than 100% = Portrait
* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
The "Text position" can be placed "Below the image" or "Over the image". Display text over the image in the "Top", "Middle", or "Bottom". Select the desired option in the drop-down list. The examples of available options can be viewed on the following help page.
The heading size on mobile can be set in the corresponding drop-down by selecting one of the options: "Large", "Medium", or "Small". The "Same as on desktop" option saves the changes applied to the desktop.
If you need to align the text to "Left", "Center", or "Right", select one of the options in the "Text alignment" drop-down. To clarify the use of parameters, check the following help page.
Featured promo (Sidebar)
The block can be titled using the "Heading" field.
Block link
Use the "Link" resource selector to direct visitors to the required page when pressing the banner image.
Media
In the "Image" picker, press "Select" to choose one from the image library or upload it from your device.
Text
Use the "Text" field to add some promotions under the image. The hex code of the color can be changed in the corresponding color picker.
Button
To overlay a button on a banner, insert a meaningful phrase into the "Label" field. If you need to hide the button, leave the field blank.
Use the "Link" resource selector to redirect customers to the correct page when they click the call-to-action button overlaid on the banner. Otherwise, the button will use the same page link you provided for the banner above.
The "Style" drop-down allows you to set up different button layouts. Choose one of the pre-set styles: "Primary", "Secondary", or "Link style". Use the following link to view how each button style is presented in the theme.
Use the "Color" picker to set the desired background color for the button.
Collection (Sidebar)
Heading
Activate the "Show heading" option to show a collection title.
To replace the default collection title with the custom title, type it in the "Heading" field.
Product card
In the "Collection", choose any collection by pressing the "Select" button to display products in the
To control the number of products displayed in the section, use the "Maximum products to show" scale. It can be changed from 2 to 5 items.
Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio here.
Show second image on hover
Use the option to display a second product image when hovering over the product card.
Enable quick add button
Switch on the option to display the "Add to Cart" button on product cards.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Activate the "Enable "View all" checkbox to show the "View All" button on desktop and mobile if the collection contains more products than are displayed in the section.
Icon with text (Sidebar)
Title the content in the "Heading" field.
The icon position can be aligned to "Top", "Center", or "Bottom" of the text area using the "Vertical align" picker.
First section - Sixth section
The "Icon SVG" field is designed to link SVG icons that come with the theme or your custom SVG icons:
To display the built-in theme graphics, add an icon name to the field. Learn how to operate the theme SVG icons here.
Use the provided field to paste the HTML code of your custom SVG icon. Refer to the following help page for step-by-step instructions on the required modifications.
Leave the field blank to hide an icon.
To display an image instead of an icon, use the image picker. Press the "Select" in the "Icon image".
Use the "Heading" field to title content in each section.
The descriptive paragraph can be added to the "Text" input field. This field can be used to add content using Metafields. Press on a dynamic source icon to add a Metafield. In order to create a metafield, go to the Shopify admin -> Settings -> Metafields and metaobjects -> Products. Read about creating metafields in the article.
Last updated