Foodie Theme: Setting up the Product Page
On this page.
- Product media
- Product form options
- Product details
- Product tag groups
- Product page detail image
- Product subtitle
- Product instore only
- Product page content blocks
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.
The Foodie themes product pages support images, video, and 3D Media AR content.
- Thumbnail position
Allows you to select the position of the thumbnail images, choose from Left, Right, and Bottom 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.
- Show border on selected thumbnail
Enables a border below the selected thumbnail image and uses the Accent Color you chose in Theme Settings.
- Enable click to enlarge
Enables a modal window that will show an enlarged version of the image when clicked.
- Enable video looping
When Videos are included within your product media, toggle looping to allow the video to play infinitely.
- Background color
Set the background color of the top half of the product page.
Show quantity selector
Show quantity selector so customers can adjust qty before adding to cart.
- Show Social Share Icons
Toggles displaying icons for social sharing for Pinterest, Twitter and Facebook.
The product detail box will appear below the top section of the Product page. You can select which details are shown on every product page. If a particular product doesn't have one of these details and the setting is on it will just be hidden not blank.
- Show product inventory
- Show product weight
- Show product type
- Show variant sku
- Show product vendor
- Show product collection (if visiting the product page from a collection page this will show)
Product Tag Groups
If you would like to show even more unique details about your products you can use product tag groups which will show along with the other Product Details. To set up product tag groups follow these steps:
- Step 1: From your Shopify Admin go to Online Store > Navigation > click on Add Menu.
- Step 2: The menu title should be the product type (the actual product type you have set on the product in the product admin) and the word details. In this example the product type is set to Coffee so the format for the menu title would be `Coffee: Details` formatting the title this way should automatically give the menu a handle of `coffee-details`.
Step 3: Click add menu item and the name should be whatever you want the title of the tag group, such as Flavors. The link is not important but required so just link it to the Homepage.
Step 4: Click add menu item again, this time the name should be the exact tag you used when setting up the product. So if you tagged your product with Orange you will name this menu item Orange spelled and capitalized exactly the same. The link is not important but required so just link it to the Homepage.
- Step 5: Now drag your newly added tag menu item (Orange) into the Flavors menu as shown. Repeat steps 4 and 5 for all of the tags that exist for your tag group (Flavors).
- You can continue to add Tag Groups/Tags into this menu and then repeat from Step 1 for other Product Types. In this example, if one of our products is Product Type Coffee and it has a tag of Orange the Flavors: Orange product detail will show.
Product page detail image
To show a unique optional product image next to the Product Info/Details box follow these steps:
- Step 1: In the product admin under media upload the image you would like to use.
- Step 2: Once it is uploaded click on it to view the image editor. Click the blue link that says "Edit alt text".
- Step 3: Add `#detail-photo` to the end of your alt text and save.
- This feature only supports one image with the `#detail-photo` alt. Once saved your image will automatically show.
The optional product subtitle is shown below the Product Title on the Product Page and in the Collection Page Grid. To add a subtitle go to the product in the admin and edit the description to add what we call a "shortcode" below your current description text. This should be formatted [#subtitle]Your subtitle content between tags here[/subtitle].
Product instore only
This is a great feature if some of your products are not sold online but only locally in your store locations. Just add the tag Instore Only (typed exactly the same) to your product tags and the add to cart button will disable. To edit the text that shows on the disabled button go to your Shopify Admin > Online Store > Themes > next to the theme you want to edit click Actions > Edit Languages > look for the Products tab and scroll down to Instore only.
Product page content blocks
The Foodie Theme has two content block options which are both optional. These content blocks will show below the Product Info/Details in the order you place them.
- Reviews - This content block works with Shopify's Product Review app.
- Image w/Text - This content block can be used for any extra details that pertain to all products in your shop.