Shopify Product Media Element | How to Use with PageFly

1. About the Product Media ElementClick to copy

1.1. What is Shopify Product Media Element?Click to copy

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.

1.2. Access the Product Media ElementClick to copy

  • 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

product media

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.

1.3. Shopify Product Media VariationsClick to copy

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

2. Product Media Element ConfigurationClick 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.

2.1. General ConfigurationClick to copy

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

2.1.1. Product SourceClick to copy

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.

product media

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.

2.1.2. Main Media SourceClick to copy

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.

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 its orders.

2.1.3. Enable Full WidthClick to copy

By enabling the full-width option, the media will take the full-width size of the screen.

product media

2.1.4. Media WidthClick to copy

To adjust Media Width, turn off the Enable Full Width.

 

media with

2.1.5. Show Media ListClick to copy

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

product media

  • Media List Position: You can choose the position for the list with 4 choices: Top, Right, Bottom, and Left.

product media

  • Media List Size: You can adjust the size when selecting on Media list element.

Note: You can’t change the size of the media list if you disable Show Media List option.

2.1.6. Show BadgeClick to copy

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.

product media

  • Show Badge: Enable this option if you want to show a badge on your product media
  • Badge Position: 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.

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.

2.2. Styling ConfigurationClick to copy

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

You can also refer to this video tutorial about product details elements.

3. Nested Elements ConfigurationClick to copy

Check out guide to setup the Main Media

3.1. Media RatioClick to copy

There are three types for you to choose from:

  • Original: Media will show in original size

product media

  • Square : Media will show in square shape

product media

  • Custom : You can adjust height of the media

product media

3.2. Media HeightClick to copy

This option is enabled when you select Custom in Media Ratio. Adjust the slider to customize the Media Height.

product media

3.3. Media Object FitClick to copy

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

Cover: Media will stretch to fit with the container

product media

  • Contain: Media will squeeze to stay inside its container

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

3.4. Media PositionClick to copy

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

product media

If the media fit with its container, the Media position will show like this

product media

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

3.5. Media Hover ActionClick to copy

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

product media

  • 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
    • Next Image: Show the next image of the featured media.
    • Last Image: Show the last image of the featured media.
    • Random Image: Show random an image of the featured media.
    • All Images: Show multiple media when moving the mouse cursor on the product media.

product media

Note that Media hover action will NOT work on touch-based devices like tablets or smartphones.

3.6. Media Click ActionClick to copy

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.

3.7. Navigation TypeClick to copy

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

product media

Note: The Navigation 1 style is the default option.

3.8. Pagination TypeClick to copy

There are 3 styles for you to set up.

product media

4. Media ListClick to copy

4.1. Media List LayoutClick to copy

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

product media

4.2. Item(s) per Row (for Grid layout only)Click to copy

  • 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(s) To Scroll (for both Grid and Slideshow layout): You can adjust the number of items per scroll here.

product media

4.3. Items Spacing (for both Grid and Slideshow layout)Click to copy

Adjust the slider to customize the spacing between each item. The maximum spacing is 100px.

product media

4.4. Item(s) per Show (for Slideshow layout only)Click to copy

Customize how many items will be displayed within a column. The maximum number is 12 items.

product media

4.5. Item(s) To Scroll (for Slideshow layout only)Click to copy

You can adjust the number of items per scroll here.

4.6. Display Partial Items (for Slideshow layout only) 

Click on Yes if you want to make the previous & next item(s) partially visible.

product media

4.7. Navigation Type (for Slideshow layout only)Click to copy

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.

product media

5. Media List ItemClick to copy

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

product media

5.1. 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.

product media

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

  • Border Color: You can also change the border-top color to fit your store design.

product media

5.2. 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.

product media

5.3. Product BadgeClick to copy

Turn on the Enable Badge to set up options for it. Click on the Badge to proceed to further settings.

product media

  • Text: The Text box shows discounts or stock left of the product variant. You can also add custom content for that badge.

Note that the “Discount” and “Stock” are calculated based on the value of the selected product variant.

product media

  • Apply Product Condition: There are 2 conditions to be applied:
    • Belongs to Collection(s): All Collections; Custom Collection(s): The badge is only shown when the product belongs to the selected collection(s).
    • Contain Tag(s): The badge is only shown when the product contains one of the defined tags.

You can get further information about ATTRIBUTES, VISIBILITY parameters here

You can get further information about OVERALL, SPACING, TYPOGRAPHY, BACKGROUND, BORDER, and CUSTOM CSS parameters with PageFly Element Styling.

6. Frequently Asked QuestionsClick to copy

6.1. What is product media Shopify?Click to copy

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

6.2. What size is Shopify product media?Click to copy

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

6.3. How many product images Shopify?Click to copy

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

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us