How to find these settings...
- Online Store
- Customize (Theme Editor)
- Add section
- Featured product
The Featured product section options contain features that are similar to Theme Settings > Product Grids & the Product page section
Recommended reading
In this section...
Settings
Product
Use the product picker to assign a product
Media
Lazy load image(s)
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Desktop gallery position
Position the gallery to the left or the right when the container is greater than 768px wide
Layout
There are 4 options for the gallery layout:
- No thumbnails: No thumbs will be displayed, and all of the images will display in 1 column when the container is greater than 768px wide. When the container is less than 768px wide, the gallery will present as a slider with clickable buttons in place of thumbnails
- Thumbnails left of gallery: Vertical slider list of thumbnails positioned to the left of the gallery when the container is greater than 768px wide. When the container is less than 768px wide, the thumbs will display under the featured image gallery
- Thumbnails below gallery: Traditional thumbnail list with a left to right slider
- Thumbnails right of gallery: Vertical slider list of thumbnails positioned to the right of the gallery when the container is greater than 768px wide. When the container is less than 768px wide, the thumbs will display under the featured image gallery
Insta filter
App like filters can be applied to your images
Enable video auto play
Allow video to start itself from the beginning
Enable video looping
Allow media videos to loop
Options
Text color
Choose a custom color for the text
Text color hover
Choose a custom color for the text hover
Line color
Choose a custom color for the lines and borders
Section
Background color
Choose a custom color for the background
Background color gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 640px 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 640px 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 640px 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 640px 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 640px 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 640px 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'
CONTENT BLOCKS
Access content blocks using black arrow next 'Featured 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
Text size
Set the vendor size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
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 outline
Text defaults to the solid state, but can be customized with 3 outline thicknesses
Heading size
Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 96px
SKU and barcode
Show SKU
If a product or variant has an associated SKU, it will display
Show barcode
If a product or variant has an associated barcode, it will display
Show label
Display the default text labels, ie 'SKU: 1234'
Product rating
Display the product rating based on reviews collected from review apps. There are 3 options available:
- Stars and text
- Stars
- Text
NOTE: Requires a product review app, and metafield definitions for 'reviews.rating_count' and 'reviews.rating'.
Price
Display the price, plus compare at price, per variant
Price size
Set the price size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 96px
Disable tax message
By default, if the store is set to include taxes in pricing, a message with display
Product description
This will add the product description to the form column
Custom description
A text block for basic formatting including bold, italic, formatted lists & linked text
SLIDE
Enable slide
Condense the content down to a clickable slide
Slide heading
Provide a title to the closed slide
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
Variant picker
Show single option variant
By default, if there is only 1 option to a variant, the variant 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 variant
Variant options
There are 2 options for the variants:
- Buttons: Variant titles will be presented as clickable buttons. Color variants can use the 'Buttons' option below based on the 'Color variant title' set in Theme Settings > Color
- Dropdowns: Variant titles will be listed in a dropdown
Enable rounded buttons
Buttons can be sharp edged squares or rectangles, or rounded circles or ovals
Buttons
Choose how the 'Buttons' 'Variant options' will be displayed:
- Text: Display the title of the variant title
- Colors: Show colors based on the name of the color. If a color cannot be associated with an 'HTML Color Name', this will appear blank
- Variant image: Display the variant image associated with the variant. If an image is not available, this will appear blank
- Magnified variant image: Display the zoomed in variant image associated with the variant. If an image is not available, this will appear blank
-
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 40 x 40px
- Upload the file to Settings > Files
Quantity
Make the quantity field available to allow the customer to add more than 1 item to the cart at a time
Buy Buttons
Custom add to cart text
Replace the default 'Add to Cart' text. Useful when creating custom templates for Pre-Order products
Enable cart redirection
Automatically sends users to the cart page after adding a product
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
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
Enable Geolocation
Offer users the option to share their location to display distances to stores, when the customer clicks on the 'View store information' text link. The user will be prompted by the browser to allow the use of their location
Complementary products
Complementary products are set in the Shopify Search & Discovery app
Number of products
Select the number of products to display. 1 is the minimum, and it steps up by 1 to a maximum of 10
SLIDE
Enable slide
Condense the content down to a clickable slide
Slide heading
Provide a title to the closed slide
Social sharing buttons
Customers can be provided options to share to their social media channels. Social options are set in Settings > Social Media
Button
Text
Add text to your button
Link
Use the link picker to assign a link to the button
Style
There are 2 options for the button based on the settings from Theme Settings > Buttons:
- Primary
- Secondary
Text
Text
A text block for basic formatting including bold, italic, formatted lists & linked text
Text alignment
Text can be aligned to the left, right or centered to the container
SLIDE
Enable slide
Condense the content down to a clickable slide
Slide heading
Provide a title to the closed slide
Page
Use the page picker to assign a page and display the content
SLIDE
Enable slide
Condense the content down to a clickable slide
Slide heading
Provide a title to the closed slide
Line item properties
Line item properties are used to collect customization information for an item added to the cart
CHECKBOX
Labels
Add an option for users to agree to
RADIO BUTTONS
Labels
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
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
Labels
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
Placeholder
The initial text the users sees within the input
SELECT DROPDOWN
Labels
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 'Placeholder' text will be used as the label in the email
Placeholder
The initial text the users sees within the field.
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
SLIDE
Enable slide
Condense the content down to a clickable slide
Slide heading
Provide a title to the closed slide
Image
Use the image picker to assign an image
Insta filter
App like filters can be applied to your images
Image alignment
Align the image to left, center or right of the column
Link
Use the link picker to assign a link
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.
SLIDE
Enable slide
Condense the content down to a clickable slide
Slide heading
Provide a title to the closed slide
Divider
Add padding and a dividing line