Product page – User Guides

A beautifully crafted product page to sell your products.

What is the product page?

A beautifully crafted product page helps customers to discover and fall in love with your products. The Beautify theme is designed to help create the perfect page that reflects your brand and presents all the critical information required. Highlight selling points, show inventory levels and utilize collapsible tabs to display important details such as ingredients or application guidelines. Take the customer experience a step further with our innovative video testimonials block, allowing you to present expert advice, video user guides and authentic social proof.

Well-designed product pages can drive higher conversion rates, encourage upselling, strengthen brand identity and improve search engine rankings.

How to set up the product page

Display your products to perfection with the Beautify theme's range of product media layouts and settings.

Steps

Open the Theme Editor and select Products from the dropdown at the top and choose a product template (e.g. default product).
Click on Product to edit core settings which control the layout of the product page.
Select the Media layouts.
Set the Zoom behavior.
Choose whether to Enable the Sticky add to cart.
Use the Multiple variant images settings to control which media are shown.
Select one of the pre-loaded blocks to begin customizing its settings, or click Add block to choose a block from the list.

How to set up the media layout

The product page is broadly divided into two columns, with media on the left hand side and the product form on the right. Use the Sticky media column setting to keep the two sides of the page in synch and avoid blank space.

The Beautify theme offers two options for the Layout on large screens:

Stacked - All product images are displayed in a vertical stack with a scrollbar
Slider - A gallery shows one image at a time with the option of thumbnails

A slider layout is always used on mobile devices.

The Media size setting to adjust the size of images applies to all layouts. The Media aspect ratio and Media crop can be adjusted to best work with your product imagery. This is particularly useful when images are not the same dimensions. Select Enable video looping if you wish videos to loop.

Stacked layout

The Stacked layout is best used when product media is consistently sized. Images are vertically stacked in a choice of layouts showing either one or two images per row.

In the Stacked layout, use the setting Scroll to variant media to control whether the page scrolls automatically such that the image linked to the current variant is in view. The Underline active media setting will underline the relevant image for the selected variant which may be useful if Scroll to variant media is not selected. An Autoplay videos setting is also included for the Stacked layout. Videos will be muted when autoplay is selected.

Slider layout

The Slider is the best option when space is at a premium. Choose whether to Show thumbnails underneath the slider layout.

Mobile layout

Mobile devices will always show images in a slider. Images will be shown in a carousel with a sliver of the following image visible to encourage scrolling. For an alternative full width layout on mobile, select Show a full width slider on mobile. This full width layout can be effective if some images have a transparent or white background. Choose whether to Show thumbnails underneath the slider layout.

Zoom

A product zoom is available in Beautify which allows customers to zoom in to specific areas of product images. To use this feature, select the Enable zoom setting and set the Zoom level. The image will not be magnified beyond the original image size. To activate the product zoom on mobiles and small screens, select Enable lightbox on mobile.

Colors

Use the settings under Colors to adjust the Slider thumbnail border and Media background color.

Tip

The Media background color setting will be overridden when the Blend product images settings is enabled.

Sticky "Add to cart"

This is a small overlay summary of the product, which shows as a floating prompt when customers have scrolled past the main product details. Set the Position and choose whether to Show on mobile.

Multiple variant images

If product images are sorted by color, for example when selling the same item in different colors, the Show media only associated with the selected variant setting can be used to show images of only the selected color. In other words, selecting the option 'Red' will only show the red images of the item. Choose the relevant Variant option label. Please refer to the Multiple variant images guide for more detailed guidance.

How to use blocks on the product page

The Beautify theme has a wide range of blocks that can be used to improve functionality and enhance the appearance of the Product form. The Collapsible content, Custom Liquid, Custom option, Divider, Image, Link, Product subtitle, Pop-up, Rich text, Video testimonials and Selling points blocks can be added multiple times, while all other blocks are limited to a single instance. Blocks can also be rearranged, reordered, or hidden as needed.

Steps

Open the Theme Editor.
Select Products from the dropdown at the top and choose the desired product template.
Click Add block to choose a block from the list to add to the section, or select one of the pre-loaded blocks, to begin customizing its settings.

Product labels block

Show additional information in Product labels. See the settings in Theme settings > Product labels to customize the content, color and visibility of product labels. The sale label has an additional control to allow it to be hidden on the product page to leave more space for other information. Refer to the Product labels guide for further information.

Title block

Displays the product title. If required the title can also be prefaced by the vendor name using the setting Show vendor as part of title.

Product rating block

To display a rating add the Product rating block into the product form where required, and install a product reviews app. Refer to the Product reviews guide for more.

Price block

Shows the product price and, if the variant is reduced in price, the Shopify compare at price. Sale prices can be shown in different color. Colors are managed in Theme settings > Colors. The setting Show percentage reduction can be used to further emphasize a sale. If a unit price is used, this is also displayed.

Tax and shipping information can be shown under the price. The currency can be shown using the setting Show currency codes setting under Theme Settings > Currency.

Variant picker block

The Variant picker block is used to display pertinent product selection information such as color swatches and sizes. Standard variant options are shown in boxes.

The Show availability in selectors setting will indicate availability using a diagonal line or text. Availability updates automatically as customers change their selections. A second setting, Update availability only in subsequent options, can be used to refine this behaviour so it works using a top down method. This cascading approach is particularly useful in stores where products have combinations that are unavailable or frequently sold out.

Choose whether to Show backorder text when an out of stock item can still be purchased and the inventory is managed by Shopify.

Under Size guide, there are customizable settings to Enable size guide. Refer to the Size guide article for more detailed guidance.

Swatches and Shade picker

Beautify recognises that the cosmetics industry is particularly focussed on color and shade so the the theme includes additional features to help customers to find and review the available color variants. Read more about showing swatches and a shade filter in the variant picker block in the Swatches and shade picker guide.

Custom option block

Add additional custom content blocks for personalised products, customer details or additional product preferences.

Steps

From the Shopify admin area, open the Theme editor.
Select Products from the dropdown at the top and choose the desired product template.
In the left-hand settings panel, click Add block and select Custom option.
Select Show in quick shop to show the custom option picker in the quick shop drawer.
Add a custom option Label and, importantly, ensure that the name is unique.
Choose the appropriate custom option type - Text, Long text. Checkbox or Dropdown and determine if the text should be required.

Tip

It is important that each custom option has a unique Label. Text and long text can only be set to required if the Add to Cart button is used. They will not be required when using accelerated checkout methods (Dynamic checkout button).

Inventory status block

The Inventory status block is an excellent way of providing customers with a visual representation of stock levels.

By choosing the Show inventory indicator bar setting, a horizontal indicator bar will display a visual representation of the current stock levels. Set the Visibility and Thresholds for very low and low inventory. Under Urgency messages, a number of inputs have been included that can be used to set custom text to display when stock levels reach a particular threshold.

Buy buttons block

Controls to Show quantity selector, Show accelerated checkout buttons, Show pickup availability and the option to Show recipient information form for gift cards are all held in this block.

Video testimonials block

Enrich the customer experience with our innovative video testimonials block, allowing you to present expert advice, video user guides and authentic social proof. Add a Heading if required. Select up to 6 videos or choose Include product video to automatically show videos from the product's own media. Set the Preview width and a Border color.

Collapsible content block

Organize content and declutter product pages by using collapsible content blocks. This can help keep product card content 'above the fold'. a great way to present additional product and/or brand information to your customers in a visually interesting way, to avoid overloading the product form. The block will be automatically hidden if there is no content to show, for example if metafields have been used and a given product has no content.

Set the Heading, Icon (optional) and Content for each collapsible content block. Content can be added directly to the tab in the theme editor, pulled from pages or metafields. There is also a Liquid code option which may be useful for apps. Choose if the tab should be Open by default.

Selling points block

Pick a Heading and choose a Carousel or column layout for up to six selling points. For each selling point, choose an Icon or Image and Text (if needed).

Complementary products block

To further enhance the functionality of the product form, the Complementary products block can be used in conjunction with the Search & Discovery app to display a range of related products.

Customize the block Heading using the text input provided and adjust the Maximum products to show with the range slider.

Share block

Make it easy for customers to share links to your products using the sharing block with individual settings for X (formerly Twitter), Facebook and Pinterest.

Custom liquid block

The custom liquid block is for developers who require a block in which to add liquid code.

Divider block

Use the divider block to add space or dividing lines between different blocks. Blocks on the product page can be positioned in any order and sometimes a layout may require some additional space or a line to enhance the user experience and make the page easier to use. Choose whether to Show line or just add space. Set the Spacing to be Default or Large.

Note

Use Divider blocks to add space or space and a divider line between other blocks if this is needed to create the layout you require.

Link block

A Link block with a choice of styles is available which allows a clickable URL to be added to the page.

Image block

Additional graphics can be inserted into the product form by adding an Image block. With the Image block selected, enter a Heading in the input provided (if required), select the Image source, adjust the image Width and Alignment and add a Link to the image (if required).

Newsletter sign-up block

Add a newsletter sign up block with additional Heading and Text.

Pop-up block

A Pop-up can be added to the product form which can be used to display additional details and information such as size charts.

Choose the Link text and the Link style. The Content to display in the Pop-up can be entered in the input provided, or it can be pulled from page content in the store using Select page.

Weight block

The weight block will display the variant weight.

Barcode block

A block showing only the barcode, ISBN or UPC. This can also be shown within the Vendor / SKU / Barcode block.

Payment installments block

Add this block to display ShopPay installments information and choose whether to Show in box.

Rich text block

The rich text block includes the option to add text and links.

Vendor / SKU / Barcode block

The Vendor / SKU / Barcode block can show the vendor, SKU and barcode side-by-side. The SKU and barcode will automatically update depending on the selected variant.

The barcode can also be added as a separate block using the Barcode block. If you require the vendor and SKU to be on separate lines, use this block to only show the SKU and then add a Rich text block, and use a dynamic source to show the vendor.

In Beautify, the vendor can be a link to a page showing all products by that vendor. Alternatively, the vendor can be shown prefacing the product title. If this layout is preferred, go to the Title block and select Show vendor as part of title.

Tip

The vendor can be used as a link to a page showing all products by that vendor. If you'd prefer this link to go to a specific collection page, give that collection page the same handle as the vendor page handle.

In the Shopify admin area, go to Products > Collections and click on the relevant collection.
Scroll down to the Search engine listing panel, and click Edit.
Change the URL handle of the page to match the handle of the vendor.

The handle of the vendor will normally be a lowercase version of the vendor name, with dashes instead of spaces. For example, if the vendor name is 'Example vendor', the handle should be 'example-vendor'.

Product type block

The product type block will display the product type chosen in Admin > Products. Choose whether to Show as a link.

Description block

Show the product description and select whether to Show as collapsible content. When the collapsible content layout is chosen, a Collapsible content icon can be displayed to make the layout consistent with other collapsible content blocks and the tab can be closed or Open by default.

Product subtitle block

The product subtitle is a standard product metafield definition by Shopify. Standard metafield definitions exist in Shopify for some common use cases. The namespace and key for the product subtitle metafield is descriptors.subtitle

Cross-selling

Suggesting other related products and cross-selling is a key function of the product page. In addition to the Complementary products block, the related products section can be used to showcase other recommended products.

Related products section

The recommendation logic that controls which products are displayed to customers is not determined by the theme, but by the Shopify platform. This is the same for all themes. Use automated recommendations or create specific recommendations using Shopify's Search & Discovery app. The theme allows you to control the Layout of the products in this section by choosing a Grid or Carousel layout and setting the Maximum products to show on mobile and desktop.

Swatches

The Beautify theme supports Shopify swatches. Refer to the swatches and shade picker guide for more.

Beautify combined products

The Beautify theme allows you to link together products into groups and display them as a single product on the product page. Refer to our combined products guide for more.

Templates

Beautify is supplied with three templates for the product page - the Default product template, a Preorder template and a Gift wrap template. Read more about templates in Shopify's templates guide.

Tip

Settings will be applied to all products using the selected template, not just the product currently in view. To show different blocks or sections on different products, assign alternative templates or, for an individual approach, use Shopify metafields to add unique content.

Preorder template

Use this template to display a Pre-order button.

Steps

From the Admin, go to Products. Select the product to be assigned to the preorder template. (Please note the theme must be published in order to select the template)
Under Theme template, select preorder.
Save changes.

Tip

To create a new preorder template, base it on the existing preorder template and include the word preorder in the name. Make sure to set your products to "Continue selling when out of stock" so that the products do not appear to be "Sold out".

FAQs

Why can't I assign my product to one of the product templates?

Beautify (or any theme) has to be the published theme before the Shopify dashboard will provide the option of assigning the templates to products.

How do I show breadcrumbs?

The Beautify theme can show breadcrumbs at the top of the product page on desktop only or on both desktop and mobile. This is controlled in Theme settings > Design > Breadcrumbs. Some sites may prefer to save space on the mobile product page and therefore do not select Show product breadcrumb on mobile.

To include the collection name within the breadcrumb, use the setting Theme Settings > Product cards > Include collection in URL.

How do I hide the Buy it Now/dynamic checkout button?

Dynamic checkout buttons or "Buy it Now" show under the main add to cart button on the product page and allow a customer to proceed directly to the checkout with just one item. Switch this feature off using the Buy block settings. Refer to the Shopify article Adding and removing dynamic checkout buttons for more details.

How do I add a product subtitle?

Note

Product subtitles are a more complex feature that require a base level understanding of how metafields work. For support on metafields, refer to the Shopify metafields guide.

Steps

In the Shopify admin area, add the Shopify Product subtitle metafield using the standard Shopify product subtitle definition. The namespace and key for the product subtitle metafield is descriptors.subtitle.
In the Shopify admin area, edit products to add a subtitle.
Open the Theme editor and navigate to Theme settings > Product cards
Select Show product subtitle to show the subtitle on the product card.

How do I show different collapsible content per product?

Content for blocks such as the collapsible content block can be drawn from compatible product metafields. This can be useful for care or sizing information, materials, ingredients or many other product specific details. Metafields and metaobjects are a standard feature in Shopify. Refer to the Shopify metafields guide for more information.

Steps

To use metafields to hold product specific content shown in a collapsible tab on the product page, open the Shopify admin and go to Settings > Custom data.
Click on Products to create a new product metafield for your content. The metafield should be a type that can contain text. There are several types available.
In the Shopify admin, go to Products, edit a product and find the newly created metafield. Enter your content in the metafield and save the changes. There are also bulk editing options for products available in Shopify.
Open the Theme editor, and select Products and the desired product template from the dropdown at the top.
View the product page and scroll to your collapsible content block. Next to Collapsible content select the Connect dynamic source icon to add your metafield/metafields.

Metafields of the appropriate type held in metaobjects can also be used.

Tip

The Bulk Editor is a helpful tool to quickly update metafields and other attributes across all your products.

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!