Skip to main content

Product Quick View Content Blocks

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Top, middle dropdown
  4. Products
  5. quick
  6. Left column, access content blocks using black arrow next 'Product quick view'

Recommended reading

In this section...

 

Tag Filters

Some Content Blocks can be 'assigned' to a specific product or products using tags.  Example:  If you want to display a Size Chart specifically for Female Tank Tops, you could tag each product 'Female Tank Top' and add 'Female Tank Top' to the filter input

 

Display a site navigation showing visitors where they are on a site's hierarchy of content. Stores with a large number of collections can use a menu to relate sub-collections that will display on each page.

 

Show divider

Add padding and a dividing line below the element

 

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 size

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

 

Show divider

Add padding and a dividing line below the element

 

Vendor, SKU, and barcode

Show product vendor

The vendor title will display.  The title will be linked to the default collection page or to a collection created using the vendor name.

 

Show product SKU

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

 

Show product barcode

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

 

Show divider

Add padding and a dividing line below the element

 

Product rating

Display the product rating based on reviews collected from review apps

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

 

Show divider

Add padding and a dividing line below the element

 

Price

Price size

Set the price size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px

 

Show tax and shipping message

If taxes are included or there is a shipping policy, a message may display

 

Show divider

Add padding and a dividing line below the element

 

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

 

Show divider

Add padding and a dividing line below the element

 

Availability

Display the number of remaining items in stock to create a sense of urgency in your customers shopping. This requires you to track the stock of the product or variant and not check 'Continue selling when out of stock'. Available default messaging:

  • Only X left!
  • Available Now!
  • Sold Out

Inventory transfers can also be automatically displayed underneath the product availability. Learn more about transfers from suppliers

 

Minimum number of products remaining to display remaining stock

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

 

Show divider

Add padding and a dividing line below the element

 

Line item properties

Line item properties are used to collect customization information for an item added to the cart. This information can be collected from the buyer on the product page

 

Show divider

Add padding and a dividing line below the element

 

Checkbox

Add an option for users to agree to

 

Radio 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

 

Radio 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

 

Text placeholder

The initial text the users sees within the input.

 

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 'Select dropdown placeholder' text will be used as the label in the email

 

Select dropdown placeholder

The initial text the users sees within the field.

 

Select dropdown 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

 

Tag filter

Assign to a product via an existing product tag

 

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:

  • All buttons: EVERY variant will be displayed as block buttons
  • Color buttons: Only COLOR variants will be displayed as block buttons
  • Size buttons: Only SIZE variants will be displayed as block buttons
  • Color and Size buttons: Only COLOR and SIZE variants will be displayed as block buttons
  • 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
  • All Dropdowns: EVERY variant will be displayed in a dropdown

 

Color buttons

Choose how the color will be displayed:

  • Colors: Show colors based on the name of the color.  If a color cannot be associated with an 'HTML Color Name', the swatch will default to white.
  • 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
  • Custom image: Create your own image to associate with the variant:
    • Images MUST be a PNG, not a JPEG
    • The file name MUST match the variant title.  Example, a variant color of 'None Black' would require a file to be title and formatted like 'none-black.png'
    • Recommended image size is 140 x 140px
    • Upload the file to Content > Files

 

Enable rounded buttons

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

 

Show divider

Add padding and a dividing line below the element

 

Quantity

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

 

Show divider

Add padding and a dividing line below the element

 

Buy Buttons

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

 

Show recipient form for gift card products

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

 

Show divider

Add padding and a dividing line below the element

 

Free shipping messaging

The free shipping message is set up in Theme Settings > General

 

Show divider

Add padding and a dividing line below the element

 

Product description

This will add the product description to the form information. If the description contain h6 tabs, only the content before h6 will display. Consider disabling the description in the tabs below

 

Show divider

Add padding and a dividing line below the element

 

Button

Text

Customize the text for the button

 

Outline button

Invert the button to use a frame with no background

 

Link

Add a link to the button

 

Show divider

Add padding and a dividing line below the element

 

Text

Text

A text block for metafields and basic text formatting including bold, italic & linked text

 

Show divider

Add padding and a dividing line below the element

 

Tag filter

Assign to a product via an existing product tag

 

Custom Liquid

Liquid

Add app snippets or other Liquid code to create advanced customizations

 

Enable reload on variant change

Variant metafields are added in the admin, and can be displayed using Liquid.  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.  Learn more

 

Show divider

Add padding and a dividing line below the element

 

Tag filter

Assign to a product via an existing product tag

 

Image

Image

Select an image to be used in your product options. A max width of 560px is recommended

 

Show divider

Add padding and a dividing line below the element

 

Tag filter

Assign to a product via an existing product tag

 

Divider

Add padding and a dividing line