Snippet details

The details that you provide for a snippet affect the way that the snippet is shown to customers. You don't have to provide every detail for each snippet.

On this page

• Content
• Shows for
• Status
• Position
• Language
• Advanced
• Tabs Studio

Content

• Name — The name for the snippet. The name is for your reference only, it is not shown to your customers.

• Type — The type of content for the snippet. You can select from the following content types:

  • Rich Text — Enter and format your content using the rich text editor.

  • HTML — Enter and format your content using HTML.

• Content — The content for the snippet.

Shows for

You can show a snippet on every product page in your store, or only on product pages that match conditions.

• All products and variants — Show the snippet on every product page in your store.
• Some products or variants — Show the snippet on product pages that match conditions.

Hide product description when the snippet is showing — Check this option to hide the product description when the conditions to show the snippet are matched and the snippet is showing on the product page. Other snippets on the product page remain showing.

Conditions

You can add conditions for a snippet to match products or variants based on many details, including collection title, product title, product type, product tags, variant title, variant option, or even variant inventory.

If you add more than one condition, you can choose whether products or variants need to match all of the conditions in order to show the snippet, or any of the conditions.

• All conditions — Show the snippet when all conditions are true.
• Any condition — Show the snippet when any condition is true.

For example, suppose that you add the two following conditions for a snippet:

• Product tag is equal to shirt.
• Price is less than $100.01.

If you select all conditions, then products are matched only if they are tagged with shirt and are also priced at $100 or less. Products need to match both conditions to show the snippet.

If you select any condition, then products are matched if they are tagged with shirt or if they are priced at $100 or less. Products need to match only one condition to show the snippet.

Conditions for variants

If you add a condition for a variant detail, such as Variant option value, Variant price, or Variant inventory, then that condition is true only when the variant that's displayed on the product page matches the condition.

For example, suppose you have a product that has five variants. Four of the variants have inventory, but one is out of stock. If you have a snippet that has a condition of Variant inventory is equal to 0, then the snippet only shows when the out of stock variant is displayed.

Adding conditions

You can select an attribute from the options in the first drop-down menu, and a term from the options in the second drop-down menu, to control how a product or variant needs to match the condition value that you enter in the third field.

The value that you enter in the third field is compared to your products and variants according to the condition's settings, and matching products and variants show the snippet on the product page in your store. The condition value is case-sensitive.

Attribute options

You can select from the following attribute options to control how a product or variant needs to match the condition value that you enter:

Term options

You can select from the following term options to control how a product or variant needs to match the condition value that you enter:

Add multiple conditions to define a range

To match products or variants based on numerical values, such as price, weight, or inventory quantity within a range, you need to set more than one condition. The low end of the range is defined in one condition, and the high end of the range in another. You need to select all conditions to match only the products and variants that fall within the range.

For example, to match products or variants priced within a range of $50-$150, you would add the two following conditions:

• Product price is greater than $49.99.
• Product price is less than $150.01.

Add a condition

To add a condition:

1. From the first drop-down list, select an attribute.

2. From the second drop-down list, select a term.

3. In the third field, enter a value.

4. Optional

   Click Add another condition to add another condition.

Status

The snippet Status determines if the snippet is ready to be shown in your store. For newly created snippets, the snippet status is set as Active by default.

You can set the following statuses:

• Active — The snippet details are complete and the snippet is ready to be shown.
• Draft — The snippet details need to be completed before it can be shown, or the snippet needs to be temporarily hidden, such as during the off-season of an annual holiday sale.

Position

The Position determines where the snippet shows in relation to other content in the snippet's parent element.

You can set the following positions:

• Top of container — The snippet shows above the content.
• Bottom of container — The snippet shows below the content.

Language

You can show the snippet only when your store is viewed in a selected Language (and any conditions are matched).

For newly created snippets, the language is set as All languages by default.

The language that your store is viewed in is determined by value of the the html element's lang attribute. The attribute is set by your theme's language selector, Shopify's Geolocation app, or a compatible third-party translation app.

If your store supports multiple languages, then you need to create a separate version of the snippet for each language.

Advanced

Snippet class name

A case-sensitive class name that you can use to select the snippet with CSS and JavaScript. If you enter a class name, the snippet content HTML renders inside of a div element with your class name in its list of classes.

For example, suppose your snippet content has the following HTML:

<p>Save 10%. This week only!</p>

If you enter save-ten, then the snippet renders as:

<div class="save-ten">
  <p>Save 10%. This week only!</p>
</div>

You can separate multiple class names with spaces.

Container selector

A CSS selector that you can use to show the snippet in any HTML element.

Tabs Studio

You can show the snippet in a tab panel that was created with our Tabs Studio app.

Tab title

The tab label for the tab panel that you want to show the snippet in. The label is case-sensitive and needs to be an exact match. The snippet Position determines where the snippet shows in relation to other content in the tab panel.