Product media
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
Summary: 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
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
When clicking on the Product Media element, you will see various types of parameters that help you fine-tune the look however you want.
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.
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:
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:
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
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:
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:
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:
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:
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 Mobile devices, you can double-tap to zoom in and see all the details, then double-tap again to zoom out. Remember, this only works when you open the media gallery.
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.
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:
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.
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 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.
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.
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
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
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.
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.
For further details about ATTRIBUTES, VISIBILITY, and ANIMATION parameters, check out .
You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, and CUSTOM CSS parameters
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, and CUSTOM CSS parameters
You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, and CUSTOM CSS parameters
You can get further information about ATTRIBUTES, and VISIBILITY parameters
