Overview
Product Elements are dynamic and specific to the "Product" section and include elements such as; Product Name, Product Description, Price, Quantity, Variant Selector, Product Button etc.
Sections which include product elements are generally located in the "Products" category of the page sections library within the builder:
When adding a "Buy Box" section for example, it is comprised of the "Product" section which includes a mix of both Basic and Product elements:
A product "Box", "Grid", or "Bundle" section can be added anywhere outside of a Buy Box section as well, by selecting one of those Product element options when adding a new element to the page or to an existing section:
Within a Product section, you can add, remove, and effortlessly rearrange product elements as needed:
Product Element Details:
Below you will find a list of all of the Product Elements and additional information about specific settings for each one.
Product
Click on the "Product" section element, then on the "Add Product" button in the sidebar to choose the product you want used:
On "Full Customization" Product pages, to choose which product to use in the Product section select from the Type dropdown in the sidebar:
Inherit from assigned product - This Product section will use the same product as the one assigned to the product page template.
Select manually - This Product section will use a specific product you select manually.
Once a product is selected, you can also:
Click the "Change Product" button to select a different product.
Click the "Choose Variants" button choose specific variant(s) to use.
📝All variants are selected by default.Set a "Product Discount" type from the dropdown menu. There are 6 Discount options available:
None - No discount will be shown.
Percent (Dynamic) - Show a % based discount which auto-applies at Checkout.
Fixed (Dynamic) - Show a $ based discount which auto-applies at Checkout.
📝Only one "Dynamic" discount can be applied to an order at a time. If your page includes products with multiple dynamic discounts, the most recently applied discount will take precedence.Compare At Price - Show the product's "Compare at price" pulled from Shopify. 📝Make sure the compare at price is higher than the price, otherwise it won't show.
Percent (Static) - Show a % based discount. No discount auto-applies at Checkout.
Fixed (Static) - Show a $ based discount. No discount auto-applies at Checkout.
Set the "Default Product Quantity" you'd like used for the product.
Access "Layout" options for the product element, including Vertical Alignment (Top/Middle/Bottom) and two different Layout options.
Product Grid
With the "Product Grid" element, you can showcase up to 20 unique products with flexible grid and slider layout options. Enjoy efficient editing—modifications in one column are automatically applied to all, streamlining your workflow and maintaining consistency for a polished, professional look.
Product Image
For the "Product Image" element you can access the following settings and options in the "Main" tab of the sidebar:
Set the "Default product image" setting from the dropdown:
Shopify Variant Image - The image for the product’s first variant is displayed.
Shopify Product Image - Your main corresponding Shopify product image is displayed.
Custom - The custom image you select will be displayed as the product image.
📝 All image options support variant image switching on the published page.
Crop Image - If the "Custom" image option is chosen.
Change Image - When selecting a new image, the default product image setting will automatically change to "Custom".
Enter Alt Text for the image. Alt text provides a textual description of an image, which is displayed when the image cannot be loaded or when it is being accessed by screen readers or other assistive technologies.
Set a Destination for the image to make it clickable.
If the "Inherit from Button" box is checked, the image will inherit the same destination as the Product Button element within the same section.
If the "Inherit from Button" box is not checked, select a destination option from the dropdown:
None - The image will have no destination and not be clickable.
Cart - The image will redirect to the Cart Page (/cart) on your store when clicked. No product will be added to cart.
Product - The image will redirect to a specific chosen Product page (/products) when clicked.
Set a Hover State option for the image from the dropdown:
None (default)
Hover Image - Show an alternate image when hovered over
Color Overlay - Show a color overlay when hovered over
Change Opacity - Change the opacity of the image when hovered over
📝If "Hover Image" is chosen, click the "Choose Image" button to select the image you'd like shown when the image is hovered over on Desktop computers. For best results, use an image that has the same or similar image ratio to the original image (1:1, 2:3, 4:3, 16:9, etc)
A Badge can also be enabled for the image to add an additional visual cue or call-to-action overlay on top of the image.
Product Name
The "Product Name" element pulls the product title from your Shopify admin dynamically. Therefor the text for it can't be changed in the builder, only the styles. You can access the following style-related settings in the "Main" tab of the sidebar:
Font Name - Choose a font type from the dropdown menu
Font Size - Set the font size of the product name
Font Style - Set the font style (Bold/Italic/Underline/Strikethrough)
Text Color - Set the text color of the product name (hex code or color picker)
📝To use a custom Product Name instead, delete the "Product Name" product element and replace it with the "Text" basic element.
Product Description
The "Product Description" element pulls the product description from your Shopify admin dynamically. Therefor the text for it can't be changed in the builder, only the styles. You can access the following style-related settings in the "Main" tab of the sidebar:
Font Name - Choose a font type from the dropdown menu
Font Size - Set the font size of the product description
Font Style - Set the font style (Bold/Italic/Underline/Strikethrough)
Text Color - Set the text color of the product description (hex code or color picker)
📝To use a custom Product Description instead, delete the "Product Description" product element and replace it with the "Text" basic element.
Price
The "Price" element includes options for how to display the price of the product. You can toggle on/off the following options in the "Layout" tab of the sidebar:
Compare At Price - The product's compare at price pulled from Shopify admin.
Price - The product's price pulled from Shopify admin.
Unit Price - The product's unit price pulled from Shopify admin.
📝You must toggle on the "Show Unit Price" setting at Settings > Section Settings > Buy Box within Zipify Pages for the unit price to be included.Product Discount - The product's discount amount is determined by the "Product Discount" set for it in the "Product" element's settings.
Label - Shown above each price element.
Layout - Choose between Vertically and Horizontally options depending on how you'd like the pricing elements displayed.
The text for each price label included in the price element can also be edited by double-clicking on the label:
📝The discount type and amount set in the "Product" element dictates the values of the pricing elements.
Quantity
The "Quantity" element is how your customer's choose the quantity of the product to add to Cart or Checkout. You can access the following options and style-related settings in the "Main", "Quantity Number" and "Styling" tabs of the sidebar:
Default Quantity - Set the default quantity you want used for the quantity selector on page load.
Font Name - Choose a font type for the quantity number from the dropdown menu.
Font Style - Set the font style (Bold/Italic/Underline) of the quantity number.
Font Color - Set the font color of the quantity number (hex code or color picker).
Icon Color - Set the icon color (-/+) of the quantity element (hex code or color picker).
Background Color - Set the background color of the quantity element (hex code or color picker).
Dynamic Checkout
Include a branded "Dynamic Checkout" button (Amazon Pay, Apple Pay, Google Pay, PayPal, Shop Pay, Venmo) within the Product section. The dynamic checkout button will skip the cart page and redirect to Checkout when clicked.
📝The associated payment method must be connected in your Shopify admin, refer to the guides above for more details. This button does not work with the Discount and Cross-sell features.
You can access the following settings in the sidebar for this element:
Alignment - Choose the alignment of the button with options for Left / Center / Right.
Size - Choose the size of the button with options for Small, Medium, Auto, Full and Custom.
📝The "PayPal" button will be shown in the builder as a placeholder. The kind of dynamic checkout button that displays to your customers on the live page depends on the following factors:
your payment settings
whether Shop Promise is active, which will prioritize Shop Pay over other checkouts
the customer's browser
the customer's device
the customer's personal payment history
Star Rating
The Star Rating element is a social proof element designed to showcase your product rating directly in a Product section. You can access the following settings and options in the "Main" tab of the sidebar:
Integration Review Apps - If you have a supported product review app, choose it from the dropdown to dynamically display the product ratings from your app. Toggle on the "Display Number of Reviews" setting to display the review count next to the rating number.
📝You must already have the supported review app installed and configured on your store to use this option.
Supported reviews apps include:None (rating will be set manually using the "Choose Rating" slider)
Stamped.io
Loox
Judge.me
Product Reviews by Shopify
Opinew
Yotpo
Destination - To make the star rating element clickable, set a destination option from the dropdown menu. Destination options include:
If the "None" option is chosen for the "Integration Review Apps" setting, then use the "Choose Rating" slider or input field to manually set the star rating value.
You are also able to make style-related edits to the "Review Value" element included within the Star Rating element such as: Font Name, Font Size, Font Style and Text Color.
Custom Gallery
The "Custom Gallery" element is a great option for showcasing a carousel of custom images for your product. You can add up to 15 images and 1 video to the carousel.
This element also has the following settings available in the "Main" tab of the sidebar:
Use the "Images Auto Crop" feature to quickly and easily auto-crop all images added to the carousel so they display with consistent dimensions on the page.
The "Restrict Carousel Height" feature limits the carousel's height, regardless of the size of any image/video added.
📝This setting is recommended to be un-checked when either 4:3 or 16:9 Images Auto Crop is selected so that white horizontal stripes within the Image Carousel will be isolated.The "Zoom Image on Hover" setting zooms the carousel image when hovered over.
If you've added a video to the carousel and want it shown first, check the "Use Video as First Element" box.If you'd like to add a "Slide Show" functionality to the carousel, choose the interval time from the presets or use the "Custom" option to add your own time.
In the "Layout" section you can choose from a variety of layout options for the carousel. Different layout options can be used independently on each device type (Desktop/Tablet/Mobile). On mobile for example, you can either show thumbnail images or dots below the carousel.
Use the "Thumbnail Size" setting to set the size of the images in the carousel on each device. Options include S/M/L/XL or Custom
The "Product Variant Behavior" setting has two options available:
Show variant image - the variant image will be shown when a variant is selected.
Leave the same image - the main image will continue to be shown when a variant is selected.
📝Click into the "Border" tab in the sidebar to set the border Style, Color and Size for the carousel.
After you add the element to the Product section, click the "Carousel Options" button in the sidebar and you will be prompted to start adding images (1) from the Image Library and a video (2) if desired:
Once you've added some images, the following additional settings become available in the popup:
Hover over an added image and click the ✏️ to Edit the image
Hover over an added image and click the 🗑️ button to Delete the image
Images can also be rearranged as needed via drag & drop.
Add Images - click the "Add Images" button to add more images to the carousel (up to 15 can be added)
Add Video - click the "Add Video" button to add a video to the carousel. Enter in the video's URL or Embed code from a supported video service. Currently there are 7 video services supported: Wistia, Vimeo, YouTube, Facebook, Dailymotion, Sprout Video and Shopify Video.
Product Gallery
The "Product Gallery" is similar to the "Custom Gallery", except the image(s) and video(s) are pulled from the Shopify admin product listing dynamically, with no ability to use custom images or video. A similar subset of settings for the "Custom Gallery" gone over above are also available for this element.
📝 In the builder, only variant images are displayed. To view all product image(s) and video(s) from the Shopify admin, please check the live/published page.
Variant Selector
The "Variant Selector" element pulls in your variant options from the Shopify admin product listing dynamically. In the "Main" tab of the sidebar settings is the option to "Edit All Variants" where you can choose the style of variant selector to use for each variant option type. Dropdown, Swatches and Text Label options are available:
The following Tabs are also available in the sidebar of the builder to further edit your variant selector styles:
1. In the "Option Name" tab you can edit the variant selector's:
Show/Hide the option name using the "Show Option Name" toggle
Font Name from the available dropdown menu
Font Size from the available dropdown menu
Font Styles (Bold/Italicize/Underline/Strikethrough)
Font Color (Exact color hex code or use the color picker)
2. In the "Option Values" tab you can edit the variant selector's:
Font Name from the available dropdown menu
Font Color (Exact color hex code or use the color picker)
3. In the "Border" tab you can edit the variant selector's:
Active Color - The color shown when the variant selector is hovered over
Inactive Color - The color shown by default when the page is loaded
4. In the "Spacing" tab you can edit the variant selector's:
Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border
Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element
5. In the "Size" tab you can edit the variant selector's:
Color Swatches Size - Preset options of S/M/L/XL are provided
Text Label Size - Preset options of S/M/L are provided
Shop Pay Installments
This element adds the "Shop Pay Installments" widget to your Product section.
To use Shop Pay Installments, you need to be based in the United States, selling in USD, and have both Shopify Payments and Shop Pay activated. You can access Shop Pay Installments in the Shopify Payments settings on your store's Payments page.
📝 You must also enable the Shop Pay Installments Widget by Shopify integration at Settings > Integrations within the Zipify Pages app and set the Product Button destination to either "Cart" or "Checkout" to ensure the widget will be displayed on the live page.
You can access the following style-related settings in the "Main" tab of the sidebar:
Font Name - Choose a font type from the dropdown menu
Font Size - Set the font size of the text included in the widget
Font Style - Set the font style (Bold/Italic/Underline/Strikethrough)
Text Color - Set the text color of the text included in the widget (hex code or color picker)
Cross Sell
Adding a Cross Sell to your Product section can help with increasing average order value, by making it easy for your customers to add related products in-addition to the main product. When you add the "Cross-Sell" element to the Product section, you will be prompted to select up to 3 products to feature in the "Product Select" popup:
After the product(s) have been added, click the ✏️ button on the element to edit the product settings in the sidebar for each product included:
Cross-Sell product setting options in the sidebar include the following:
Drag and drop the cross-sell product into a different position
Expand/Collapse the product settings for a particular product
Change the Product to a different one
Choose product Variants to use (if applicable)
Set a Discount type for a particular product
Add a New Product to the cross-sell section (if applicable)
Delete a Product from the cross-sell section
*Important Notes:
The cross-sell section will only show on your published page if either "Cart" or "Checkout" Destinations are chosen for the Buy Box button.
If a "Dynamic discount" is set for the main product in the Product tab, the Cross-Sell product will use the same discount and can't be set independently from the main product.
In order for the discount you've set to display to be shown on the published page, it's required that the "Display Field Titles" box is checked in the Layout tab of the Buy Box settings.
Click into the "Layout" tab of the Cross-Sell element settings to choose the elements you want included in the cross-sell box and to set the Vertical Alignment setting:
Product Button
The "Product Button" element in the Product section is unique to regular buttons, in that it has both "Add to Cart" and "Checkout" destinations built-in.
In the "Main" tab of the sidebar, the following options and settings are available:
Set the "Call to Action" text for the button and adjust text styles such as Font Name, Font Size and Font Style (bold, italic, underline)
Set the "Destination" for the button, which is where you want the customer be redirected to after the button is clicked.
Destination options include:Add to Cart with 3 additional options for what happens after that:
Load the Cart Page - Add to cart and load the cart page.
Stay on the Same Page - Add to cart and stay on the same page.
📝This option works with Rebuy Smart CartDirect to a Specific URL - Add to cart and direct to a specific URL.
Product - Direct to the Product page (/products) of the product featured in the Product section.
Checkout - Add to cart and load the Checkout page.
Set the button's Hover State and Non-Hover State settings and styles.
Bundle Box
The "Bundle Box" element can be added to the "Product" section directly or to any other section on the page as via the product elements popup:
It is the same as the Mix-and-Match Bundle section, more details available here in this help article.
📝Only the following Product Elements can be used in the Bundle Box:
Shared Settings across Elements
The following Tabs are also available for Product elements in the sidebar of the builder, allowing for further customization of the styles.
📝Choose the device type you'd like to edit the image styles on from the "Edit on" section, prior to making changes. All settings are available in Desktop edit mode, while only certain style edits are available in Tablet/Mobile modes.
1. In the "Background" tab you can edit the element's:
Background Color with two options available:
Solid - A single, uniform color that fills the background consistently, providing a clean and simple look.
Gradient - A smooth transition between two or more colors that adds depth and visual interest to the background.
For both options, you can choose colors using the color picker and slider or by entering a specific Hex or RGB color code in the input field. Transparency is adjustable with the slider or by setting an Alpha value.
For Gradient, you can also set the angle to control the direction of the color transition across the background. This angle, measured in degrees, adjusts the gradient direction as follows:0° for horizontal (left to right)
90° for vertical (top to bottom)
45° for diagonal (top left to bottom right)
135° for diagonal (bottom left to top right)
Changing the angle gives you greater control over the gradient's visual effect and orientation.
Background Image - Set a background image for the image
2. In the "Shape" tab you can edit the element's:
Shape - The shape you'd like used for the image
3. In the "Border" tab you can edit the element's:
Border Style - None, solid, dotted or dashed
Border Size - How thick you want the border to be
Border Color - The color you'd like used for the border
4. In the "Box Shadow" tab you can edit the element's:
Color - The color of the shadow
X offset - The horizontal distance of the shadow. You can use positive values to push the shadow rightwards and negative values to push it leftwards
Y offset - The vertical distance of the shadow. Positive values will push the shadow downwards, while negative values will push it upwards
📝 X and Y offsets can also be set using the pin in the square to the right of the offset fields. The pin can be dragged to set coordinatesBlur - The blurriness of the shadow. Higher values create a more blurred shadow, while lower values create a sharper shadow
Spread - The size of the shadow. Range of allowed values is 0 - 20
5. In the "Spacing" tab you can edit the element's:
Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border
Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element
6. In the "Alignment" tab you can edit the element's:
Alignment - Left/Center/Right
7. In the "Visibility" tab you can choose which device(s) to show the element on:
Show on Desktop
Show on Tablet
Show on Mobile
8. In the "Advanced Settings" tab you can:
See the unique Element ID
Set Custom Class Name(s) for additional CSS editing
