Resources

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Home

Forum

Blog

Github

Login

Signup

Made in Builder

Create a dynamic product page hero based on UTM parameters 

This tutorial will walk you through how to create a hero section on your product pages that is dynamic based on UTM parameters. This tutorial is an example that you can utilize and adjust for your specific use case!

Create a section

Start by creating a model for your section. Models allow you to add custom sections to manage and edit any part of your storefont in Builder, such as for custom headers, product editorial, targeted cross-sell recommendations, and much more.


Click +Create Model and select Section

Give your model a name. I'm going to give it a generic name of Product Page Hero Campaign that will represent our section and where it will be used. In the model details, click +Show More and enable both the client side only attribute and allow client side only query param targeting.

Set the preview url

Next, add an editing url. This is what Builder will open in the Visual Editor to edit your Black Friday Campaign, so this just needs to be any URL this Builder section will display on. In our case, since this section will be on product pages, we'll use the url https://our-site.com/products/product-name.

Note that if you are adding this code on a collection page, choose one of your collection pages (https://our-site.com/collections/something) as the editing url.

Install the code

This snippet of code represents the hero section that will be added to your product page in Builder so you can build out the hero in the visual editor. 


Shopify

React

HTML API

Angular

Webcomponents

Dynamic Symbol

Copy and paste the liquid code snippet {%includes...} this into your store theme code where you want the Builder editable region to be.

E.g. for our hero image, we may put this code at the top of our product.liquid file

To do this, head over to your Shopify admin. On the left nav bar in Shopify, click your Online Store and select Themes. In your online store theme, under Actions, click Edit Code.

This will open up all the liquid template code for your Shopify theme. Because we want this product page hero section to be available in our product pages, navigate to the templates/product.liquid page and paste the code snippet in the section. Where you paste the snippet will determine where the hero section is placed on your page. Let's put this section at the top of our product page. To do that, we'll paste the code at the very top and click save.

Don't know where or how to install this code? Chat us and we'll integrate the code to your Shopify store for you, for free!

Chat us for install help

Have any issues with the above steps? Chat us and we'll happily help you out!

Create content

Now let's create our Black Friday hero. Head back to your content list at builder.io/content and click +New entry and choose “Product Page Hero Campaign.” Since we're creating a hero section a specific campaign around Black Friday, so we'll title this content entry "Black Friday Campaign."

👉Tip: you can create multiple content entries for this section model with different content and target the content based on different UTM parameters

You should see your site in the preview with a big +Add block at the top. Dra-and-drop content into the dropzone to build out your hero section! 

Target content

Finally, we want to add targeting so our section displays based on the UTM parameters. When you select Targeting, select the option to target on query params. If you do not see these options, go back to your model settings and make sure you've enabled client side only and allow client side only query param targeting.

After selecting query params as your form of targeting. type in the UTM parameters you want to target off of. For my use case I'm going to choose Query Params contains "utm_campaign=blackFriday." After selecting your targeting, you'll want to publish your page. 

To view your dynamic section after publishing, select the eye icon in the top right and select "view live page". You'll notice that this routes you to your standard product page, no hero included. However, if you add your query params ?utm_campagin=blackFriday to the end of the url, you'll see your section.

Conclusion

You can use custom sections for tons of use cases in Builder. For instance, try out any of these tutorials for step by step instructions for how to accomplish some common use cases with custom sections:

Creating a site-wide ribbon

Troubleshooting

Chat us for install help
Was this article helpful?