All Collections
Zipify Pages - Tutorials & Documentation
Buy Boxes
Product Elements [Zipify Pages]
Product Elements [Zipify Pages]

Discover how to utilize Product Elements to have unrestricted editing capabilities in the Product section!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

Overview

Product Elements are 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" 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:

  1. Click the "Change Product" button to select a different product.

  2. Click the "Choose Variants" button choose specific variant(s) to use.
    📝All variants are selected by default.

  3. Set a "Product Discount" type from the dropdown menu. There are 6 Discount options available:

    1. None - No discount will be shown.

    2. Percent (Dynamic) - Show a % based discount which auto-applies at Checkout.

    3. Fixed (Dynamic) - Show a $ based discount which auto-applies at Checkout.

    4. 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.

    5. Percent (Static) - Show a % based discount. No discount auto-applies at Checkout.

    6. Fixed (Static) - Show a $ based discount. No discount auto-applies at Checkout.

  4. Set the "Default Product Quantity" you'd like used for the product.

  5. Access "Layout" options for the product element, including Vertical Alignment (Top/Middle/Bottom) and two different Layout options.

Grid (Coming Soon!)

Product Image

For the "Product Image" element you can access the following settings and options in the "Main" tab of the sidebar:

  1. Set the "Default product image" setting from the dropdown:

    1. Shopify Variant Image - The image for the product’s first variant is displayed.

    2. Shopify Product Image - Your main corresponding Shopify product image is displayed.

    3. Custom - The custom image you select will be displayed as the product image.
      📝 All image options support variant image switching on the published page.

  2. Crop Image - If the "Custom" image option is chosen.

  3. Change Image - When selecting a new image, the default product image setting will automatically change to "Custom".

  4. 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.

  5. Set a Destination for the image to make it clickable.

    1. If the "Inherit from Button" box is checked, the image will inherit the same destination as the Product Button element within the same section.

    2. If the "Inherit from Button" box is not checked, select a destination option from the dropdown:

      1. None - The image will have no destination and not be clickable.

      2. Cart - The image will redirect to the Cart Page (/cart) on your store when clicked. No product will be added to cart.

      3. Product - The image will redirect to a specific chosen Product page (/products) when clicked.

  6. Set a Hover State option for the image from the dropdown:

    1. None (default)

    2. Hover Image - Show an alternate image when hovered over

    3. Color Overlay - Show a color overlay when hovered over

    4. 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)

  7. 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:

  1. Font Name - Choose a font type from the dropdown menu

  2. Font Size - Set the font size of the product name

  3. Font Style - Set the font style (Bold/Italic/Underline/Strikethrough)

  4. 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:

  1. Font Name - Choose a font type from the dropdown menu

  2. Font Size - Set the font size of the product description

  3. Font Style - Set the font style (Bold/Italic/Underline/Strikethrough)

  4. 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:

  1. Compare At Price - The product's compare at price pulled from Shopify admin.

  2. Price - The product's price pulled from Shopify admin.

  3. 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.

  4. Product Discount - The product's discount amount is determined by the "Product Discount" set for it in the "Product" element's settings.

  5. Label - Shown above each price element.

  6. 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:

  1. Default Quantity - Set the default quantity you want used for the quantity selector on page load.

  2. Font Name - Choose a font type for the quantity number from the dropdown menu.

  3. Font Style - Set the font style (Bold/Italic/Underline) of the quantity number.

  4. Font Color - Set the font color of the quantity number (hex code or color picker).

  5. Icon Color - Set the icon color (-/+) of the quantity element (hex code or color picker).

  6. 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:

  1. Alignment - Choose the alignment of the button with options for Left / Center / Right.

  2. 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:

  1. 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:

    1. None (rating will be set manually using the "Choose Rating" slider)

    2. Stamped.io

    3. Loox

    4. Judge.me

    5. Product Reviews by Shopify

    6. Opinew

    7. Yotpo

  2. Destination - To make the star rating element clickable, set a destination option from the dropdown menu. Destination options include:
    ​

  3. 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.

  4. 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.
    ​

Static Image Carousel

The "Static Image Carousel" 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 does not work with dynamic variant image switching.

This element also has Image Auto Crop, Slide Show, Thumbnail Position, Mobile Image Thumbnails and Border settings.

After you add the element to the Product section, 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:

  1. Add Images - click the "Add Images" button to add more images to the carousel (up to 15 can be added)

  2. Hover over an added image and click the ✏️ to Edit the image or the 🗑️ button to Delete the image. Images can also be rearranged as needed via drag & drop.

  3. 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, SproutVideo and Shopify Video.

  4. 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" option restricts the height of the carousel, regardless of how tall an image added is.
    📝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.

  5. 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.

  6. The "Thumbnail Position" setting determines where the thumbnail images show in relation to the featured image. Options for bottom or left of the featured image are available.
    The "Mobile Image Thumbnails" setting determines how the thumbnails show on mobile. You can either show thumbnail images or dots.

  7. Click into the "Border" settings where you can set the border Style, Color and Size for the carousel.

Shopify Image Carousel

The "Shopify Image Carousel" is similar to the "Static Image Carousel", 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 "Static Image Carousel" gone over above are also available for this element.


📝 This element does work with dynamic variant image switching. 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:

  1. Font Name - Choose a font type from the dropdown menu

  2. Font Size - Set the font size of the text included in the widget

  3. Font Style - Set the font style (Bold/Italic/Underline/Strikethrough)

  4. 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:

  1. Drag and drop the cross-sell product into a different position

  2. Expand/Collapse the product settings for a particular product

  3. Change the Product to a different one

  4. Choose product Variants to use (if applicable)

  5. Set a Discount type for a particular product

  6. Add a New Product to the cross-sell section (if applicable)

  7. 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:

  1. 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)

  2. Set the "Destination" for the button, which is where you want the customer be redirected to after the button is clicked.
    Destination options include:

    1. Add to Cart with 3 additional options for what happens after that:

      1. Load the Cart Page - Add to cart and load the cart page.

      2. Stay on the Same Page - Add to cart and stay on the same page.

      3. Direct to a Specific URL - Add to cart and direct to a specific URL.

    2. Product - Direct to the Product page (/products) of the product featured in the Product section.

    3. Checkout - Add to cart and load the Checkout page.

  3. 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.

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 - Set a background color for the image

  • 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 coordinates

  • Blur - 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

Did this answer your question?