Icon Theme: Setting up the Product Page

On this page.

Your product page includes a configurable set of options to shape and display the content that is shared across all products in your store. 

To edit the product page section settings, in the  theme editor open any product or alternatively click on the template picker and choose Product Page.

Product Media

The Icon themes product pages support images, video, and 3D Media AR content.

  • Enable click to enlarge
    Enables a modal window that will show an enlarged version of the image when clicked.
  • Gallery Size
    Gallery size allows the gallery portion of the product page to take more or less width on the page. The options include a range from small, medium, larger, and ultra where ultra takes the most room for the gallery.
  • Gallery Type
    There are two Gallery types available for the display of your product images:
    • Slideshow with thumbnails:
      Shows images in a carousel with accompanying thumbnail images.
    • Scroll gallery:
      Shows larger images one atop the other with a fixed position product form that stays in view as you scroll down the page.

  • Thumbnail position
    Allows you to select the position of the thumbnail images, choose from Left, Right, and Below the main product image.On mobile, the images will resize and thumbnails will be hidden where customers are able to swipe through the main image carousel.

  • Thumbnail Images to Show

    The Thumbnail images to show option specified the number of thumbnail images shown near the image slideshow.
    If the setting is set to zero then no thumbnail images will appear near the image slideshow.

  • Slider control styles
    Choose between arrows or dots to inform customers that more images are available for viewing.

  • Enable video looping
    When Videos are included within your product media, toggle looping to allow the video to play infinitely.

Form options

  • Background color
    Set the color of the form on the right side of your product page.

  • Show Back in Stock Form
    When enabled a form will appear when a variant that is out of stock has been selected allowing customers to enter their email address.

  • Show Social Share Icons
    Toggles displaying icons for social sharing for Pinterest, Twitter and Facebook.

Content Options

  • Product Description Position
    Sets the position of where the product description will appear. Can be set to either above product options, beneath product options or below the product image and options.

  • Lower Description Size
    Set the size to either small, medium or large. Set the background color of the lower description. Only available when the Product Description Position is set to "below the product image and options".

  • Product Shortcode Popups
    Use shortcodes in your product description to show links to popups with unique product-specific content. Learn more.

  • Product Reviews Toggles displaying a Customer Reviews section on the product page. Only works when the free Product Reviews App by Shopify is installed onto the store.

Product page content blocks

The Content Section allows for re-orderable blocks to be used a tabs. Each block becomes a tab that users can click through. The positioning of the tabs are determined from the Product Description Position option mentioned previously. The available tabs include the product description, page content or tab content. There can be a total of 5 blocks added to the content area.

Product page theme settings

The theme settings exist to make changes to content in your store that is used repeatedly.
The following theme settings will also be applied to the Product pages, Home Page featured products section, and products shown within a Quick shop modal.

  • Show variant SKU

    Displays the SKU for the selected variant

  • Show Vendor
    Displays the vendor for products

  • Show quantity selector
    Toggles a quantity selector

  • Show dynamic checkout button
    Lets customers check out directly using a familiar payment method. Learn more

  • Product variant display.
    Toggles between swatch buttons or a dropdown for the selection of product variants

  • Show color swatches
    When swatches are selected from the product variant display (above) you can enable color icons to be used in place of text for variants belonging to a group of options that are named Color or Colour,  so instead of the word: "Red" being shown you will see a Red icon for selection.

  • Color swatch shape
    When swatches are enabled choose between square, rectangular or circular for the display of color swatches.

  • Color swatch style
    When the name of your color variants are matched to names of colors in the HTML color chart each swatch will be filled with it's corresponding color tone, it would be impossible for the color chart to understand and preset the exact shade of Red or Blue your item might be so instead of this you can opt to upload your own custom swatch images or have this swatch filled with an image that has been mapped to your variant image within your product admin.

  • When adding to cart
    When an item is added to the cart, you can choose the action to be presented to the customer.

    • Open modal/drawer cart: Toggles the drawer or modal chosen in your Cart theme settings
    • Go to cart page: Takes the customer to the shopping cart for expedited check out
    • Stay on product page and show message: Show a confirmation but stay on the same page.