Add Product Builder to a Website

The way this app works is it creates a special page for each product builder, with its own URLs. To make it so your customers can find those pages, you need to add a link to that page on your site.

One way is to add a link to a builder page in your sites navigation. Here's a good article on how that's done if you're not familiar with adding links to your menu

Adding the link to a product page

Another way is to add the builder link in one of your product pages.  You can go into your themes files, open up the themes product page template (usually product.liquid), and add the link there.  However because all product pages will use that template by default, you'll probably want to create a new template for the product that you want to link to the builder page, and then assign that custom template to your product.  This way only the products that have that new template applied to it will have this link.  You can learn more about creating product page templates here.

If you are directly inputting the link into your theme's files, you would want to use a snippet of HTML like this (using the URL to the builder in the above image):

The above snippet will create a link to that builder page, and the link will take the form of a line to text stating "Build Your Product!". You can change that text in the snippet or dress the link up in HTML and/or CSS.

Turning the "add to cart" button into a link to the builder page

Another way to add the link to a product page is convert the add to cart button into a link that will direct the user to the builder page.  Again you'd probably want to create a separate product page template (as described above), open it up, then find the add to cart button.  It will generally look like this:

If you open up Shopify's search tool (ctrl-f) and type in "add to cart", you should be taken directly to it.  Here's the changes that you'd need to make to the cart code:

1. To change the text on the button you'd just need to insert the new text in the value="" attribute.
2. To prevent the button from adding the product to the cart and just link to the builder page, you'd just delete everything in the id="" and type="" attributes.
3. To have the button link to the builder page, you'd just need to add an HTML <a href=""></a> tag around the button, and then put the builder's URL into the href="" attribute.  Here's an example with these modifications done to the above code: