Placing the Edit Button Manually

In some cases you want to choose the location of the Posterly Edit Button manually, if that's the case this is the guide for you.

Posterly will automatically place the edit design button on product pages on your Shopify online store. Normally it will look like this:

Edit this design

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 %}
		.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; 
        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 %}

Didn't find an answer?

Contact Us
Getting Started
Product Features
Custom Input Fields
Design Elements