Skip to main content
Sign in MENU

Dynamic Product Page Content [Power-Up]

Convertify Team
  • Updated

The Dynamic Product Page Content power-up allows you to insert several different types of content (including expanders, collapsible tabs, buttons, modal windows, pop-ups and more) into product pages on a conditional basis (i.e. only if the product meets your specified criteria).

Common uses for this power-up include:

  • Expandable trust badges (i.e. low price guarantee, money back guarantee, etc.)
  • Expandable/collapsible tabs (i.e. warranty info, shipping info, brand info, etc.)
  • Coupon code (promo code) teasers
  • Sale info/details
  • Newsletter opt-ins
  • Various buttons (more info, sizing chart, variant/option info, etc.)

For each block of content you create, you can specify the exact criteria products must meet (one condition or multiple conditions) in order for the content to be inserted into the page. You can also specify the exact location on the product page that the content should appear.

 

Activating the 'Dynamic Product Page Content' Power-Up

Like all Power-Ups, you can activate the Dynamic Product Page Content power-up by navigating to the Theme Power-Ups page within the Convertify app. Scroll down to the 'Inactive Power-Ups' box, locate the 'Dynamic Product Page Content' card, and click the ON/OFF toggle button to activate it.

After clicking the ON/OFF toggle button, the page will refresh automatically and the 'Dynamic Product Page Content' power-up card will now appear in the 'My Active Power-Ups' box at the top of the page. The power-up is now active.

 

Configuring the 'Dynamic Product Page Content' Power-Up

This section is organized into 3 parts:

  1. Creating a new block of dynamic content
  2. Specifying where content blocks appear on the product page
  3. Managing blocks of content

 

Creating a New Block of Dynamic Content

To begin creating dynamic blocks of content, first click on the 'Customize' button on the 'Dynamic Product Page Content' card on the 'Theme Power-Ups' page in the Convertify app.

At the top of the page, click on the 'Create New Content' button. A modal window will appear, which contains all of the fields and settings for creating a new block of content and specifying which product page(s) it should appear on.

The first setting asks you to choose which style/type of content you would like to add. The 5 options are:

  1. Collapsible tab
  2. Rich text
  3. Button
  4. Image/icon with heading & link
  5. Text with clickable button

These 5 types of content blocks are all quite similar; they just offer different layout options for you to choose from. With all 5 options, certain text/content is displayed on the page and there is a link/button visitors can click to see additional information.

Let's now discuss the fields and settings for each of the 5 styles/layouts.

Collapsible Tab

A collapsible tab simply shows an icon (optional) and short heading within two horizontal lines, with a down-arrow icon on the far right (which makes it clear to visitors that the tab can be clicked to show more content).

Here are the fields and settings for creating a collapsible tab:

  • Icon - Enter the name of any free FontAwesome icon in this format: fa fa-xxxxx.

  • Icon color - Use the color selector tool to choose your desired color for the icon.

  • Heading text - Enter the text to be shown to the right of the icon. This text should be inviting so it entices customers to click the expander to learn more.

  • Heading text color - Use the color selector tool to choose your desired color for the heading text.

  • Heading font size (also applies to icon) - Enter your desired font size (in pixels) for both the heading text and the icon (which will always be the same size).

  • Placement on product page - Use the dropdown menu to select which section/block on the product page this dynamic content will appear in. See below for more information.

  • Expanded content - Use the HTML-enabled field to enter the content that will appear when the expandable/collapsible tab is clicked and expands.

  • Products must match - Use the interface to specify which products you want the content block to be shown on. Select 'All products' if you want it to be inserted into all product pages. Select 'All conditions' if you want to set 2+ conditions (i.e. vendor X AND collection Y) products must meet in order for the content block to be shown. Select 'Any conditions' if you want to show the block of content for products that meet just one out of the conditions you set (i.e. vendor X OR collection Y). Note: If you only plan to set one condition, it doesn't really matter whether you use the 'All conditions' or the 'Any conditions' setting.

Rich Text

This block type allows you to enter any HTML-rich content you'd like, such as images, videos, tables, bullet lists, etc. Here are the fields and settings for creating a rich text content block:

  • Rich text content - Use the HTML-enabled field to enter the content that will appear on the page if the conditions specified below are met.

  • Placement on product page - Use the dropdown menu to select which section/block on the product page this dynamic content will appear in. See below for more information.

  • Products must match - Use the interface to specify which products you want the content block to be shown on. Select 'All products' if you want it to be inserted into all product pages. Select 'All conditions' if you want to set 2+ conditions (i.e. vendor X AND collection Y) products must meet in order for the content block to be shown. Select 'Any conditions' if you want to show the block of content for products that meet just one out of the conditions you set (i.e. vendor X OR collection Y). Note: If you only plan to set one condition, it doesn't really matter whether you use the 'All conditions' or the 'Any conditions' setting.

Button

This is a simple button (containing an icon - if desired - and simple text) that visitors can click to get additional information. Here are the fields and settings for creating a button:

  • Icon (optional) - If you want an icon in the button, enter the name of any free FontAwesome icon in this format: fa fa-xxxxx.

  • Icon color - Use the color selector tool to choose your desired color for the icon.

  • Button text - Enter the text for the button.

  • Button text color - Use the color selector tool to choose your desired color for the button text.

  • Button font size (also applies to icon) - Enter your desired font size (in pixels) for both the button text and the icon (which will always be the same size).

  • Button background color - Use the color selector tool to choose your desired color for the button.

  • Button alignment - Use the dropdown menu to choose whether you want the button to be left-, center- or right-aligned.

  • Placement on product page - Use the dropdown menu to select which section/block on the product page this dynamic content will appear in. See below for more information.

  • Action to take upon click - Choose the button to indicate what should happen when the visitor clicks the button. The options are as follows:

    (1) Expand and show content on page - If you select this option, two additional fields will be shown: i) Expanded content - Enter the HTML-rich content you want to appear below the button after the visitor clicks it; and ii) Close button - Use the dropdown menu to select which style of close button should appear after the content: [X], [Close] or [Hide].

    (2) Show content in modal window (i.e. pop-up) - If you select this option, several additional fields will appear: i) Width of modal window - Enter your desired width (in pixels) for the modal window; ii) Height of modal window - Enter your desired height for the modal window; iii) Modal window background color - Use the color selector tool to choose the background color for the modal window; and iv) HTML content - Enter the content to be displayed in the modal window.

    (3) Open page in a new tab - If you select this option, two additional fields will be shown: i) URL - Enter the full URL (including the "https://" prefix) of the page the button should link to; and ii) Open link a new tab - Check this box if you want the page to open in a new browser tab.

    (4) N/A (button is not clickable) - If you select this option, the button will not be clickable.

  • Products must match - Use the interface to specify which products you want the content block to be shown on. Select 'All products' if you want it to be inserted into all product pages. Select 'All conditions' if you want to set 2+ conditions (i.e. vendor X AND collection Y) products must meet in order for the content block to be shown. Select 'Any conditions' if you want to show the block of content for products that meet just one out of the conditions you set (i.e. vendor X OR collection Y). Note: If you only plan to set one condition, it doesn't really matter whether you use the 'All conditions' or the 'Any conditions' setting.

Image/Icon with Heading & Link

This block type is comprised of 3 components: 1) a 48x48 pixel image or icon on the left, 2) a non-clickable heading (top row of text), and 3) a link visitors can click to see additional information (bottom row of text).

Here are the fields and settings for creating this block:

  • Image or icon - Choose from these 4 options: 1) Image (upload) - Upload a square image that is at least 48x48 pixels in size (the image will automatically be resized to be 48x48 pixels); 2) Image (URL) - Enter the URL of a square image on the web (it will automatically be resized to be 48x48 pixels); 3) Icon (FontAwesome) - Enter the name of any free FontAwesome icon (using the format fa fa-xxxxx) and use the color selector tool to choose the icon's color; or 4) None (text only) - Select this option if you don't want an image or icon to be shown.

  • Heading text - Enter the text for the top row of text. This text will be bold and 20-pixel font size.

  • Heading text color - Use the color selector tool to choose your desired color for the heading text.

  • Link text - Enter the text for the bottom row of text, which will be a clickable link. This text will be underlined and 14-pixel font size.

  • Link color - Use the color selector tool to choose your desired color for the hyperlink text.

  • Placement on product page - Use the dropdown menu to select which section/block on the product page this dynamic content will appear in. See below for more information.

  • Action to take upon click - Choose the button to indicate what should happen when the visitor clicks the hyperlink. The options are as follows:

    (1) Expand and show content on page - If you select this option, two additional fields will be shown: i) Expanded content - Enter the HTML-rich content you want to appear below the block after the visitor clicks it; and ii) Close button - Use the dropdown menu to select which style of close button should appear after the content: [X], [Close] or [Hide].

    (2) Show content in modal window (i.e. pop-up) - If you select this option, several additional fields will appear: i) Width of modal window - Enter your desired width (in pixels) for the modal window; ii) Height of modal window - Enter your desired height for the modal window; iii) Modal window background color - Use the color selector tool to choose the background color for the modal window; and iv) HTML content - Enter the content to be displayed in the modal window.

    (3) Open page in a new tab - If you select this option, two additional fields will be shown: i) URL - Enter the full URL (including the "https://" prefix) of the page the hyperlink should link to; and ii) Open link a new tab - Check this box if you want the page to open in a new browser tab.

    (4) N/A (button is not clickable) - If you select this option, the link will not be clickable.

  • Products must match - Use the interface to specify which products you want the content block to be shown on. Select 'All products' if you want it to be inserted into all product pages. Select 'All conditions' if you want to set 2+ conditions (i.e. vendor X AND collection Y) products must meet in order for the content block to be shown. Select 'Any conditions' if you want to show the block of content for products that meet just one out of the conditions you set (i.e. vendor X OR collection Y). Note: If you only plan to set one condition, it doesn't really matter whether you use the 'All conditions' or the 'Any conditions' setting.

Text with Clickable Button

Here are the fields and settings for creating a collapsible tab:

  • Icon (optional) - If you want an icon in the button, enter the name of any free FontAwesome icon in this format: fa fa-xxxxx.

  • Icon color - Use the color selector tool to choose your desired color for the icon.

  • Button text - Enter the text for the button.

  • Button text color - Use the color selector tool to choose your desired color for the button text.

  • Button font size (also applies to icon) - Enter your desired font size (in pixels) for both the button text and the icon (which will always be the same size).

  • Button background color - Use the color selector tool to choose your desired color for the button.

  • Button alignment - Use the dropdown menu to choose whether you want the button to be left-, center- or right-aligned.

  • Placement on product page - Use the dropdown menu to select which section/block on the product page this dynamic content will appear in. See below for more information.

  • Action to take upon click - Choose the button to indicate what should happen when the visitor clicks the button. The options are as follows:

    (1) Expand and show content on page - If you select this option, two additional fields will be shown: i) Expanded content - Enter the HTML-rich content you want to appear below the button after the visitor clicks it; and ii) Close button - Use the dropdown menu to select which style of close button should appear after the content: [X], [Close] or [Hide].

    (2) Show content in modal window (i.e. pop-up) - If you select this option, several additional fields will appear: i) Width of modal window - Enter your desired width (in pixels) for the modal window; ii) Height of modal window - Enter your desired height for the modal window; iii) Modal window background color - Use the color selector tool to choose the background color for the modal window; and iv) HTML content - Enter the content to be displayed in the modal window.

    (3) Open page in a new tab - If you select this option, two additional fields will be shown: i) URL - Enter the full URL (including the "https://" prefix) of the page the button should link to; and ii) Open link a new tab - Check this box if you want the page to open in a new browser tab.

    (4) N/A (button is not clickable) - If you select this option, the button will not be clickable.

  • Products must match - Use the interface to specify which products you want the content block to be shown on. Select 'All products' if you want it to be inserted into all product pages. Select 'All conditions' if you want to set 2+ conditions (i.e. vendor X AND collection Y) products must meet in order for the content block to be shown. Select 'Any conditions' if you want to show the block of content for products that meet just one out of the conditions you set (i.e. vendor X OR collection Y). Note: If you only plan to set one condition, it doesn't really matter whether you use the 'All conditions' or the 'Any conditions' setting.

'Product-Specific Tabs' which has a single setting: H tag for new tab. Using this drop-down menu, you can select which type of heading (i.e. H1, H2, H3, H4, H5 or H6) you can use within the product description of any product to automatically create a new tab for that product (as explained in this section below). For example, if you select 'H5' in this drop-down menu, adding an H5 heading to a product description will create a new tab for that product.

Below the 'Conditional and Static Tabs' table (which lists all of the tabs you've created, if any), you'll see a 'Settings' section which contains all of the settings for this power-up. They are as follows:

  • Style/layout for tabs widget - Select your preferred style for displaying the tabs: a) traditional tabs, b) slider options or c) accordion.

  • Active tab highlight color - Use the color selector tool to choose the highlight (accent) color for the active (open) tab. If you've selected the traditional tabs style, the highlight color appears across the top of the active tab. If you've selected the slider options style, the highlight color appears underneath the text of the open tab. If you've select the accordion style, the highlight color is used for the horizontal line above and below the open tab.

  • Display options for tabs widget - This setting allows you to specify where you want the tabs widget to appear on the product page and whether you want the product description to be separate from or combined with the tabs widget...

    Option 1 is to combine the tabs widget with the product description, in which case the 1st tab will be the product description. You can enter the name/title for the description tab (typically "Description", but some store owners may prefer "Specifications", "Specs", "Details" or another title) as well as the name of a FontAwesome icon (i.e. fa fa-info-circle) if you want an icon to be shown in front of the tab title.

    Option 2 is to show the tabs widget in the 'Product information' section of the product page (to the right of the product images) separate from the product description. If you choose this option, you'll need to go into Theme Editor, navigate to the product page, activate the 'Product Tabs (Power-Ups)' block (within the 'Product information' section), and then drag & drop that block to the location you want the tabs widget to appear. (Click here for more information about this.)

    Option 3 also shows the tabs widget separate from the product description, but in this case the tabs will use the full width of the page (not in the 'Product information' section to the right of the product images). Similar to Option 2, you will specify where you want the tabs widget to appear on the page by going into Theme Editor, navigating to the product page, activating the 'Product Tabs (Power-Ups)' section, and then dragging & dropping the section to the location you want the tabs widget to appear (more info here).

  • Mobile default view - Choose how you want the tabs widget to load on mobile devices: a) only the first panel (tab) opened by default, b) no panels (tabs) opened by default, or c) all panels (tabs) opened by default.

 

Specifying Where Content Blocks Appear on the Product Page

Regardless of which type of dynamic content block you create, there is always a setting called 'Placement on product page' with these 6 options:

  1. Dynamic block 1
  2. Dynamic block 2
  3. Dynamic block 3
  4. Dynamic section 1
  5. Dynamic section 2
  6. Dynamic section 3

Notice that the first 3 options are blocks while the other 3 options are sections. The three block options are in the 'Product information' section on the product page and will therefore appear in the right column (to the right of the product images). The three section options are their own stand-alone sections and use the full width of the page. These can appear above the 'Product information' section or below it, based on how you set it up in Theme Editor.

To specify where each of these dynamic blocks and/or sections will go on the product page, do the following:

  1. Open Shopify Theme Editor.

  2. Navigate to any product page.

  3. In the left panel, you will see that the 'Product information' section already has 'Dynamic block 1' activated by default. (If you want to activate 'Dynamic block 2' and/or 'Dynamic block 3', simply click the 'Add block' link and select it/them in the list of block options.) Use the MOVE icon(s) to drag and drop the block(s) to your desired position(s) within the 'Product information' section.

  4. In the left panel, you will also see that 'Dynamic section 1' is activated by default and appears below both the 'Product information' and 'Product description' sections. (If you want to activate 'Dynamic section 2' and/or 'Dynamic section 3', simply click the 'Add section' towards the bottom of the left panel and select it/them in the list of section options.) Use the MOVE icon(s) to drag and drop the section(s) to your desired position(s) on the product page.

All content blocks that you select 'Dynamic block 1' for the 'Placement on product page' option will appear on the product page in the position you've chosen for 'Dynamic block 1' within Theme Editor (and the same thing for the other 5 blocks/sections).

If you select 'Dynamic block 1' for multiple content blocks, they will all appear in the location you've specified for 'Dyanamic block 1' in Theme Editor. The order in which they're shown on the page will be based on their sort order (i.e. priority order) in the content block table. You can drag & drop the content blocks to be in your preferred order using the MOVE icons in the 'Priority' column (which is the 1st column in the table).

 

Managing Blocks of Content

The table at the top of the page lists all of the content blocks you've created. These are the columns in the table:

  • Priority - Use the MOVE icons in this column to drag & drop the content blocks to put them in the sort (priority) order you prefer. The priority order really only matters amongst blocks that are assigned the same 'Placement on product page' (since they are all shown in the same location on the product page, as specified in Theme Editor).

  • Status - Use the ON/OFF toggle button to temporarily deactivate a content block so it's not shown on the product page.

  • Heading - This column shows the heading (or button name) of the content block.

  • Position - This column shows which 'Dynamic block/section' you have assigned the block to for purposes of determining where it appears on the product page. See above for more information.

  • Condition(s) - This column lists the condition(s) products must meet in order for the content block to be shown on the product page.

  • Actions - This column contains 3 buttons: 1) Edit - clock this button to edit the content block; 2) Duplicate - click this button to copy (duplicate) the content block so you can quickly create a similar block; and 3) Delete - click this button to permanently delete a content block.

Related articles

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk