Skip to content

Instantly share code, notes, and snippets.

@boldsupport

boldsupport/bold-custom-upsell-template.liquid

Created December 3, 2018 17:50
Show Gist options
  • Save boldsupport/255de9060a6f65b4eb3bbc021d8dfdea to your computer and use it in GitHub Desktop.
Save boldsupport/255de9060a6f65b4eb3bbc021d8dfdea to your computer and use it in GitHub Desktop.
Download ZIP
This snippet allows customization of the Upsell modal that appears on the storefront.
Raw
bold-custom-upsell-template.liquid
<script>
window.BOLD.upsell = window.BOLD.upsell || {};
window.BOLD.upsell.templates = window.BOLD.upsell.templates || {};
{% comment %}
Note: Uncomment to customize the "upsellSingleProduct" template
{% raw %}
window.BOLD.upsell.templates['upsellSingleProduct'] = `<article id="prod_id_{{product.id}}_{{key}}" class="bold-product bold-grid offer_id_{{product.upsell_offer_settings.offer_id}}">
<div class="bold-product__image-container bold-grid__column bold-grid__column--half">
<img src="" alt="" class="bold-product__image" />
</div>
<div class="bold-product__details bold-grid__column bold-grid__column--half">
<div class="bold-product__above_content_button_container">
<div class="bold-product__actions bold-product-options__actions" style="display: none;">
<a href="#add-to-cart" class="bold_options_btn bold-product__control bold-product__button bold-product__button--primary">{{language_settings.customize_options_text}}</a>
</div>
<div class="bold-product__actions bold-product-upsell__actions">
<a href="#add-to-cart" data-bold-component-id="" class="add-to-cart bold-product__control bold-product__button bold-product__button--primary standard_primary" added="false">{{language_settings.addtocart_button_text}}</a>
</div>
</div>
<div class="bold-product__info">
<div class="bold-product-review">
<div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div>
</div>
<div class="bold-product__title">{{product.title}}</div>
<div class="bold-product__description">{{product.description}}</div>
</div>
<div class="bold-product__pricing">
<div class="bold-product__price"><del class="bold-product__price--deleted money"></del></div>
<div class="bold-product__price current_price money"></div>
<div class="bold-product__price additional_price"></div>
<div class="bold-product__message limit_disclaimer" style="display: none;">{{product.upsell_offer_settings.disclaimer_text}}</div>
</div>
<div class='variant_info_container'></div>
<div class="qty_container">
<div class="bold-control-group__item bold-product__quantity qty_input_container" style="display:none;">
<input type="number" class="bold-product__control bold-product__quantity-field qty_input" placeholder="{{language_settings.qty_text}}: 1" min="1" >
</div>
</div>
<div class="bold-product__below_content_button_container">
<div class="bold-product__actions bold-product-options__actions" style="display: none;">
<a href="#add-to-cart" class="bold_options_btn bold-product__control bold-product__button bold-product__button--primary">{{language_settings.customize_options_text}}</a>
</div>
<div class="bold-product__actions bold-product-upsell__actions">
<a href="#add-to-cart" data-bold-component-id="" class="add-to-cart bold-product__control bold-product__button bold-product__button--primary standard_primary" added="false">{{language_settings.addtocart_button_text}}</a>
</div>
</div>
</div>
</article>`;
{% endraw %}
{% endcomment %}
{% comment %}
Note: Uncomment to customize the "upsellThreeOrMoreProducts" template
{% raw %}
window.BOLD.upsell.templates['upsellThreeOrMoreProducts'] = `<div class="bold-grid__column bold-grid__column--third">
<article id="prod_id_{{product.id}}_{{key}}" class="bold-product offer_id_{{product.upsell_offer_settings.offer_id}}">
<div class="bold-product__image-container">
<img src="" alt="" class="bold-product__image" />
</div>
<div class="bold-product__actions bold-product-options__actions" style="display: none;">
<a href="#add-to-cart" class="bold_options_btn bold-product__control bold-product__button bold-product__button--primary">{{language_settings.customize_options_text}}</a>
</div>
<div class="bold-product__actions bold-product-upsell__actions">
<a href="#add-to-cart" data-bold-component-id="" class="add-to-cart bold-product__control bold-product__button bold-product__button--primary standard_primary" added="false">{{language_settings.addtocart_button_text}}</a>
</div>
<div class="bold-product__details">
<div class="bold-product__info">
<div class="bold-product-review">
<div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div>
</div>
<div class="bold-product__title">
<div class="bold-product__title_content">
{{product.title}}
</div>
</div>
<div class="bold-product__description">{{product.description}}</div>
</div>
<div class="bold-product__pricing">
<div class="bold-product__price"><del class="bold-product__price--deleted money"></del></div>
<div class="bold-product__price current_price money"></div>
<div class="bold-product__price additional_price"></div>
<div class="bold-product__message limit_disclaimer" style="display: none;">{{product.upsell_offer_settings.disclaimer_text}}</div>
</div>
<div class="variant_info_container"></div>
<div class="qty_container">
<div class="bold-control-group__item bold-product__quantity qty_input_container" style="display: none;">
<input type="number" class="bold-product__control bold-product__quantity-field qty_input" placeholder="{{language_settings.qty_text}}: 1" min="1" >
</div>
</div>
</div>
</article>
</div>`;
{% endraw %}
{% endcomment %}
{% comment %}
Note: Uncomment to customize the "upsellTwoProducts" template
{% raw %}
window.BOLD.upsell.templates['upsellTwoProducts'] = `<div class="bold-grid__column bold-grid__column--half">
<article id="prod_id_{{product.id}}_{{key}}" class="bold-product offer_id_{{product.upsell_offer_settings.offer_id}}">
<div class="bold-product__image-container">
<img src="" alt="" class="bold-product__image" />
</div>
<div class="bold-product__actions bold-product-options__actions" style="display: none;">
<a href="#add-to-cart" class="bold_options_btn bold-product__control bold-product__button bold-product__button--primary">{{language_settings.customize_options_text}}</a>
</div>
<div class="bold-product__actions bold-product-upsell__actions">
<a href="#add-to-cart" data-bold-component-id="" class="add-to-cart bold-product__control bold-product__button bold-product__button--primary standard_primary" added="false">{{language_settings.addtocart_button_text}}</a>
</div>
<div class="bold-product__details">
<div class="bold-product__info">
<div class="bold-product-review">
<div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div>
</div>
<div class="bold-product__title">{{{product.title}}}</div>
<div class="bold-product__description">{{{product.description}}}</div>
</div>
<div class="bold-product__pricing">
<div class="bold-product__price"><del class="bold-product__price--deleted money"></del></div>
<div class="bold-product__price current_price money"></div>
<div class="bold-product__price additional_price"></div>
<div class="bold-product__message limit_disclaimer" style="display: none;">{{product.upsell_offer_settings.disclaimer_text}}</div>
</div>
<div class="variant_info_container"></div>
<div class="qty_container">
<div class="bold-control-group__item bold-product__quantity qty_input_container" style="display:none;">
<input type="number" class="bold-product__control bold-product__quantity-field qty_input" placeholder="{{language_settings.qty_text}}: 1" min="1" >
</div>
</div>
</div>
</article>
</div>`;
{% endraw %}
{% endcomment %}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment