How to open a popup through an existing button on your Shopify store
With Pop Convert, you can use your own button to trigger a popup campaign on your Shopify store. Follow these steps to get it set up:
Before connecting the popup to your button, ensure you have created a popup campaign in your Pop Convert app:
Log in to your Pop Convert account.
Navigate to the Popups section.
Create a new popup campaign and customize it to your liking.
Save the campaign and note its Campaign ID (you'll need this later).
To make your existing button open a popup, you need to add the pc-show-campaign attribute with your campaign ID. Here’s how:
Open your Shopify admin panel.
Navigate to Online Store > Themes.
Click Actions > Edit Code.
Locate the Liquid file that contains the button code. For example, it might be in sections, snippets, or templates.
Modify the button code by adding the pc-show-campaign attribute, like this:
Replace YOUR_CAMPAIGN_ID with the actual Pop Convert popup campaign ID.
If you want to customize the button’s appearance, you can add some CSS styling:
You can paste this style block into the same Liquid file or add it to your theme’s CSS file.
Save your changes and preview your store. Click the button to ensure it opens the popup you linked.
If the popup doesn’t appear, ensure that the Pop Convert script is active on your store by checking for errors in your browser’s developer tools console.
If your button isn’t working as expected:
Double-check the Campaign ID.
Ensure that Pop Convert is properly installed and the campaign is active.
Verify that the pc-show-campaign attribute is correctly added to the button.
By following these steps, you can seamlessly connect your Shopify store’s buttons to Pop Convert campaigns and create a more engaging experience for your visitors. Need more help? Contact our support team through the app!
Step 1: Create a popup campaign in Pop Convert
Before connecting the popup to your button, ensure you have created a popup campaign in your Pop Convert app:
Log in to your Pop Convert account.
Navigate to the Popups section.
Create a new popup campaign and customize it to your liking.
Save the campaign and note its Campaign ID (you'll need this later).
Step 2: Add the code to your button
To make your existing button open a popup, you need to add the pc-show-campaign attribute with your campaign ID. Here’s how:
Open your Shopify admin panel.
Navigate to Online Store > Themes.
Click Actions > Edit Code.
Locate the Liquid file that contains the button code. For example, it might be in sections, snippets, or templates.
Modify the button code by adding the pc-show-campaign attribute, like this:
<button pc-show-campaign="YOUR_CAMPAIGN_ID" class="pc-campaign-button">
Open Popup
</button>Replace YOUR_CAMPAIGN_ID with the actual Pop Convert popup campaign ID.
Step 3: Style the button (Optional)
If you want to customize the button’s appearance, you can add some CSS styling:
.pc-campaign-button {
display: inline-block;
background-color: #007bff;
color: #ffffff;
font-size: 14px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.pc-campaign-button:hover {
background-color: #0056b3;
}
.pc-campaign-button:active {
background-color: #004085;
}
</style>You can paste this style block into the same Liquid file or add it to your theme’s CSS file.
Step 4: Test your button
Save your changes and preview your store. Click the button to ensure it opens the popup you linked.
If the popup doesn’t appear, ensure that the Pop Convert script is active on your store by checking for errors in your browser’s developer tools console.
Troubleshooting
If your button isn’t working as expected:
Double-check the Campaign ID.
Ensure that Pop Convert is properly installed and the campaign is active.
Verify that the pc-show-campaign attribute is correctly added to the button.
By following these steps, you can seamlessly connect your Shopify store’s buttons to Pop Convert campaigns and create a more engaging experience for your visitors. Need more help? Contact our support team through the app!
Updated on: 07/01/2025
Thank you!