How to Customize a Product Page

Getting Started

The Product Page customization is a convenient tool to use when aiming to customize the general format of the Default Products page. When you customize the features on this page, it will affect and customize the features of all of your product pages.

Please note that specific product information and details are not customized here, but under your MyShopify Product's tab.

Finding the Product Page

In order to find the customization screen for and adjust your Product Page, please follow these steps:

From your myShopify homepage, go to Online Store > Themes
Find and click Customize
Find the drop-down menu at the top center of your screen labeled Home Page
Drop down and select Products > Default Product
On the customization panel on the left side of the screen, find and select Product Page

Customizing the Product Page

Once you have found and opened the Product Page customization menu, you will notice several general areas for customization. Please find them below:

Settings
- Show Vendor
- Show SKU
- Show Share Buttons
- Show Price Taxes Notice
- Selector Type
- Color Selector Type
- Show Out of Stock Variants
- Show Out of Stock Email Signup
- Show Quantity Selector
- Show Dynamic Checkout Button
- Show Local Pickup Availability
Media
- Size
- Enable Video Looping
- Enable Image Zoom
- Desktop Zoom Effect
- Transition Effect
Inventory
- Show Inventory Quantity
- Low Inventory Threshold
Content
- Display Mode
Reviews
- Enable
- Show Badge
Trust
- Heading
- Show Payment Icons
- Security Badge
- Security Badge Width
Discounts
- Show Discount Label
- Show Discount As
Shipping Estimator
- Show Shipping Estimator
- Default Country
- Show Refunds Policy
Theme Settings
- iWish
- Manage Comics 2

Settings

This section includes general settings concerning how the product and purchasing information are presented. We recommend playing around with these settings to better understand their placements and uses and to see how they are displayed on your product page.

Show Vendor

This section includes a tick box allowing for the display of the product's vendor to be enabled or disabled. Vendor customization is possible in your MyShopify's Products tab.

Show SKU

This section includes a tick box allowing for the display of the product's SKU to be enable or disabled. SKU customization is possible in your MyShopify's Products tab.

This section includes a tick box allowing for the display of social media sharing buttons. Customization of your socials links can be found under Header customization. You can find information on your customizing your header at How to Customize the Header.

Show Price Taxes Notice

This section includes a tick box allowing for the display of price taxes notifications. Tax notice customization is possible in your MyShopify's Products tab.

Selector Type

This section includes a drop-down menu allowing for a choice between Block and Dropdown. The Block feature allows for all varieties of the product to be displayed in side by side in clickable, selectable blocks. The Dropdown feature allows for all of the products to be displayed in a drop-down feature for selection.

Color Selector Type

This section includes a drop-down menu allowing for a choice between Block, Dropdown, Color Swatch, and Variant Image. These features adjust how different variants can be displayed according to their pre-assigned colors. These colors can be set in the product's customization page.

Show Out of Stock Variants

This section includes a tick box allowing for the display of product variants that are out of stock when selected. When deselected, all variants will be visible. It is important to note that if Selector Type is set to Dropdown, all of the variants will be visible regardless. If deselected and Selector Type is set to Block, out of stock variants will include mark through text.

This section includes a drop-down menu giving the choice between Disable and Enable. When set to Enable, this will allow customers to easily email you if they are interested once a product is back in stock. If set to Disable, there will be no such option.

Show Quantity Selector

This section includes a tick box allowing for the display of a quantity counter. This counter controls how many of a product will be added to your cart.

Show Dynamic Checkout Button

This section includes a tick box allowing for a custom checkout button that allows for each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay.

Show Local Pickup Availability

This section includes a tick box allowing for the display of a preset pick up location when enabled. If disabled, this pick up availability will not be displayed.

Media

This section includes settings focused specifically on the media used to display the product.

Size

This section includes a drop-down menu dedicated to adjusting the size of the image displaying the product presented.

Enable Video Looping

This section includes a tick box allowing for the looping of any video being displayed on the product page. If no video is added, then this effect will do nothing.

Enable Image Zoom

This section includes a tick box allowing for a zoom effect to be enabled when hovering your mouse of an attached image of the product. If this section is disable, there will be no zooming effect.

Desktop Zoom Effect

This section includes a drop-down menu displaying options for either Outside or Inside. If Outside is selected, the section being hovered over will be magnified in a rectangle outside of the image. If Inside is chosen, a magnifying circle will appear over the area of the image that your mouse is hovering over.

Transition Effect

This section includes a drop-down menus displaying options specific to how images will transition as you scroll through them. The two options are Fade and Slide. We recommend playing around with these settings to find the effect that fits your website best.

Inventory

This section includes settings specific to how inventory and and inventory options for the given product will be displayed.

Show Inventory Quantity

This section includes a tick box allowing for the display of the inventory's quantity. If disabled, there will be no notice of the product's inventory.

Low Inventory Threshold

This section includes a scrolling cline allowing for an alert to be given when the quantity falls below a certain amount. This feature uses low stock color when quantity is below the threshold. Choosing 0 will always show in stock. The threshold can be set between 0 and 100.

Content

This section includes settings specific to how the content descriptions for each product are displayed.

Display Mode

This section includes a drop-down menu allowing for a choice between one of four content display options. These are: Show All, Show All and Expand Description, Collapse All, Collapse All Except Description. We recommend playing around with each of these options to find the display option that best fits your store's style.

Reviews

This section includes settings specific to how the product review section will be displayed. Before customizing any settings, you need to install Shopify's free Product Reviews application.

Enable

This section includes a tick box allowing for the Reviews section to be enable or disabled, depending on whether or not the tick box is checked.

Show Badge

This section includes a tick box allowing for the display of badges specific to the reviews. If your product does not have any reviews available yet, then no badges will be present.

Trust

This section focuses on the customization of settings specific to payment and payment methods.

Heading

This section includes a text box allowing for the customization of the Heading, or section title, for your store's Trust section.

Show Payment Icons

This section includes a tick box allowing for the display of all of your store's accepted forms of payment. These forms are pre-set in your store's general settings.

Security Badge

Within this section, you will notice that you have the ability to add a logo image. You have the ability to add your Security Badge by selecting Select image. Once added, this badge will sit below your payment icons. Please note that the recommended image size is beneath this section. It will look something like this:

If your image doesn't meet these specifications, it will not properly fit.

The recommended image size is calculated as the optimal size across many possible screen sizes (PC monitors of differing sizes, Mac, mobile, tablet, etc.)

After you have chosen your image, you will notice another customization option become available: Add alt text.

Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text feature

Security Badge Width

This section includes a rolling cline that allows for the Security Badge size to be customized. This cline focuses on the width of the badge specifically; it ranges from 100 to 500. We recommend finding a size and width that best fits your store's style and needs.

Discounts

This section includes settings specific to the customization of your product's Discount section.

Show Discount Label

This section includes a tick box allowing for a notification of the product discount. If left unchecked, then no discount notification will be displayed.

Show Discount As

This section includes a drop-down menu holding two options: Saving and Percentage. Saving will show the discount amount in the currency of your store, whereas the Percentage will display the discount amount difference as a percentage of the product's original price.

Shipping Estimator

This section includes settings specific to the customization of your store's shipping estimator.

Show Shipping Estimator

This section includes a tick box allowing for the display of your store's shipping estimator. It is important to note that this estimator will only display if the product is in stock.

Default Country

This section includes a text box allowing for the input of the default country that your store will be shipping the product to. If your customers are logged into their account, their address country will be used in the estimator.

Show Refunds Policy

This section includes a tick box allowing for the displaying of your store's refund policy. Your Refunds Policy must be added beforehand in your store's policy sections.

Theme Settings

At the bottom of the customization sidebar, you will notice a drop down arrow under the Theme Settings section. Here, you will see two sections: iWish and Manage Comics 2.

iWish

This section includes a tick box allowing for the use of the iWish application. In order to use this app, your store has to already have it downloaded.

Manage Comics 2

This section includes a tick box allowing for the use of the Manage Comics 2 application. In order to use this app, your store has to already have it downloaded.