Fashionopolism 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

  • Enable click to enlarge
    Enables a modal window that will show an enlarged version of the image when clicked.
  • 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.
  • Enable video looping
    When Videos are included within your product media, toggle looping to allow the video to play infinitely.
  • Show social icons
    Toggles visibility of social sharing icons for Facebook, Twitter, and Pinterest

Product content options

  • Tab text content
    Adds tabbed content to your product description area
  • Tab contact form
    Adds a contact form to your tabbed content allowing product questions from customers

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

  • 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.
  • Show variant SKU
    Displays the SKU for the selected variant
  • Show quantity selector
    Toggles a quantity selector
  • Show dynamic checkout button
    Lets customers check out directly using a familiar payment method. Learn more
  • 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

Product text banner section

This optional section allows text blocks to be added to the page that will show in a grid layout at different widths dependent on the number of blocks selected, ranging from 1 to 3.

Settings

  • Enable text section
    Checkbox allowing this section to appear on the page
  • Heading & Text size
    Control the size of text within this section
  • Vertical padding
    Controls the height of this section and spacing between the text and its outermost edges
  • Space between columns
    Control how much space will be shown between each text block
  • Colors
    Set the background and text color of this section
  • Add divider between columns
    Add a thin vertical border between each block

Content

Content for this section consists of text blocks that will show horizontally aligned to one another
- When 1 text block is used the content will center on the page.
- When 2 text blocks are used each will take 50% of the page width.
- When 3 text blocks are used each will take 33% of the page width.

Product image overlay section

The product image overlay will add a large horizontally oriented banner image to the page which includes parallax scrolling and text that overlays on top of the image.

  • Enable image with text overlay
    Checkbox allowing this section to appear on the page
  • Image
    Upload a landscape-oriented image, 1800px x 800-1000px recommended
  • Add overlay
    Adds a slightly darkened overlay to the image which will help text contrast
  • Image effect
    Choose between a parallax scrolling or static image
  • Image scale
    Sets the scale of the image which will increase or decrease the parallax scrolling effect when enabled
  • Image height
    Control the height of the image as it appears on the page
  • Text content & style
    Add text, links and choose color and layout styles for any added text captions.

Product recommendations

  • Show dynamic recommendations
    Checkbox allowing this section to appear on the page
  • Heading
    Optionally adds a heading to this section
  • Product grid
    Choose how many products are shown and how many per row
  • Show product vendor
    Toggles the visibility of the product vendor