Create draft product(s)
Create a product redemption per NFT campaign on the product(s)
Get the product id and variant
Create a nft-buy-button element and place it on a custom claims page or section
<nft-buy-button product="PRODUCT_ID" variant="VARIANT_ID" createDraft="false">Buy with Bombs</nft-buy-button>
<script type="text/javascript" src="{{ 'nft-connect.js' | asset_url }}"></script>
Example below is what it would look like when implementing with the image-with-text section liquid file:
{%- style -%}
{%- if section.settings.image != blank -%}
#shopify-section-{{ section.id }} {
--image-ratio-percent: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
--image-position: {{ section.settings.image_position }};
}
{%- endif -%}
.section-{{ section.id }}-padding {
padding-top: calc({{ section.settings.padding_top }}px * 0.75);
padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75);
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{{ 'section-image-with-text.css' | asset_url | stylesheet_tag }}
<div class="image-with-text page-width{% if section.settings.full_width %} page-width--full-width{% endif %} section-{{ section.id }}-padding">
<div class="image-with-text__grid{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %} grid grid--gapless grid--1-col grid--2-col-tablet">
<div class="grid__item">
<use-animate data-animate="zoom-fade" class="media-wrapper">
<div class="image-animate media--{{ section.settings.image_ratio }} media-mobile--{{ section.settings.mobile_image_ratio }} {% if section.settings.image != blank %}media{% else %}media--placeholder{% endif %}">
{%- if section.settings.image != blank -%}
<img
srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | image_url: width: 165 }} 165w{%- endif -%}
{%- if section.settings.image.width >= 375 -%},{{ section.settings.image | image_url: width: 375 }} 375w{%- endif -%}
{%- if section.settings.image.width >= 550 -%},{{ section.settings.image | image_url: width: 550 }} 550w{%- endif -%}
{%- if section.settings.image.width >= 750 -%},{{ section.settings.image | image_url: width: 750 }} 750w{%- endif -%}
{%- if section.settings.image.width >= 1100 -%},{{ section.settings.image | image_url: width: 1100 }} 1100w{%- endif -%}
{%- if section.settings.image.width >= 1500 -%},{{ section.settings.image | image_url: width: 1500 }} 1500w{%- endif -%},
{{ section.settings.image | image_url }} {{ section.settings.image.width }}w"
src="{{ section.settings.image | image_url: width: 1500 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ section.settings.image.alt | escape }}"
loading="lazy"
width="{{ section.settings.image.width }}"
height="{{ section.settings.image.height }}"
class="image-fit"
/>
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder' }}
{%- endif -%}
</div>
</use-animate>
</div>
<div class="grid__item">
<div class="image-with-text__content {{ section.settings.text_box_position }} {{ section.settings.text_alignment }} mobile-{{ section.settings.mobile_text_alignment }}">
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
<h2 class="image-with-text__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
{%- when 'text' -%}
<div class="image-with-text__text{% if block.settings.secondary_color %} image-with-text__text--colored{% endif %} {{ block.settings.text_size }} rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
{%- if block.settings.button_style_secondary -%}
**<!--PERCS 001 Separate products for each variant is assigned to each nft-buy-button -->
<nft-buy-button product="7085862093004" variant="42535784808670" >
<div class="button button--cta"> <span class="label">{{ block.settings.button_label | escape }}</span> {% render 'icon-arrow' %} <div>
</nft-buy-button>**
**<nft-buy-button product="7696967499980" variant="42535784808670" >
<div class="button button--cta"> <span class="label">{{ block.settings.button_label | escape }}</span> {% render 'icon-arrow' %} <div>
</nft-buy-button>**
**<script type="text/javascript" src="{{ 'nft-connect.js' | asset_url }}"></script>
<!--PERCS 001 -->**
{%- else -%}
<a class="button"{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% else %} role="link" aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.image-with-text.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-with-text.settings.image.label"
},
{
"type": "select",
"id": "image_position",
"options": [
{
"value": "20% 0",
"label": "t:sections.all.image_position.options__1.label"
},
{
"value": "top center",
"label": "t:sections.all.image_position.options__2.label"
},
{
"value": "80% 0",
"label": "t:sections.all.image_position.options__3.label"
},
{
"value": "20% 50%",
"label": "t:sections.all.image_position.options__4.label"
},
{
"value": "center center",
"label": "t:sections.all.image_position.options__5.label"
},
{
"value": "80% 50%",
"label": "t:sections.all.image_position.options__6.label"
},
{
"value": "20% 100%",
"label": "t:sections.all.image_position.options__7.label"
},
{
"value": "bottom center",
"label": "t:sections.all.image_position.options__8.label"
},
{
"value": "80% 100%",
"label": "t:sections.all.image_position.options__9.label"
}
],
"default": "center center",
"label": "t:sections.all.image_position.label",
"info": "t:sections.all.image_position.info"
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "image_first",
"label": "t:sections.image-with-text.settings.layout.options__1.label"
},
{
"value": "text_first",
"label": "t:sections.image-with-text.settings.layout.options__2.label"
}
],
"default": "image_first",
"label": "t:sections.image-with-text.settings.layout.label",
"info": "t:sections.image-with-text.settings.layout.info"
},
{
"type": "select",
"id": "text_box_position",
"options": [
{
"value": "top",
"label": "t:sections.image-with-text.settings.text_box_position.options__1.label"
},
{
"value": "middle",
"label": "t:sections.image-with-text.settings.text_box_position.options__2.label"
},
{
"value": "bottom",
"label": "t:sections.image-with-text.settings.text_box_position.options__3.label"
}
],
"default": "middle",
"label": "t:sections.image-with-text.settings.text_box_position.label"
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.all.text_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.all.text_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.all.text_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.all.text_alignment.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"label": "t:sections.image-with-text.settings.image_ratio.options__1.label",
"value": "adapt"
},
{
"label": "t:sections.image-with-text.settings.image_ratio.options__2.label",
"value": "450px"
},
{
"label": "t:sections.image-with-text.settings.image_ratio.options__3.label",
"value": "550px"
},
{
"label": "t:sections.image-with-text.settings.image_ratio.options__4.label",
"value": "650px"
},
{
"label": "t:sections.image-with-text.settings.image_ratio.options__5.label",
"value": "750px"
},
{
"label": "t:sections.image-with-text.settings.image_ratio.options__6.label",
"value": "100vh"
}
],
"default": "650px",
"label": "t:sections.image-with-text.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "full_width",
"default": false,
"label": "t:sections.image-with-text.settings.full_width.label"
},
{
"type": "header",
"content": "t:sections.image-with-text.settings.header__1.content"
},
{
"type": "select",
"id": "mobile_text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.all.mobile_text_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.all.mobile_text_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.all.mobile_text_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.all.mobile_text_alignment.label"
},
{
"type": "select",
"id": "mobile_image_ratio",
"options": [
{
"label": "t:sections.image-with-text.settings.mobile_image_ratio.options__1.label",
"value": "auto"
},
{
"label": "t:sections.image-with-text.settings.mobile_image_ratio.options__2.label",
"value": "250px"
},
{
"label": "t:sections.image-with-text.settings.mobile_image_ratio.options__3.label",
"value": "300px"
},
{
"label": "t:sections.image-with-text.settings.mobile_image_ratio.options__4.label",
"value": "400px"
},
{
"label": "t:sections.image-with-text.settings.mobile_image_ratio.options__5.label",
"value": "500px"
},
{
"label": "t:sections.image-with-text.settings.mobile_image_ratio.options__6.label",
"value": "100vh"
}
],
"default": "auto",
"label": "t:sections.image-with-text.settings.mobile_image_ratio.label",
"info": "t:sections.image-with-text.settings.mobile_image_ratio.info"
},
{
"type": "header",
"content": "t:sections.all.padding.header"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "t:sections.all.padding.unit",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "t:sections.all.padding.unit",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-with-text.blocks.heading.name",
"limit": 2,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image with text",
"label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-with-text.blocks.text.name",
"limit": 2,
"settings": [
{
"type": "richtext",
"id": "text",
"default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"label": "t:sections.image-with-text.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "typeset",
"label": "t:sections.all.text_size.options__1.label"
},
{
"value": "typeset2",
"label": "t:sections.all.text_size.options__2.label"
},
{
"value": "typeset3",
"label": "t:sections.all.text_size.options__3.label"
}
],
"default": "typeset2",
"label": "t:sections.all.text_size.label"
},
{
"type": "checkbox",
"id": "secondary_color",
"default": false,
"label": "t:sections.image-with-text.blocks.text.settings.secondary_color.label"
}
]
},
{
"type": "button",
"name": "t:sections.image-with-text.blocks.button.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
"info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"default": false,
"label": "t:sections.image-with-text.blocks.button.settings.button_style_secondary.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-with-text.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
]
}
{% endschema %}