About The Product Media Element
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 Element
- 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
You can also access the Product Media element by searching it in the Search box.
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 Element
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 Settings
The General tab is where you find all the customizations to set up your product media.
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.
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.
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
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.
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}}.
- 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.
- 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.
Styling Settings
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 Media
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 Settings
- 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 Media
- 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:
General Settings
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 |
Media Height
You can adjust the height of main media sub-element.
Media Position
In Square and Custom types, you can select the position for the media inside its container.
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 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. |
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.
Pagination Type
There are 3 styles for you to set up.
Styling Settings
You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, and CUSTOM CSS parameters here
How To Configure Media List Sub-Element in Product Media
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 Settings
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 Settings
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 Media
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.
Border
- 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.
Effects
- 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 Cases
How To Change Product Media?
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?
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 & Practices
- 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 Questions
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.
Previous article
