Add your own HTML snippet

Step-by-step example

This step-by-step guide will walk you through how to add a trust seal image to your store.

To understand in more depth, please go to Understand the options section.

Imagine you want to add a trust seal image to all your product pages, and you prepared a trust seal HTML code like bellow:

<img src="https://cdn.shopify.com/s/files/1/2588/5532/files/PROD1_500x.png?v=1523432071" />

The first thing you need to do is go to Custom HTML page and click Add HTML snippet button to create a new HTML snippet:

Yo will be redirected to a new page to fill your snippet information:

In Name section, name your snippet is Trust seal:

In Sections section, PRODUCTS input, choose All products:

Now you need to find which position your snippet will add into. First, go to any product page in your store, let say you go to product page with product name is "Basic knit dress chest":

Let say you want to insert trust seal after "BUY IT NOW" button, right click in the page and choose Inspect:

Click in this icon bellow to inspect elements we want:

After that hover to

You can determine the class name you want to insert snippet is product-form.

Now go back to Code Customizer app, in Position section, put your class name you got above and hit Enter:

With that setting in Position section, Code Customizer will insert your snippet to the end of elements that matched with class name is product-form.

In HTML snippet section, put your HTML snippet into editor:

scroll to the end of the page, and click Save button:

And now your snippet is created and immediately applied to your store.

Now your trust seal code is applied to all your product pages. Go back to your store and go to any product page to see result:

Here is another product page:

Understand the options

After click Add button, you will see a page to fill your snippet information:

Name

The name of your HTML snippet, just for identification and search, not for any other function.

Sections

Which pages on your store you want to add your snippet into. in each section, you can choose one, many or even all values in a section. We support the following sections:

Collections: The collection pages of your store. E.g. You want to add your snippet to these pages: Home collection page, Women's fashion page ...
Products: The product pages of your store. E.g. You want to add your snippet to 2 products with names like: "Basic knit dress chest", "Tong cross neck dress".
Pages: The pages of your store. E.g. About us page, Contact us page ...
Blogs: The blog pages of your store. E.g. News blog page ...
Blog posts: The blog posts of your store.
Other pages: Including the following pages: Home page, Contact, Cart, Gift Card, Search, Password, 404, List collections, Customers account, Customer activate account, Customer addresses, Customer login, Customer order, Customer register, Customer reset password.

Learn more about:

Status

The status of your snippet with 2 values:

Enabled: If you want to enable your snippet to your theme. That means after created your snippet, it will be applied to your theme immediately.
Disabled: If you want to disable your snippet to your theme. That means after created your snippet, it won't be applied or case any effect to your theme.

Position

The positions in the pages you want to add your snippet into(e.g., after you decide which pages you want to add snippet, then you can define which positions in these pages my snippet will be added into). The position is defined by 2 factor:

Insert position: Is the position around HTML elements that matched with ID/CLASS/TAG you define. The following position Insert position supports:
- the end of: Will insert snippet to the end of elements that matched with ID/CLASS/TAG you define.
- the beginning of: Will insert snippet to the beginning of elements that matched with ID/CLASS/TAG you define.
- after: Will insert snippet to after elements that matched with ID/CLASS/TAG you define.
- before: Will insert snippet to before elements that matched with ID/CLASS/TAG you define.
ID/CLASS/TAG: Is the HTML ids, HTML classes or HTML tags that identify set of HTML elements for Insert position to use to define the exact position your snippet will be insert to.

Insert position includes the following types:

Examples

Let say I have an HTML code:

<html>
<head>
</head>
<body>
	<div class="product-single__meta">
		<h1 class="product-single__title">Basic knit dress chest</h1>
		<form class="product-form product-form-product-template">
			<input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">
			<div class="product-form__item product-form__item--submit product-form__item--payment-button">
				<button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent" data-add-to-cart="">Add to cart</button>
			</div>
		</form>
	</div>
</body>
</html>

And I want to add a HTML snippet (a trust seal image) to HTML code above:

<img src="https://cdn.shopify.com/s/files/1/2588/5532/files/PROD1_500x.png?v=1523432071" />

If you define:

Insert position: the end of
ID/CLASS/TAG: .product-form

Code Customizer will add your snippet to the end of elements that matched with a class is product-form. And result HTML code is:

<html>
<head>
</head>
<body>
	<div class="product-single__meta">
		<h1 class="product-single__title">Basic knit dress chest</h1>
		<form class="product-form product-form-product-template">
			<input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">
			<div class="product-form__item product-form__item--submit product-form__item--payment-button">
				<button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent" data-add-to-cart="">Add to cart</button>
			</div>
			<img src="https://cdn.shopify.com/s/files/1/2588/5532/files/PROD1_500x.png?v=1523432071" />
		</form>
	</div>
</body>
</html>

As you can see your snippet(img element) inserted to the end of all elements in form element.

Here is example result in store when we want to insert a trust seal image after "Buy now" button:

If you define:

Insert position: the beginning of
ID/CLASS/TAG: .product-form

Code Customizer will add your snippet to the beginning of elements that matched with a class is product-form. And result HTML code is:

<html>
<head>
</head>
<body>
	<div class="product-single__meta">
		<h1 class="product-single__title">Basic knit dress chest</h1>
		<form class="product-form product-form-product-template">
			<img src="https://cdn.shopify.com/s/files/1/2588/5532/files/PROD1_500x.png?v=1523432071" />
			<input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">
			<div class="product-form__item product-form__item--submit product-form__item--payment-button">
				<button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent" data-add-to-cart="">Add to cart</button>
			</div>
		</form>
	</div>
</body>
</html>

As you can see your snippet(img element) inserted to the beginning of all elements in form element.

Here is example result in store:

If you define:

Insert position: after
ID/CLASS/TAG: .product-form

Code Customizer will add your snippet to after elements that matched with a class is product-form. And result HTML code is:

<html>
<head>
</head>
<body>
	<div class="product-single__meta">
		<h1 class="product-single__title">Basic knit dress chest</h1>
		<form class="product-form product-form-product-template">
			<input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">
			<div class="product-form__item product-form__item--submit product-form__item--payment-button">
				<button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent" data-add-to-cart="">Add to cart</button>
			</div>
		</form>
		<img src="https://cdn.shopify.com/s/files/1/2588/5532/files/PROD1_500x.png?v=1523432071" />
	</div>
</body>
</html>

As you can see your snippet(img element) inserted after form element.

If you define:

Insert position: before
ID/CLASS/TAG: .product-form

Code Customizer will add your snippet to before elements that matched with a class is product-form. And result HTML code is:

<html>
<head>
</head>
<body>
	<div class="product-single__meta">
		<h1 class="product-single__title">Basic knit dress chest</h1>
		<img src="https://cdn.shopify.com/s/files/1/2588/5532/files/PROD1_500x.png?v=1523432071" />
		<form class="product-form product-form-product-template">
			<input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">
			<div class="product-form__item product-form__item--submit product-form__item--payment-button">
				<button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent" data-add-to-cart="">Add to cart</button>
			</div>
		</form>
	</div>
</body>
</html>

As you can see your snippet(img element) inserted before form element.

Learn more about:

HTML element: https://www.w3schools.com/html/html_elements.asp
HTML id: https://www.w3schools.com/html/html_id.asp
HTML class: https://www.w3schools.com/html/html_classes.asp
HTML tag: https://www.w3schools.com/tags/tag_html.asp

Video Tutorial: https://youtu.be/qEk5DgXE4Iw

‌

PreviousOverview NextManage your HTML snippets

Last updated 5 years ago

Was this helpful?