Style product pop-up link to look like a button

winstonmaz
Shopify Partner
1 0 0

Hi, 

I'm using the Cascade theme, which comes with a pop-up block in the product template. I will use this as a contact button that brings up a contact form. I would like the link to look like the "add to cart" button but use our secondary color scheme.

 

Here is the code for the product-block-popup.liquid:

<div
class="{{ block_base_classes }} my-3 group-first:mt-0"
data-disable-variance
{{ block.shopify_attributes }}
>
<a
class="text-theme-basic flex items-center group break-word"
href="#Popup-{{ section.id }}-{{ block.id }}"
@Click.prevent="$store.modals.open('#Popup-{{ section.id }}-{{ block.id }}')"
role="button"
>
{% render 'product-icon',
icon: block.settings.icon,
classes: 'text-xs mr-3 w-4 h-4 shrink-0 group-hover:fill-scheme-accent'
%}
<span class="theme-link group-hover:text-scheme-accent">
{{- block.settings.link_label | escape | strip -}}
</span>
</a>
</div>

 

Screen Shot 2024-04-18 at 10.09.51 AM.png

Reply 1 (1)

ThePrimeWeb
Shopify Partner
2077 596 466

Hey @winstonmaz,

 

Add the button secondary class to the link

 

The whole code should be

<div
class="{{ block_base_classes }} my-3 group-first:mt-0"
data-disable-variance
{{ block.shopify_attributes }}
>
<a
class="button button--secondary text-theme-basic flex items-center group break-word"
href="#Popup-{{ section.id }}-{{ block.id }}"
@Click.prevent="$store.modals.open('#Popup-{{ section.id }}-{{ block.id }}')"
role="button"
>
{% render 'product-icon',
icon: block.settings.icon,
classes: 'text-xs mr-3 w-4 h-4 shrink-0 group-hover:fill-scheme-accent'
%}
<span class="theme-link group-hover:text-scheme-accent">
{{- block.settings.link_label | escape | strip -}}
</span>
</a>
</div>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!