How to change pop-up link to button in dawn theme

Shopify Discussion

Topic summary

A user wants to convert a pop-up link into a button in Shopify’s Dawn theme and provides a reference image showing the desired result.

Two solutions were offered:

CSS Approach (MandasaTech):

  • Navigate to: Online Store → Edit Code → Assets → base.css
  • Add custom CSS targeting .product-popup-modal__button and .product-popup-modal__opener classes
  • Styles include flexbox display, padding, border-radius, background colors using theme variables, and width adjustments

HTML/Liquid Approach (sunilthakor):

  • Open the main-product.liquid section file
  • Search for specific markup related to the pop-up
  • Replace the existing tag with a button element using provided code
  • Modify the product-popup-modal__button class within the main-product.liquid file

Both solutions aim to transform the link element into a styled button component. The user shared their store URL for reference.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hey, How can i change pop-up link to a button in dawn theme like this:-

Untitled design.png
Untitled design.png995Ă—305 47.6 KB

Please help. Thanks in advance!

1 Like
2

Hi suryagoswami7 sir can you share the shop link?

3

sure!

https://thesmugglerstore.in/

4

Hello @suryagoswami7

Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

.product-popup-modal__button {
justify-content: center;
align-items: center;
border: 0;
padding: 0 3rem;
cursor: pointer;
font: inherit;
font-size: 1.5rem;
text-decoration: none;
color: rgb(var(–color-button-text));
transition: box-shadow var(–duration-short) ease;
-webkit-appearance: none;
appearance: none;
background-color: rgba(var(–color-button),var(–alpha-button-background));
width: 100%;
display: flex !important;
border-radius: 10px;
}

.product-popup-modal__opener {
display: block;
max-width: 440px;
}

5

Hi @suryagoswami7

  1. Go to online store → theme → edit code

https://prnt.sc/vcqPLV_Hlo6r

  1. open “main-product.liquid” section.

  2. search for this keyword “product-popup-modal__button” inside the “main-product.liquid”

  3. replace the button tag with the given code. https://prnt.sc/mN7JrFeRxXQ0