:Why Pop Up Blocks Are Important for Shopify Product Pages
: Types of Pop Up Blocks You Can Add on Shopify
: Step-by-Step Guide to Adding a Pop Up Block on Shopify
is a common question for many store owners who want to enhance user experience. Whether you’re aiming to display size guides, shipping details, or discount offers, adding a pop-up to your product pages can help reduce clutter and increase conversion. In this guide, we’ll walk you through the step-by-step process to add a clean and responsive pop-up block to your Shopify product information section.
Shopify supports promotional, informational, newsletter, and exit-intent pop-ups. Each type serves a unique purpose: promotional pop-ups show offers, informational pop-ups highlight details, and exit-intent pop-ups help retain visitors.
If you’d like, I can also help you write:
- The rest of the blog/tutorial content
- The meta description (shortened to <155 characters)
- Add outbound/internal link suggestions
- Suggest relevant images or screenshots for your Shopify tutorial
- Provide additional tips for increasing conversions with pop ups
Solution
I’ll add a new “custom_popup” block type that gives you more control over the popup content and styling.
{%- when 'custom_popup' -%}
<div class="product-custom-popup{% if block.settings.styled_as_button %} product-custom-popup--button{% endif %}" {{ block.shopify_attributes }}>
<modal-opener
class="product-popup-modal__opener quick-add-hidden"
data-modal="#CustomPopupModal-{{ block.id }}"
>
<button
id="ProductCustomPopup-{{ block.id }}"
class="{% if block.settings.styled_as_button %}button{% else %}link{% endif %} product-custom-popup__trigger"
type="button"
aria-haspopup="dialog"
>
{%- if block.settings.icon != 'none' -%}
{% render 'icon-accordion', icon: block.settings.icon %}
{%- endif -%}
<span>{{ block.settings.trigger_text | escape }}</span>
</button>
</modal-opener>
</div>You’ll also need to add the modal dialog code at the bottom of your section where the other popups are rendered:
{% assign custom_popups = section.blocks | where: 'type', 'custom_popup' %}
{%- for block in custom_popups -%}
<modal-dialog id="CustomPopupModal-{{ block.id }}" class="product-popup-modal" {{ block.shopify_attributes }}>
<div
role="dialog"
aria-label="{{ block.settings.trigger_text }}"
aria-modal="true"
class="product-popup-modal__content"
tabindex="-1"
>
<button
id="CustomModalClose-{{ block.id }}"
type="button"
class="product-popup-modal__toggle"
aria-label="{{ 'accessibility.close' | t }}"
>
{{- 'icon-close.svg' | inline_asset_content -}}
</button>
<div class="product-popup-modal__content-info">
{%- if block.settings.popup_heading != blank -%}
<h2 class="h3">{{ block.settings.popup_heading | escape }}</h2>
{%- endif -%}
<div class="rte">
{{ block.settings.popup_content }}
</div>
</div>
</div>
</modal-dialog>
{%- endfor -%}Add to Schema
Add this new block definition to your schema:
{
"type": "custom_popup",
"name": "Custom Popup",
"settings": [
{
"type": "text",
"id": "trigger_text",
"label": "Trigger Text",
"default": "Popup Trigger"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
}
],
"default": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
},
{
"type": "checkbox",
"id": "styled_as_button",
"label": "Style as button",
"default": false
},
{
"type": "text",
"id": "popup_heading",
"label": "Popup Heading",
"default": "Popup Title"
},
{
"type": "richtext",
"id": "popup_content",
"label": "Popup Content",
"default": "<p>Add your popup content here.</p>"
}
]
}CSS Styling (Optional)
Add this CSS to your theme’s stylesheet to style the new popup:
.product-custom-popup--button {
margin: 1rem 0
.product-custom-popup__trigger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.product-custom-popup__trigger .icon {
width: 1.5rem;
height: 1.5rem;
}Usage
Now you can add custom popup blocks in your product section with:
- Custom trigger text
- Optional icon
- Button or link styling
- Custom heading and rich text content
The popup will inherit the existing modal functionality from your theme, so no additional JavaScript is needed.
This enhanced popup block gives you more flexibility than the standard popup block that only uses page content.
For more details, visit the official Shopify documentation.
Shopify Docs
