Shopify Installation - Variable Pages
This guide covers the enablement of Add-On pricing to your Shopify store.
Last updated
This guide covers the enablement of Add-On pricing to your Shopify store.
Last updated
The Pixfizz Shopify integration supports setting up two types of add-ons:
A product that is added to the cart together with the user’s project to charge for extra pages that the user added in the Pixfizz design tool.
A product that is linked to Pixfizz variants or template options and gets added as an extra orderline when user selects the linked options in Pixfizz (either inside the design tool or in the product preview modal).
If you’re upgrading an existing Pixfizz-Shopify integration, you’ll need to make a few updates to support the new functionality
Create a new product metafield pixfizz.page_addon_product of type “Product variant” that links to a single variant. A metafield with the same namespace/key can also be created on variants. The precedence works the same way as with pixfizz.product_sku metafield — if the metafield is present on the selected variant, the variant’s value will be used, otherwise it will fallback to the value on the product.
Create a product that will represent an extra page. The price should always be give as the price for a single page, even if users are only able to add/remove a pair of pages at a time in the design tool.
Link your product that supports adding extra pages to the “Extra page” product that you created in step 2 via the new pixfizz.page_addon_product metafield.
Create a new product metafield pixfizz.option_addon_products of type “Product” that links to
Create a new product metafield pixfizz.option_type_code of type single-line text.
Create a new variant metafield pixfizz.option_value_code of type single-line text.
To link a Pixfizz variant or template option to a Shopify addon product, you need to:
Create an addon product that will represent the option in Shopify, and set its pixfizz.option_type_code metafield to the code of the Pixfizz variant/template option.
Create variants of the addon product you created in step a, mapping each variant to an option value in Pixfizz by setting the pixfizz.option_value_code metafield on each variant in Shopify. Note that you can skip the options that don’t have an extra price.
Link the addon product(s) you created in step a to your base product using the pixfizz.option_addon_products metafield on the base product.
The cart page liquid code has to be adjusted so that:
It should not be possible to remove or update quantity of addons manually
Removing or adjusting quantity of the base product should remove or update addon quantities accordingly
Make addon orderlines look a bit different from other orderlines
WARNING: This assumes that the only place where orderline quantities can be updates or orderlines deleted from the cart is the main cart page. This seems to be true for Dawn, but may not be true for other themes. The code below has to be ported to all parts of the interface that let the user modify/delete orderlines. The structure of the cart page depends entirely on the selected Shopify theme. The following changes were tested with the Dawn theme but will have to be adjusted for other themes.
Find the snippet that renders the body of the cart page. The location of this snippet depends on the theme. In the Dawn theme it is called main-cart-items.liquid.
Inside the snippet locate the part that loops through the items in the cart. Search for the phrase {%- for item in cart.items -%}. You’ll need to make some adjustments in the body of that loop, based on the presence of the _pixfizz_addon property.
Locate the delete item button and wrap it in {%- unless item.properties._pixfizz_addon -%} … {% endunless %} so that it does not get rendered for addon items.
Locate the part that renders quantity controls and use an {%- if item.properties._pixfizz_addon %} check to render a simple quantity number instead of the input element: <span style="align-self:center;">{{ item.quantity }}</span> for addon items.
Locate the <input> element that handles quantity changes and add these two attributes to it:
a. onchange="{% render 'pixfizz-orderline-quantity-handler', item: item, cart: cart %}"
b. onkeydown="if(event.keyCode===13)event.preventDefault()" (this is a workaround for a bug in the Dawn theme where hitting Enter in the quantity dropdown would move you to the checkout page)
Locate the <a> element that handles deleting orderlines from the cart and add this attribute to it: onclick="{% render 'pixfizz-orderline-quantity-handler', item: item, cart: cart, delete_item: true %}"
In order to be able to style the addon orderlines separately from other orderlines, we’ll add a pixfizz-addon CSS class to the <tr> elements for addon orderlines. Locate the <tr class="cart-item"> element and replace the class="cart-item" part with class="cart-item {% if item.properties._pixfizz_addon %}pixfizz-addon{% endif %}"
Add some custom CSS to the top of the main-cart-items.liquid snippet (TODO: improve styling):
Use seo.hidden metafield on addon products to hide them from search / google:
Use seo.hidden metafield on addon products to hide them from search / google:
