“How can product pages be customized?”

Context provides feature-filled product pages. The features help product pages stand out and connect customers to your other products with full width promotional image features and a recently viewed products widget.

Product page with all product page features enabled

There are various sections that can be enabled on product pages:

Product pages

You can tweak the product information display to be sleeker or more informational.

Show vendor
Show the product vendor.

Vendor is a field on each product you create in your Shopify dashboard’s Products section.

Show social sharing buttons
Show social sharing buttons underneath the product description.

You can enable share buttons from the Social media settings.

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

Learn more about dynamic checkout buttons from Shopify’s Dynamic checkout buttons article.

Text columns with images

Similar to the text columns with images home page section, you can feature up to three columns of text with images on your product pages.

Note that the columns you set up here appear on every product page. (You can’t set these up for each product page individually.)

This section is perfect for outlining product features, return policies, or telling your customers why your store is special.

Text columns with images

Of course, images are optional if you would rather just display one, two or three columns of text.

Text columns without images

Settings

You can optionally provide a heading and subheading that is displayed before the columns of text.

Heading
Add optional text for the heading of this section.
Subheading
Add an optional subheading or description. We recommend keeping this to a line or two.

Section style

Section style settings allow you to change the look of the section you are editing without changing the look of all the others.

You can change the style of many home page and product page sections across the site.

Outline section
Select this checkbox to remove the section’s background color and outline the section with a border instead. See an example

Outline section

When you enable an Outline section setting, it removes the section background, letting your store’s global background color to show through. It then adds a border around the section, which uses your store’s border color setting.

Outline section disabled (left) and enabled (right)

For more information about color settings, see the Colors article.

Content

For each column you want to display, you can add a content block and enter the content. Use the Add column button to add a block.

Image
Add an optional image to be displayed at the top of the column.
Max image width
You can manually set how large the column’s image should appear.

The minimum width is 10% of the column, and the maximum width is 100% of the column.

Heading
Add text for the heading of the column.
Subheading
Add subheading text for the column.
Link
Paste a URL or add a link for display at the bottom of the column.
Link text
Add text to be displayed for the link.

Product photos

If you have multiple product images for your products, you can present the images in a full-width section below the main product information.

Enable grid of product images
Select this checkbox to enable the grid of product images.

Full width images

Similar to the full width image home page section, you can feature full width marketing images on your product pages.

Note that the images you set up here appear on every product page. (You can’t set these up for each product page individually.)

Full width image on desktop

Using the provided settings, you can easily change the text alignment and button styles to accommodate your images.

Full with image on desktop with different settings

On mobile devices, your images are scaled and cropped. We recommend double-checking that your images look great at both aspect ratios when uploading.

Full width image on mobile

Content

You can add multiple full width images to your product pages. For each one that you want to add, use the Add feature button.

Image
Add an image.
Overlay opacity
You can add a colored overlay to your full width image. And, you can set how visible the overlay is. 0% is completely transparent, and 100% is completely visible.
Overlay color
You can change the color of the overlay.

We recommend using black or white, as these colors will look great with a wide variety of images.

Text color
You can change the text color for text overlaying the full width image.
Heading
Add heading text. We recommend keeping this to a few words.
Subheading text
Add a subheading or description. We recommend keeping this to a line or two.
Max width of text
You can adjust the width available to the heading and subheading text.

We recommend adjusting this and checking the live preview to get it just right for your image.

Link
Paste a URL or add a link to a page in your store.
Link text
Add text that should be used for your link.
Link style
You can change the link style to Button or Link with arrow.
Horizontal text position
You can change the horizontal text position to Left, Center or Right.

We recommend adjusting this and checking the live preview to get it just right for your image.

Vertical text position
You can change the vertical text position to Top, Middle or Bottom.

We recommend adjusting this and checking the live preview to get it just right for your image.

Collection pages include a featured blog posts section. For more information, see the Featured blog posts article.

Recently viewed products

Collection pages include a recently viewed products section. For more information, see the Recently viewed products article.