How to find these settings...
- Online Store
- Customize (Theme Editor)
- Add section
- Featured Product
The Home Page Featured Product options contain features that are similar to Theme Settings > Product Grids & Rows and the Product Pages Settings.
Recommended reading
In this section...
Banner
Desktop/Mobile Image
The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to 'Full width' below
- The height will depend on your 'Height' settings below
Full width
The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:
Setting
Desktop Width
Minimum Image Width
Full width checked
100%
1900px
Full width unchecked
1180px
1180px
The height will determine the overall width of the background image. The following would be used to determine the actual necessary width of an image:
Screen Width x Height x Image Ratio = Desired Width
Height
The overall height of the banner in relation to the height of the screen. 0-5% is the minimum, and it steps up by 5 to a maximum of 100%.
- Desktop: Used on screens larger than 768px
- Mobile: Used on screens smaller than 768px
Overlay color
A color may be applied to background images to help the text clarity
Overlay gradient
A gradient may be applied to background images to help the text clarity
Overlay opacity
When an 'Overlay' color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 5 to a maximum of 100%
Media
Product media includes images, 3D models, and videos. For more information, review the Product media documentation
Enable square image (1:1) formatting
The featured image container will be squared and the image will fit proportionally regardless of the width or height
Enable image zoom
Turn on the ability to zoom into the featured product image. To provide a good zoom but keep file sizes low, it is recommended to use 1160px images.
Enable zoom to be used on mobile devices
The zoom feature can be disabled on mobile devices, but remain available on desktop
Enable video looping
Allow media videos to loop
Options
Product
Select the product to feature
Two column layout
Use a traditional 2 column, side-by-side layout, or disable and stack the image over top of the form
Vertical position
Column content can be aligned to the top or middle of each other
Center text
Text can be aligned to the left or centered to the container
Product add to cart redirection
If checked, when the customer clicks add to cart, they will stay on the same page. This promotes further shopping within the store. If you would prefer that they go directly to the cart, uncheck this option
Section
Lazy load images *
Enable for "above the fold" images. Disable for any image that is not visible on the initial page load
Background color
Choose a custom color for the background
Background gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
* May not be available in all Sections
CONTENT BLOCKS
Title
Use h1 tag
For SEO purposes, set the 'Heading' to use an h1 tag. NOTE: This should only be used once per page
Heading size
Set the heading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Show divider
Add padding and a dividing line below the element
Vendor, SKU and barcode
Show product vendor
The vendor title will display. The title will be linked to the default collection page or to a collection created using the vendor name.
Show product SKU
If a product or variant has an associated barcode, it will display
Show product barcode
If a product or variant has an associated SKU, it will display
Show divider
Add padding and a dividing line below the element
Product rating
Display the product rating based on reviews collected from review apps
Show divider
Add padding and a dividing line below the element
Price
Price size
Set the price size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Show tax and shipping message
If taxes are included or there is a shipping policy, a message may display
Show divider
Add padding and a dividing line below the element
ShopPay installments
Shop Pay offers customers the option to pay in full at checkout, or to split their purchase into 4 equal, interest-free installment payments for orders between 50 USD and 1000 USD. Learn More
Show divider
Add padding and a dividing line below the element
Availability
Display the number of remaining items in stock to create a sense of urgency in your customers shopping. This requires you to track the stock of the product or variant and not check 'Continue selling when out of stock'. Available default messaging:
- Only X left!
- Available Now!
- Sold Out
Inventory transfers can also be automatically displayed underneath the product availability. Learn more about transfers from suppliers
Minimum number of products remaining to display remaining stock
Sets the minimum number of products needed before the 'Only X left! message appears. Example, if there are 10 products in stock, setting this to 15 would display 'Only 10 left!', but setting it to 5 would display 'Available Now!'
Show divider
Add padding and a dividing line below the element
Line item properties
Line item properties are used to collect customization information for an item added to the cart. This information can be collected from the buyer on the product page
Show divider
Add padding and a dividing line below the element
Checkbox
Add an option for users to agree to
Radio label
Add a label above the field. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Radio options' text will be used as the label in the email
Radio options
Separate options with a comma to create multiple radio buttons. Example: Option 1, Option 2, Option 3. If left blank, the field & label with be removed
Text label
Add a label above the text input. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Text placeholder' text will be used as the label in the email
Text placeholder
The initial text the users sees within the input.
Select dropdown label
Add a label above the field. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Select dropdown placeholder' text will be used as the label in the email
Select dropdown placeholder
The initial text the users sees within the field.
Select dropdown options
Separate options with a comma to create dropdown selections. Example: Option 1, Option 2, Option 3. If left blank, the field & label with be removed
Variant picker
Show single option variant
By default, if there is only 1 option to a variant, the option will not display. Since there is no choice for the customer to make, this option is removed. Check the box to display the single option dropdown.
Variant options
Choose how to display various variants:
- All buttons: EVERY variant will be displayed as block buttons
- Color buttons: Only COLOR variants will be displayed as block buttons
- Size buttons: Only SIZE variants will be displayed as block buttons
- Color and Size buttons: Only COLOR and SIZE variants will be displayed as block buttons
- Magnified variant image: Display the zoomed in variant image associated with the variant. If an image is not available, it will default to the color
- All Dropdowns: EVERY variant will be displayed in a dropdown
Color buttons
Choose how the color will be displayed:
- Colors: Show colors based on the name of the color. If a color cannot be associated with an 'HTML Color Name', the swatch will default to white.
- Variant image: Display the variant image associated with the variant. If an image is not available, it will default to the color
- Magnified variant image: Display the zoomed in variant image associated with the variant. If an image is not available, it will default to the color
-
Custom image: Create your own image to associate with the variant:
- Images MUST be a PNG, not a JPEG
- The file name MUST match the variant title. Example, a variant color of 'None Black' would require a file to be title and formatted like 'none-black.png'
- Recommended image size is 140 x 140px
- Upload the file to Content > Files
Enable rounded buttons
Buttons can be sharp edged squares or rectangles, or rounded circles or ovals
Show divider
Add padding and a dividing line below the element
Tooltip
Tooltips add an icon next to the variant title to allow users to display more information about the variant in a pop up.
Variant title
Assign to a variant by its title, ie Size or Color
Text or HTML
Add simple text or formatted HTML to provide extra information for the variant
Quantity
Make the quantity field available to allow the customer to add more than 1 item to the cart at a time
Show divider
Add padding and a dividing line below the element
Buy Buttons
Show dynamic checkout button
Dynamic checkout buttons allow customers to skip the cart and go directly to the checkout using a variety of payment options
Show recipient form for gift card products
When enabled, gift card products can optionally be sent to a recipient with a personal message.
Show divider
Add padding and a dividing line below the element
Free shipping messaging
The free shipping message is set up in Theme Settings > General
Show divider
Add padding and a dividing line below the element
Store pickup
Displays option for customers to pick up their online orders at your retail store, curbside, or any location that you choose. Learn more
Product description
This will add the product description to the form information. If the description contain h6 tabs, only the content before h6 will display
Show divider
Add padding and a dividing line below the element
Button
Text
Customize the text for the button
Outline button
Invert the button to use a frame with no background
Link
Add a link to the button
Show divider
Add padding and a dividing line below the element
Text
Text
A text block for metafields and basic text formatting including bold, italic & linked text
Show divider
Add padding and a dividing line below the element
Custom Liquid
Liquid
Add app snippets or other Liquid code to create advanced customizations
Enable reload on variant change
Variant metafields are added in the admin, and can be displayed using Liquid. Enable this option to allow the block content to update when a new variant is selected. This will ensure the metafield data is displayed for each variant. Learn more
Show divider
Add padding and a dividing line below the element
Image
Image
Select an image to be used in your product options. A max width of 560px is recommended
Show divider
Add padding and a dividing line below the element
Icons
Icon blocks add trust icons or required text & links to your product page. Add up to 3 per block. You can view the icons on the 'What Icons are Included?' FAQ page
Show divider
Add padding and a dividing line below the element
Icons #1-3
Select an icon to be used from the preset list
Custom icon
An alternative to using a pre-set icon is the image picker. It is suggested to use an SVG or PNG file format
Icon color
Preferred color of the icon. Defaults to the color assigned to the Headers
Icon highlight color
Some icons have elements that can be assigned a different color. Defaults to the Accent color
Text
A text block for basic formatting including bold, italic & linked text
Enable pop up window
Allow Page content to be displayed in a pop up window. This could be useful for size charts, contact information or Policy pages. If selected, any links added to the Text block above will be ignored
Pop up information
Select a Page to display within the pop up
Divider
Add padding and a dividing line