Versions 1.0.0-1.7.3
The Home Page Featured Product options contain features that are similar to Theme Setting Product Grid & the Product Pages Settings.
Recommended reading
In this section...
Banner
Show image
Include a banner image above the product
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
Image position
Set the focus of the image to ensure consistency regardless of the height setting, content height or screen width
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 | 1200px | 1200px |
Height
The overall height of the banner in relation to the height of the screen. 5% is the minimum, and it steps up by 5 to a maximum of 100%. A background image must be chosen
Background color
3 settings are available to use as a background for the section. The Primary & Secondary colors are set in the Theme Settings Color section
Media
Product media includes images, 3D models, and videos. For more information, review the Product media documentation
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 1024 x 1024px 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
Show product SKU
If a product or variant has an associated SKU, it will display under the price
Show product vendor
The vendor title will display under the product price. The title will be linked to the default collection page or to a collection created using the vendor name.
Show product reviews
This is a 2 step process, and involves installing the free Shopify Product Reviews app first. Once installed, check this box and the reviews will display below the product image & details
Show product 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. Available default messaging:
- Only X left!
- Available Now!
- Sold Out
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 single option variant
By default, if there is only 1 option to a variant, the dropdown 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 Settings > Files
Show product quantity
Make the quantity field available to allow the customer to add more than 1 item to the cart at a time
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
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 social sharing buttons
Provide options for your users to share your post to Facebook, Twitter & Pinterest. Additional options for social sharing are available here
Icon Content Blocks
Icon blocks add trust icons or required text & links to your featured product.
Icon
Select an icon to be used from the preset list
Custom icon
An alternative to using a pre-set icon is the image picker
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 color assigned to the Buttons
Text
A text block for basic formatting including bold, italic & linked text