The Spreadr app can easily be integrated with the themes compatible with Online Store 2.0. This guide will walk you through the process of how to add the integration code to the Dawn Theme.
For integrating older themes refer to the integration guide here.
Spreadr Amazon links can be added to Product pages as well as pages with repeating product blocks (for example Collection pages). The guide below is for integration with Product pages. For Collection pages follow the guide here.
On the product pages, you have 2 options:
1. Replace the Add to Cart button with the Spreadr button
2. Add the Spreadr button along with the Add to Cart button.
If you are unsure you may simply contact us at support@spreadr.freshdesk.com. We will assist you in the integration.
1. Replace the Add to Cart button with the Spreadr button
Steps
1. Open your Shopify admin.
2. Click Online Store.
3. Click Themes.
4. Click Actions for your published theme.
5. Click Edit code.
6. Click the file main-product.liquid which appears under Sections.
7. The main-product.liquid or buy-buttons.liquid file will open in the online code editor. In the online code editor window, locate the HTML for your add-to-cart button (you can do this by searching with CTRL-f OR COMMAND-f). The HTML for your add to cart button will look something like this:
<button type="submit" name="add" class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}" {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %} > {%- if product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} </button> |
The trick is to find a <button> tag that includes the text 'products.product.add_to_cart'.
(If you need assistance please contact support@spreadr.freshdesk.com.)
8. Add the following code encapsulating the <button> code that you found in step 7.
{% render 'spreadr-custom', product:product, s_showSpreadr:1, s_hideCart:1 , s_classes: 'product-form__submit button button--full-width', s_style: '' %} <div class="s_original_{{ product.id }}"> //<button> code </div> |
The boxes in blue represent the Spreadr integration code. The box in red is the existing <button> code.
It will look as shown in the image below.
The Add to Cart button on the product pages should now be replaced with the View on Amazon button for Spreadr products.
2. Add the Spreadr button along with the Add to Cart button.
Go to sections/main-product.liquid or snippets/buy-buttons.liquid file.
Add the below code to display the Spreadr button along with the add to cart button for Spreadr products.
//<button> code {% render 'spreadr-custom', product:product, s_showSpreadr:1, s_hideCart:0 , s_classes: 'product-form__submit button button--full-width', s_style: 'margin-top:10px;' %} |
The code will look as -
This will add a Spreadr button along with the existing add tocart button on the Product page.
Note: The code may vary from theme to theme.
Preview:
