Shopify Product Media Element | How to Use with PageFly

About The Product Media ElementClick to copy

Summary: Shopify Product Media element is designed to display your Shopify products on your page. You can use the Product Media element to showcase your products with images, videos, and 3D models.

You can check more details in the video tutorial below.

Product Media consists of 2 sub-elements, which are Main Media and Media List. Learn how to access and configure each sub-element in these sections:

  • Main Media
  • Media List

How To Access The Product Media ElementClick to copy

  • Step 1: In the Editor, on the left sidebar, click on Elements
  • Step 2: In the “Shopify” tab, click on the Product Media element
  • Step 3: Drag and drop the element into the page editor and then start editing

Access The Product Media Element

You can also access the Product Media element by searching it in the Search box.

Note: You can use the Product Media element on any non-product page or use it on a product page. However, it needs to be nested inside the Product Details section.

The Product Media element comes with three common variants. To showcase products in more exciting ways, the Product Media element supports three media types which are:

  • Image
  • 3D Model
  • Video

How To Configure For Product Media ElementClick to copy

When clicking on the Product Media element, you will see various types of parameters that help you fine-tune the look however you want.

General SettingsClick to copy

The General tab is where you find all the customizations to set up your product media.

General settings of product media element

Product Source

When you drag and drop the Product Media element into the editor page, there are 2 choices for the Product Source option for you to choose from:

  • Auto: The product that was assigned to this page through Page Assignment will be displayed in the page editor. This option is only applied on the Product page or when the Product media element is located inside the Product details element. For other circumstances, you need to choose the Custom product option below.
  • Custom Product: You can choose Custom Product and select the product you want.

Note: If you are on the Product Page and use the Product Media element, then you can choose the Product Source option. If you are on a Regular Page and use this element, the Product Source option is disabled and the Custom Product is chosen by default.

Enable Full Width

By enabling the full-width option, the media will take the full-width size of the screen. Otherwise, you can adjust the media width by dragging the black dot or by entering a number in the box on the right.

Main Media Source

The “Default variant media” will be selected by default.

There are other two options in the drop-down menu:

  • Featured Media: show the media in the Media section of the product inside Shopify. To change the featured media, go to the product details in your Shopify admin.
  • First Variant Media: show the first variant media of the product you set inside Shopify.

Main Media Source

Note: The First Variant Media feature only works on the live page.

If you want to make any changes, go to the Shopify admin > Click on Products > Choose All Products > Select the product you want to edit. You can add/change product images and their orders.

Show Media List

You can choose to show the media list by choosing Yes. If you want to hide it, select No.

Media List Position

The media list position option will be enabled if you select “Yes” for Show media list above.

There are 4 options to choose:

  • Top
  • Right
  • Bottom
  • Left

Media List Position

Show Badge

A product badge dynamically displays the discounts and limited stock remaining.

If you want to show a badge on your product media, enable Show Badge option.

By clicking on the badge, you can also edit the text for the Product badge in the “General” tab. The default “Discount” parameter and “Stock” parameter are calculated based on the value of selected product variants.

Show Badge

Besides, the “Apply product condition” toggle gives you control over whether or not certain conditions must be met before showing the badge. By selecting “Yes,” you’re enabling the option for the badge to appear only if certain conditions are fulfilled. These conditions are based on the number of rules you set, defined by the placeholders {{count}} and {{total}}.

apply product condition

  • Belongs to Collection(s): You can choose whether the product should belong to specific collections for the badge to appear. Selecting “All collections” means the condition is ignored, while choosing a specific collection limits the badge display to those products.

Belongs to Collection(s)

  • Contain Tag(s): This option allows you to specify certain product tags.

For example, in the Product page in Shopify, if you set the product price at $15, and the compare-at price at 20%, then the discount at 25% will be calculated and displayed by default. The default stock is also based on the number of products left in the Inventory.

Plus, you can also type a custom discount and stock number for a specific product variant.

Badge Position

Depending on the available options, you can choose to place the badge at the top, bottom, left, or right of the product image.

The “Styling” tab offers other styling settings for Product badges such as spacing, margin, font size, etc.

For further details about ATTRIBUTES, VISIBILITY, and ANIMATION parameters, check out this article.

Note: For Laptop, Tablet & Mobile view, when the users have not made any changes for media width, ratio or show media list – it will show the state of unset and inherit from All Devices.

Styling SettingsClick to copy

You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, and CUSTOM CSS parameters here.

Legacy Editor – How to Configure Main Media Sub-Element In Product MediaClick to copy

Main Media is a sub-element of Product Media. You can access the main media by clicking on the largest product picture in the Product Media element:

General SettingsClick to copy

  • Navigation type

There are 5 types of navigation. On desktop and laptop, some options only appear on mouse over.

  • Pagination type

There are 3 styles for you to set up.

  • Media hover action

Media hover action will NOT work with videos, 3D models, and touch-based devices like tablets or smartphones.

  • Media click action

There are 3 options to choose from when clicking on the product media:

None Choose this option if you don’t want to have any changes when clicking on the media
Link to Product Choose this option if you want to link the image to the corresponding product
Show Media Gallery Choose the option if you want to view full-screen with taps/clicks on the media
  • Media ratio

There are three types for you to choose from:

  • Original: Media will show in original size
  • Square: Media will be shown in square shape
  • Custom: You can adjust the height of the media

Gen 2 Editor – How To Configure Main Media Sub-Element In Product MediaClick to copy

Important note:
  • Gen 2 Editor Beta is now closed. Pages and sections created with Gen 2 Editor will remain fully functional. Enhanced version will be coming soon.
  • Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).

Main Media is a sub-element of Product Media. You can access the main media by clicking on the largest product picture in the Product Media element:

Gen 2 Editor - How To Configure Main Media Sub-Element In Product Media

General SettingsClick to copy

Media Ratio

There are three types for you to choose from:

  • Original: Media will show in original size
  • Square: Media will be shown in square shape
  • Custom: You can adjust the height of the media

Media Object Fit

In Square and Custom type, you can resize media to fit its container:

Cover Media will stretch to fit with the container
Contain Media will squeeze to stay inside its container

Note: This option is disabled if you choose the original media ratio.

Media Height

You can adjust the height of main media sub-element.

Note: This option is disabled if you choose the original and Square media ratio.

Media Position

In Square and Custom types, you can select the position for the media inside its container.

Note: If you choose the original media ratio, this option is disabled.

Image loading

There are 3 options:

  • Lazy loading: Only load the image when it’s scrolled into view to improve page speed
  • Eager: Queue the image to start loading in advance
  • Standard: Normal image loading

Media type

You can switch between Slideshow or Single Image to display the Main media element.

media type

Media Hover Action

There are 2 options for you to choose from which are:

None  Choose this option if you don’t want the product media to be hover
Enable Image Magnifier Each media list of the product media will be magnified when you hover on each of them.

Note that Media hover action will NOT work with videos, 3D models, and touch-based devices like tablets or smartphones.

Media Click Action

There are 3 options to choose from when clicking on the product media:

None Choose this option if you don’t want to have any changes when clicking on the media
Link to Product Choose this option if you want to link the image to the corresponding product
Show Media Gallery Choose the option if you want to view full-screen with taps/clicks on the media

On the Mobile device, you can double-tap to zoom in on the product media and double-tap again to zoom out.

Navigation Type

There are 5 options for Navigation Type that you can choose from.

Note: The Navigation 1 style is the default option.

Pagination Type

There are 3 styles for you to set up.

Styling SettingsClick to copy

You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, and CUSTOM CSS parameters here

How To Configure Media List Sub-Element in Product MediaClick to copy

Media list is a sub-element of Product Media. You can access the media list by clicking on the section where many product images are displayed in the Product Media element:

General SettingsClick to copy

Content Media List Layout: You can choose the media list layout, which will be displayed in 2 options: Grid or Slideshow.

Grid

  • Item(s) per Row: You can set up the number of items displayed in a column here. The maximum number is 12 items
  • Item Spacing: Adjust the slider to customize the spacing between each item. The maximum spacing is 100px

Slideshow

  • Item(s) displayed: Customize how many items will be displayed within a column. The maximum number is 12 items
  • Item(s) to scroll: You can adjust the number of items per scroll here
  • Item(s) spacing: Adjust the slider to customize the spacing between each item. The maximum spacing is 100px
  • Display Partial Items (For Slideshow Layout Only): Click on Yes if you want to make the previous & next item(s) partially visible.
  • Navigation Type (For Slideshow Layout Only): This option adds a navigation arrow icon to the media list.

Styling SettingsClick to copy

You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, and CUSTOM CSS parameters here.

How To Configure Media List Item Sub-Element In Product MediaClick to copy

Media list item is a sub-element of the media list. When you click on the Media List Item, in the right sidebar, the Styling tab will display many parameters to customize the media.

BorderClick to copy

  • Border Style: You can choose one of 4 border styles for each state. Click on the More Settings button to set up the Border Width and Border Radius.

 

Note: The Border Width option is available when you choose the Mouse over state or Active / Selected state.

EffectsClick to copy

  • Opacity: You can adjust the opacity by dragging this bar
  • Shadow: Turn on this option if you want to drop the shadow effect on your media.

You can get further information about ATTRIBUTES, and VISIBILITY parameters here.

Common CasesClick to copy

How To Change Product Media?Click to copy

PageFly only uses product data configured in Shopify so if you want to change product media, you need to do it in Shopify, not in PageFly.

  • Step 1: Go to Shopify admin > Product > Select a product

Step 2: Change the media of the selected product by clicking edit in the media section

How To Reorder Product Media?Click to copy

PageFly only uses product data configured in Shopify so if you want to change the order of product media, you need to do it in Shopify, not in PageFly.

  • Step 1: Go to Shopify admin > Product > Select a product

  • Step 2: Drag product media to the desired position

Tips & PracticesClick to copy

  • Use high-resolution product images (main image and zoom functionality if available) that showcase the product from multiple angles and in use (if applicable)
  •  Ensure product images clearly display important details like size, color variations, textures, and functionality
  • Place the product media element prominently on product pages, ideally near the “Add to Cart” button. All related elements should be put into a Product details element to work together.

Frequently Asked QuestionsClick to copy

1. What is Product Media Shopify?

There are three types of product media:  images, 3D models, and videos.

2. What size is Shopify Product Media?

Up to 4472 x 4472 px, or 20 megapixels, maximum of 20mb.

3. How many product images are Shopify?

Up to 250 photos for one product, as it can be in .png, .gif, and .jpg formats.

Additional ResourcesClick to copy

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us