Theme blocks

Add, arrange and customize Product page theme blocks

The Palo Alto 'Product pages' section blocks help you customize the primary or core content for your product pages and product templates. Adding sections further enhances your merchandising.

Types of theme blocks

Palo Alto includes the following theme blocks for product pages/templates:

• Title and price

• Inventory countdown

• Form

• Product Description

• Accordions

• Upsell

• Share button

• Pickup availability

• Custom Liquid

• Popup text

• Text

• Icon

• Divider

Title and price

Render

Displays product price, title, and star rating when using the Shopify Ratings app. Includes an option to display Navigation breadcrumb above the title (including vendor option, see settings)

Settings

Navigation options

• None

• Breadcrumb

• Collection

• Vendor

If the product price is set to $0, it's replaced by a translatable string - 'Free'.

If you want to change this text you can go into your Online Store > Themes and click on Actions > Edit Languages:

Edit Languages

Search for free in the Filter bar and edit the field under General > Money > Free:

Update value to change the text for any language

Inventory countdown

Render

Display a notification about the current inventory quantity. If there are less than 10 products available this block will show how many are left.

Settings

No customizable settings.

Form

Render

Displays all buying-related elements including product variants and swatches, quantity selector, the add to cart button, and the buy it now button.

An optional size chart link is placed above the variant options.

Settings

• Size chart - Dynamic source supported

• Show variant labels

• Show quantity selector

• Show dynamic checkout buttons

• Subscription selectors (with supported app)

• Icon with text

Product Description

Render

Show the product description text on the product pages.

Settings

No customizable settings.

Accordions

Render

Displays accordions separately from your product description.

Settings

• Tab heading - Dynamic source supported

• Tab content - Dynamic source supported

Upsell

Render

Display an upsell product on your page and in the cart.

When selecting a product for the 'Buy it with' promotion, we recommend you choose products with one variant.

Settings

Select the upsell product. It will only be displayed in the product page.

You can also use a metafield Namespace and key 'theme.upsell' to allow product upsells to follow users into the cart.

Settings > Metafields

Learn more about our cart Upsell feature here.

Share button

Render

Displays a share icon for sharing the current product page on social media platforms.

Settings

Set the text for the 'Share' button.

Pickup availability

Render

Displays where customers can pick up the product.

Settings

No customizable settings. See Shopify documentation for setup details.

Custom Liquid

Render

Add your own 'liquid' code to implement custom features or app functionality.

Settings

Single text field to copy and paste liquid code.

Please note that this field doesn't have any debugging capabilities. Make sure that your code is correct before pasting it to avoid any errors.

Popup text

Render

Create a slide-out block with extra text. Perfect to showcase policies or a chart with extra information.

Settings

• Button text - Dynamic source supported

• Page link - Dynamic source supported

Text

Render

Add more details about your products.

Settings

• Text field - Dynamic source supported

• Text alignment selector

Icon

Render

Add bits of information with icons to your product description pages.

Settings

Icon

• Select an icon

• Icon color - Dynamic source supported

• Replacement Image - Dynamic source supported

• Width (Icon size)

Text

• Heading - Dynamic source supported

• Size (text size)

Layout

• Width

• Alignment

• Background color - Dynamic source supported

• Padding toggle

Divider

A simple line with top and bottom spacing settings.