Shopify is great for customizing your own store! The liquid code provides fantastic flexibility, including giving you the ability to change the code for how your Gamify games display. Here are some step-by-step instructions for exactly where to edit the Gamify code so you can have the game show on each of your product pages.
1. In the left hand Shopify menu, select "Online Store" and then "Themes". Under your live theme click on "Actions", and then "Edit Code".
2. This is where you can see all your code! Expand the "Snippets" section on the left, and open up "product-template.liquid". Ideally you should find the Gamify code close to the end of the page - if you selected automatic install when you installed the Gamify app then it's supposed to insert it in here, right before the code that displays the social media buttons. If it's not there then you can easily add it in! In this example code you can see that it is calling "gfy-container" - this is code for the "Play Now" button to display on each product page. We will replace that with the new code so that the entire game is displayed on each product page instead.
4. Copy the following Gamify code:
<div id="gamify-panel" data-id="{{ shop.permanent_domain }}" style="text-align: center;"></div>
And then paste it in the code right before the social buttons, replacing the code for the "Play Now" button if it's there already. Here is what it is likely to look like in regular text:
<div class="product-single__description rte">
{{ product.description }}
</div> <div id="gamify-panel" data-id="{{ shop.permanent_domain }}" style="text-align: center;"></div> {% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
And here is what is should look like in the actual code:
5. Lastly, save your changes. Congratulations! Your customers will now be able to play your games on any of your product pages.
If you aren't feeling confident or would like some support, feel free to contact our team at [email protected]. We're always happy to help!
