About The Product Media Element
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.
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 section:
- Main Media
- Media List
How To Access The Product Media Element
- Step 1: From PageFly’s Dashboard, go to the page listing and choose the page you want to edit
- Step 2: In the Editor, on the left sidebar, click on Add shopify element
- Step 3: Click on the Product Media element in the dropdown menu
- Step 4: 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.
You can check this video tutorial for more visualization:
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.
- 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: There are 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 its 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: You can choose the position for the list with 4 choices: Top, Right, Bottom, and Left.
- Show Badge: A product badge dynamically displays the discounts and limited stock remaining.
If you want to show badge on your product media, enable Show Badge option. There are 4 positions for you to choose: Top Left, Top Right, Bottom Left, and Bottom Right.
For further details about ATTRIBUTES, VISIBILITY, ANIMATION parameters, check out this article.
Styling Settings
You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, CUSTOM CSS parameters here
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
- 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 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 Position: In Square and Custom types, you can select the position for the media inside its container.
- Media Hover Action: There are 3 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. |
| Show Hover Image | When mouse over on the product media element, the hover media will replace the default media after 0.3s delay. There are 4 types of hovering to select
|
- 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 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, 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
- Media List Layout: You can choose the media list layout, which will be displayed in 2 options: Slideshow or Grid.
- Item(s) per Row (for Grid layout only): You can set up the number of items displayed in a column here. The maximum number is 12 items
- Item Spacing (for Grid layout only): Adjust the slider to customize the spacing between each item. The maximum spacing is 100px
- Item(s) displayed (For Slideshow Layout Only): Customize how many items will be displayed within a column. The maximum number is 12 items
- Item(s) to scroll (For Slideshow Layout Only): You can adjust the number of items per scroll here
- Item(s) spacing (For Slideshow Layout Only): 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. There are 5 options for Navigation Type as you can see in the picture below.
Styling Settings
You can get further information about SPACING, BACKGROUND, BORDER, DISPLAY, CUSTOM CSS parameters here
How To Configure Media List Item Sub-Element In Product Media?
Media list item is a sub-element of 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.
There are 3 styling options including:
- Normal state
- Mouse over state
- Active / Selected state
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.
- Border Color: You can also change the border-top color to fit your store design.
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, 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 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 desired position
Best Practices For Using Product Media
- 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
Frequently Asked Questions
What Is Product Media Shopify?
There are three types of product media: images, 3D models and videos.
What Size Is Shopify Product Media?
Up to 4472 x 4472 px, or 20 megapixels, maximum of 20MB.
How Many Product Images Shopify?
Up to 250 photos for one product, as it can be in .png, .gif and .jpg formats.
