Posterly will automatically place the edit design button on product pages on your Shopify online store. Normally it will look like this:
In some rare cases the Edit Button would be needed to be placed manually. This could be due to the theme having implemented the add to cart button differently than most other themes are doing it. or in the case that you want to place it some other place on your site.
In these cases you need to find the product page inside your theme and wrap the add to cart form in the following lines of code. This will then set your theme to display the edit design button instead of the add to cart button for Posterly products.
{% if product.metafields.posterly.design_id %}
{% assign posterly_id = '' %}
{% unless product.variants[0].sku contains 'custom_product_' %}
{% assign posterly_id = '?id=' | append: product.variants[0].sku %}
{% endunless %}
<style>
.posterly_customize_button {
background-color: black;
color: white;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<button
type="button"
class="posterly_customize_button"
onclick="location.href = '/apps/posterdesigner/design/{{product.metafields.posterly.design_id}}{{posterly_id}}';">Edit this design</button>
{% else %}
{% comment %}PLACE FORM CODE FROM THEME HERE{% endcomment %}
{% endif %}