Shopify elements – Product Media

In this article, you’ll learn about another Shopify element named Product Media. The Product Media element allows more diverse media types for your Product display. Let’s check out this article to find out what the changes are, shall we?

About Product Media element

The Product Media element is designed to display your Shopify products on your page to increase your conversion rate. You can use the Product Media element to promote your products on any non-product page or use it on a product page

You can check more details in the video tutorial below.

Access the Product Media element

• Step 1: Click on the Add Shopify element icon in the Element Catalog
• Step 2: Click on the Product Media element in the dropdown menu
• Step 3: Drag and drop the element into the page editor and then start using it.

The Product Media element comes with three common variations but we will continue to add more variations to help you save time. Currently, Product Media Element is now allowing these media types so that you can maximize your product display including:

• Image
• 3D Model
• Video

Note that you can search for this element by using the search function instead of finding it in the sidebar.

Product Media element configuration

Product Media element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate. Select the element in the layout to see its parameters.

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
• Custom Product

Note that if you are in the Product Page and use the Product Media element, then you can choose the Product Source option. However, if you are in a Regular Page and use this element, the Product Source option is disabled and the Custom Product chosen by default.

In Product Page, if you choose Auto, the product that was assigned to this page through Page Assignment will be displayed in the page editor.

General tab configuration

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

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

2. Default Media Source: There are 2 options to choose to display the product media such as:

• 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: This feature only works on the live page.

You can check these products by going to Shopify admin. You can also add/change product images and its orders in the Shopify admin > Product.

3. Enable Full Width

Make the Media to fit with the width of its container (example: column).

4. Media Width

You can adjust Image Width when turning Enable Full Width off.

5. Show Media List

You can choose to show the media list by choosing Yes or No to hide it.

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

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

Note: If you choose to hide the media list, then there are no options with the media list for you.

6. Show Product Badge

A product badge will help to show the discount you have to offer and the number of products that have left to sell.

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

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.

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 configuration

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

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

Nested elements configuration

Main Media

1. Media Ratio

There are three types for you to choose:

• Original : Media will show in original size

• Square : Media will show in square shape

• Custom : You can adjust height of the media

2. Media Height

You can adjust Media Height when selecting Custom in Media Ratio.

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

4. Media Position

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

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

5. Media Hover Action: There are 3 options for you to choose if you want the media can be hover or not

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

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

6. Media Click Action: There are 3 options to choose when clicking on the product media:

• None: Choose this option if you don’t want to have any change 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.

7. Navigation Type:

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

(The Navigation 1 style is the default option)

8. Pagination Type

There are 3 styles that you can pick:

Media List

• Media List Layout: You can choose the layout for the media list and it will be displayed as 1 in 2 options: Slide and Grid.

• Item(s) per Slide: You can set up the number of items displayed in a column here. 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: You can adjust the spacing between the items here. The maximum spacing is 100px.

• Display Partial Items (for Slideshow layout only): You can show the next image partially.

• Navigation Type (for Slideshow layout only): Add navigation arrow icon to the media list. There are 5 options for Navigation Type that you can choose from:

Media List Item

Select the media list item to set up options. The parameters in the Styling tab for the media List Item element include:

• You can style for the 3 states of the header such as
  • Normal state
  • Mouse over state
  • Active / Selected state

• 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

Product Badge

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

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

• 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

You can get further information about OVERALL, SPACING, TYPOGRAPHY, BACKGROUND, BORDER, CUSTOM CSS parameters

If you have followed the above solutions, the sticky section still doesn’t work, please reach out to us via 24/7 in-app Live Chat so that we can help you directly.