Shopify themes, liquid, logos, and UX
Hi Everyone,
I'm customizing Down theme for my shop.
I created an "image with text" section on homepage and I'm trying to open the link that I added as a popup.
How can I do that?
Thank's so much.
yes you have easy just check this example
https://codepen.io/imprakash/pen/GgNMXO
Thank's @KetanKumar,
but how can I integrate this code on text element on the theme?
I can add just a link, not classes or html code... 😉
yes its reuired to change html,liduie code and css
Here is an example, though you might need to adjust the styles based on your current theme:
Sections/popup.liquid
<div id="{{ section.settings.trigger }}" class="popup__overlay"> <div class="popup__box"> <h2>{{ section.settings.title }}</h2> <a class="popup__close" href="#">×</a> <div class="popup__content"> {{ section.settings.content }} </div> </div> </div> {% schema %} { "name": "Popup", "settings": [ { "id": "trigger", "type": "text", "label": "ID", "info": "Unique ID for popup trigger" }, { "id": "title", "type": "text", "label": "Title" }, { "id": "content", "type": "richtext", "label": "Content" } ], "presets": [{ "name": "Popup", "category": "Window" }] } {% endschema %} {% stylesheet %} .popup__overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; background: rgb(0, 0, 0, 0.7); transition: opacity 500ms ease-in-out; visibility: hidden; opacity: 0; } .popup__overlay:target { visibility: visible; opacity: 1; z-index: 99; } .popup__box { padding: 24px; background: #fff; border-radius: 8px; width: 40%; position: relative; } .popup__box h2 { color: #333; font-size: 2em; font-weight: bold; font-family: Verdana, sans-serif; margin-top: 0; } .popup__close { position: absolute; top: 20px; right: 30px; transition: all 200ms ease-out; color: #333; font-size: 30px; font-weight: bold; line-height: 1.25; text-decoration: none; } .popup__close:hover { color: #660000; } .popup__content { max-height: 30%; overflow: auto; } @media screen and (max-width: 1280px) { .popup__box { width: 60%; } } @media screen and (max-width: 720px) { .popup__box { width: 80%; } } {% endstylesheet %} {% javascript %} {% endjavascript %}
Now you just link to the id, eg:
<a href="#popup-id">Open Popup</a>
This doesn't work as it is. I copied the code you posted and added it to the file popup.liquid into Sections, then created a Custom Liquid section in my Theme Customization, with the HTML link popup, and it never works.
Hello David,
I tested the exact code copy/pasted into an example site here:
https://sl-popup-example.myshopify.com/
Pass: popup
You can see that it's working fine, but due to some Shopify weirdness, you may want to try editing the {% stylesheet %} area by maybe adding a new line, saving, and then removing the new line, and saving again. Sometimes I've noticed you can get some cached weirdness and some updates get ignored. You can also move styles into a separate file if you'd like.
Would you be able to provide more detail? I created the section with your code (thank you). I created a page where I've added the section and it looks like this:
Is this page the actual popup and does that look right? So on the page that I want the popup, I link to it with the ID? If so, this doesn't seem to work for me.
Looking at your popup, this part is exactly what I was mentioning about some Shopify weirdness with the CSS generation/caching:
This will normally be hidden, the fact that you're seeing it means the CSS wasn't applied properly. To fix this you can just add a new line within the {% stylesheet %} section, and save the file, then delete the newline then save again. This seems to force the stylesheet to regenerate and display properly.
As for your other question, the popup section should be added on the same page it's meant to be displayed on, which would be the same page if you use a link like `#popup-id` or a specific page if linked to like `/other-page#popup-id`.
I am learning how to code so I apologize for such a stupid question.... Where does the <a href="#popup-id">Open Popup</a> go? I am using Dawn 5.0. Do I put it in the theme.liquid layout file at the bottom?
Thank you.
Hello Smiley,
That was me demonstrating a hyperlink since that's how it's done in HTML, but you can link to it from anywhere in the Shopify theme CMS that lets you add a link, by adding the ID you use for the pop-up. ie. Typing #WHAT_YOU_CHOSE in the link area in the CMS textbox, and clicking the little pop-up above the link field to save your entry.
@Jsilvermist thanks for your code but now the latest version Dawn theme has a popup why not use that.
I'm not sure what you're referring to, could you clarify?
Add a pop up modal with a timer
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025