Skip to main content

: Product Page Content Blocks

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Top, middle dropdown
  4. Products
  5. Default product
  6. Product pages
  7. Left column, access content blocks using black arrow next to 'Product pages'
  8. Add block

Recommended reading

In this section...

 

Slide

Enable slide

Condense the content and allow the user to click an icon to expand/open the content to view

 

Icon

Select an icon to be used from the preset list. You can view the icons on the 'What Icons are Included?' FAQ page

 

Icon color

Preferred color of the icon. Defaults to the color assigned to the Headings color

 

Icon highlight color

Some icons have elements that can be assigned a different color. Defaults to the Accent color

 

Custom icon

Add your own icon. It is recommended to use an SVG or PNG file to keep the icons sharp

 

Icon size

Set the icon size with the slider. 10px is the minimum, and it steps up by 1 to a maximum of 36px

 

Slide heading

Add a title for the slide open button

 

Heading size

Set the heading size with the slider. 10px is the minimum, and it steps up by 1 to a maximum of 30px

 

Text size

Set the size of the content with the slider. 8px is the minimum, and it steps up by 1 to a maximum of 30px

 

Vendor

Text size

Set the size of the content with the slider. 8px is the minimum, and it steps up by 1 to a maximum of 30px

 

Title

Use h1 tag

For SEO purposes, set the 'Heading' to use an h1 tag. NOTE: This should only be used once per page

 

Heading font

Choose either the 'Primary' or 'Secondary' heading font set in Theme Settings > Typography

 

Heading outline

Choose from 1 of 7 options:

  • None: No outline will be applied
  • No background: An outline will be applied to the text, but the background will be transparent
    • Thin
    • Default
    • Thick
  • Background: An outline will be applied to the text, and the background color will be applied
    • Thin
    • Default
    • Thick

 

Heading size

Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 240px

 

Bottom margin

Customize the bottom margin of the heading from the default to a dynamic value. -100px is the minimum, and it steps up by 5 to a maximum of 100px

 

Color

Choose a custom color for the heading

 

Responsive size

By default, text will resize based on the size of the screen. Uncheck this option to keep the text a consistent, static size. Useful when using negative margins on preceding sections

 

SKU and barcode

Show SKU

If a product or variant has an associated SKU, it will display

 

Show barcode

If a product or variant has an associated barcode, it will display

 

Show label

Display the default text labels, ie 'SKU: 1234'

 

Product rating

Display

Display the product rating based on reviews collected from review apps.  There are 3 options available:

  • Stars and text
  • Stars
  • Text

NOTE: Requires a product review app, and metafield definitions for 'reviews.rating_count' and 'reviews.rating'.

 

Price

Heading font

Choose either the 'Primary' or 'Secondary' heading font set in Theme Settings > Typography

 

Heading outline

Choose from 1 of 7 options:

  • None: No outline will be applied
  • No background: An outline will be applied to the text, but the background will be transparent
    • Thin
    • Default
    • Thick
  • Background: An outline will be applied to the text, and the background color will be applied
    • Thin
    • Default
    • Thick

 

Heading size

Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 240px

 

Bottom margin

Customize the bottom margin of the heading from the default to a dynamic value. -100px is the minimum, and it steps up by 5 to a maximum of 100px

 

Color

Choose a custom color for the heading

 

Responsive size

By default, text will resize based on the size of the screen. Uncheck this option to keep the text a consistent, static size. Useful when using negative margins on preceding sections

 

Sale price

Choose a custom color for the sale price

 

Disable tax message

By default, if the store is set to include taxes in pricing, a message with display

 

Inventory

Text size

Set the size of the content with the slider. 8px is the minimum, and it steps up by 1 to a maximum of 30px

 

Low inventory threshold

Sets the minimum number of products needed before the 'Only X in stock!' message appears. Example, if there are 10 products in stock, setting this to 15 would display 'Only 10 in stock!', but setting it to 5 would display 'In stock!'

 

In Stock Icon

Icon/Content separator

Select an icon to be used from the preset list. You can view the icons on the 'What Icons are Included?' FAQ page

 

Icon color

Preferred color of the icon. Defaults to the color assigned to the Headings color

 

Icon highlight color

Some icons have elements that can be assigned a different color. Defaults to the Accent color

 

Custom icon

Add your own icon. It is recommended to use an SVG or PNG file to keep the icons sharp

 

Icon size*

Set the icon size with the slider. 10px is the minimum, and it steps up by 1 to a maximum of 30px

 

Out of Stock Icon

Icon/Content separator

Select an icon to be used from the preset list. You can view the icons on the 'What Icons are Included?' FAQ page

 

Icon color

Preferred color of the icon. Defaults to the color assigned to the Headings color

 

Icon highlight color

Some icons have elements that can be assigned a different color. Defaults to the Accent color

 

Custom icon

Add your own icon. It is recommended to use an SVG or PNG file to keep the icons sharp

 

Icon size*

Set the icon size with the slider. 10px is the minimum, and it steps up by 1 to a maximum of 30px

 

Transfer Icon

Icon/Content separator

Select an icon to be used from the preset list. You can view the icons on the 'What Icons are Included?' FAQ page

 

Icon color

Preferred color of the icon. Defaults to the color assigned to the Headings color

 

Icon highlight color

Some icons have elements that can be assigned a different color. Defaults to the Accent color

 

Custom icon

Add your own icon. It is recommended to use an SVG or PNG file to keep the icons sharp

 

Icon size*

Set the icon size with the slider. 10px is the minimum, and it steps up by 1 to a maximum of 30px

 

Variant picker

Show single option variant

By default, if there is only 1 option to a variant, the option will not display. Since there is no choice for the customer to make, this option is removed. Check the box to display the single option dropdown.

 

Variant options

Choose how to display various variants:

  • Buttons: Variants will be displayed as block buttons or swatches
  • Dropdowns: Variant will be displayed in a dropdown

 

Buttons

Color swatches are dependent on the Product Taxonomy set up in the product admin.  Choose how the color will be displayed:

  • Swatches: 'Swatches' can be customized with Category Metafields and the Search & Discovery app
  • Variant image: Display the variant image associated with the variant. If an image is not available, it will default to the color
  • Magnified variant image: Display the zoomed in variant image associated with the variant. If an image is not available, it will default to the color

 

Enable rounded buttons

Buttons can be sharp edged squares or rectangles, or rounded circles or ovals

 

Tooltip

bespoke-tooltip.png

Tooltips add an icon next to the variant title to allow users to display more information about the variant in a slide out drawer

 

Variant title

Assign to a variant by its title, ie Size or Color

 

Heading

Title of the slide out drawer

 

Content

Select the content to display:

  • Page: Use the page picker to choose a page to display the content from
  • Text or HTML: Add custom content or code to display

 

Icon

Icon/Content separator

Select an icon to be used from the preset list. You can view the icons on the 'What Icons are Included?' FAQ page

 

Icon color

Preferred color of the icon. Defaults to the color assigned to the Headings color

 

Icon highlight color

Some icons have elements that can be assigned a different color. Defaults to the Accent color

 

Custom icon

Add your own icon. It is recommended to use an SVG or PNG file to keep the icons sharp

 

Icon size*

Set the icon size with the slider. 10px is the minimum, and it steps up by 1 to a maximum of 30px

 

Quantity selector

Make the quantity field available to allow the customer to add more than 1 item to the cart at a time

 

Buy buttons

Show recipient form for gift card products

When enabled, gift card products can optionally be sent to a recipient with a personal message

 

Custom add to cart text metafield

Requires a metafield be set up and assigned to specific products. The 'Namespace and key' is added here, and will affect all instances of the add to cart button.

An example set up is:

avenue-theme-pre-order-metafield.png

 

avenue-theme-pre-order-metafield-product.png

 

Enable cart redirection

Automatically sends users to the cart page after adding a product

 

Show dynamic checkout button

Dynamic checkout buttons allow customers to skip the cart and go directly to the checkout using a variety of payment options

 

ShopPay installments

Shop Pay offers customers the option to pay in full at checkout, or to split their purchase into 4 equal, interest-free installment payments for orders between 50 USD and 1000 USD.  Learn More

 

Payments

Display the available payment methods

 

Center

Center the icons

 

Show Follow on Shop

Display follow button for your storefront on the Shop app

 

Shipping message

If you offer free shipping, the default text will display the additional amount needed to add to the cart. The free shipping message is set up in Theme Settings > General

 

Store pickup

Displays option for customers to pick up their online orders at your retail store, curbside, or any location that you choose. Learn more

 

Enable Geolocation

Offer users the option to share their location to display distances to stores, when the customer clicks on the 'View store information' text link.  The user will be prompted by the browser to allow the use of their location

 

Description

This will add the product description to the column

 

Custom description

A text block for basic formatting including bold, italic, formatted lists & linked text

 

Complementary products

Complementary products are set in the Shopify Search & Discovery app

 

Number of products

Select the number of products to display. 1 is the minimum, and it steps up by 1 to a maximum of 10

 

Heading

Title of the block

 

Social sharing buttons

Center

Center the icons

 

Icon

Icon/Content separator

Select an icon to be used from the preset list. You can view the icons on the 'What Icons are Included?' FAQ page

 

Icon color

Preferred color of the icon. Defaults to the color assigned to the Headings color

 

Icon highlight color

Some icons have elements that can be assigned a different color. Defaults to the Accent color

 

Custom icon

Add your own icon. It is recommended to use an SVG or PNG file to keep the icons sharp

 

Icon size*

Set the icon size with the slider. 10px is the minimum, and it steps up by 1 to a maximum of 30px

 

Options

Icon layout

Select the relationship of the icon and the content.  Choose 1 of 2 options:

  • Inline
  • On top

 

Icon vertical alignment

Align the icon to the top, middle or bottom of the content

 

Link

Add a link using the link picker or type your own

 

Link text/SEO Title

Add a text to describe what action to take for the link

 

Text

HEADING

Title of the section or feature

 

Heading font

Choose either the 'Primary' or 'Secondary' heading font set in Theme Settings > Typography

 

Heading outline

Choose from 1 of 7 options:

  • None: No outline will be applied
  • No background: An outline will be applied to the text, but the background will be transparent
    • Thin
    • Default
    • Thick
  • Background: An outline will be applied to the text, and the background color will be applied
    • Thin
    • Default
    • Thick

 

Heading size

Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 240px

 

Bottom margin

Customize the bottom margin of the heading from the default to a dynamic value. -100px is the minimum, and it steps up by 5 to a maximum of 100px

 

Color

Choose a custom color for the heading

 

Responsive size

By default, text will resize based on the size of the screen.  Uncheck this option to keep the text a consistent, static size.  Useful when using negative margins on preceding sections

 

SUBHEADING

Sub title of the section or feature

 

Subheading font

Choose either the 'Primary' or 'Secondary' heading font set in Theme Settings > Typography

 

Subheading outline

Choose from 1 of 7 options:

  • None: No outline will be applied
  • No background: An outline will be applied to the text, but the background will be transparent
    • Thin
    • Default
    • Thick
  • Background: An outline will be applied to the text, and the background color will be applied
    • Thin
    • Default
    • Thick

 

Sub heading size

Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 240px

 

Bottom margin

Customize the bottom margin of the subheading from the default to a dynamic value. -100px is the minimum, and it steps up by 5 to a maximum of 100px

 

Color

Choose a custom color for the subheading

 

Show text border

Add a border between the headings and the text

 

Text

A text block for basic formatting including bold, italic, formatted lists & linked text

 

Text/Heading alignment

Text can be aligned to the left, right or centered to the container

 

Button

Link

Add a link using the link picker or type your own

 

Link text/SEO Title

Add a text to describe what action to take for the link

 

Style

Choose 1 of 2 styles:

  • Primary button
  • Secondary button

 

Text

Text

A text block for basic formatting including bold, italic, formatted lists & linked text

 

Text/Heading alignment

Text can be aligned to the left, right or centered to the container

 

Page

Use the page picker to assign a page and display the content

 

Line item properties

Line item properties are used to collect customization information for an item added to the cart

 

Checkbox

Label

Add an option for users to agree to

 

Radio buttons

Label

Add a label above the field. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Radio options' text will be used as the label in the email

 

Options

Separate options with a comma to create multiple radio buttons. Example: Option 1, Option 2, Option 3. If left blank, the field & label with be removed

 

Text

Label

Add a label above the text input. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Text placeholder' text will be used as the label in the email

 

Placeholder

The initial text the users sees within the input

 

Date picker

Label

Add a label above the text input. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Date picker' text will be used as the label in the email

 

Time picker

Label

Add a label above the text input. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Time picker' text will be used as the label in the email

 

Select dropdown

Label

Add a label above the field. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Placeholder' text will be used as the label in the email

 

Placeholder

The initial text the users sees within the field.

 

Options

Separate options with a comma to create dropdown selections. Example: Option 1, Option 2, Option 3. If left blank, the field & label with be removed

 

Image

Use the image picker to assign an image

 

Insta filter

App like filters can be applied to your images

 

Text/Heading alignment

Text can be aligned to the left, right or centered to the container

 

Link

Add a link using the link picker or type your own

 

Contact

Add a button to open a contact form in a slide out drawer

 

Text

Add custom text for the button

 

Style

Choose 1 of 2 styles:

  • Primary button
  • Secondary button

 

Custom Liquid

Liquid

Add app snippets or other Liquid code to create advanced customizations.

The block will come preloaded with Liquid that will display ALL available variant metafields. Variant metafields are added in the admin, and can be displayed using Liquid. Learn more

 

Enable reload on variant change

Enable this option to allow the block content to update when a new variant is selected. This will ensure the metafield data is displayed for each variant.

 

Divider

Add padding and a dividing line

 

Top padding

Add padding to the top of the divider. 0px is the minimum, and it steps up by 5 to a maximum of 60px

 

Bottom padding

Add padding to the bottom of the divider. 0px is the minimum, and it steps up by 5 to a maximum of 60px

 

* NOTE: May not be available on all sections, blocks or templates