Media and layout

With the Big Image Media and Layout Settings, you can customize the product page to highlight the best aspects of your products.

Settings to customize

In the main level of the product section you can: 

  • Enable breadcrumbs.
  • Select suitable color scheme that complements your store design.
  • Select the product image aspect ratio:
    • Natural 
    • Portrait 2:3 
    • Portrait 3:4
    • Square 1:1
    • Landscape 4:3
  • Choose media fit: Fill or Original.
  • Set Image Background color if needed.
    • Examples for CSS code:
      • Gradient: linear-gradient(red 0%, blue 50%, green 100%)
      • Card background color: var(--color-card-background)

Desktop layout settings

  • Image position: Choose whether the image appears on the left, center or right.
    When Image is set to center:
  • Image size: Select a size to fit your store's design, XS, S, M, L or XL.
  • First content column top margin: Adjust the vertical space above the first column.
    Image is set to center:

When Image position is Center

When the image is centered, the content columns will automatically split to the left and right. In addition the following settings can be adjusted:

  • Image horizontal offset: Adjust the image's horizontal alignment.
  • Allow content to overlap image: Enable to let the text and images overlap.
  • Second content column top margin: Adjust the vertical space above the second column.

Tablet layout settings

On tablet and mobile devices the content columns are displayed below the product featured image.

  • Extend tabled breakpoint:
    • When enabled the tablet layout will be used up to 1200px viewports. This will give more room for content columns.
  • When the image position is center, Single column layout can be selected to display the split content columns in a single column on tablet and mobile devices.

Mobile layout

On mobile devices the content columns will be displayed in a single column below the product featured image.

Hotspots

  • Select hotspot color: Default, Invert dot colors, Invert title colors, Invert both

Note: More hotspots related settings can be found from Theme settings > Buttons > Hotspots.

Collapsible rows

  • Enable collapsible rows to open as drawers.

Sticky buy bar

  • Show or hide a sticky buy bar.
  • Choose its color scheme.

After the section level settings, continue customizing with Product section Blocks.

    Recommendations section

    Product recommendations section is a static section which is displayed below currently viewed product and it shows a list of product recommendations.

    Its logic is based on different factors. Please refer to this guide to learn more about Shopify product recommendations logic and to this guide to learn how to further customize these recommendations.