The requester wanted a Shopify section with two portrait images beside text and a link whose underline disappears on hover. A reply noted that Prestige includes a suitable built-in “Multiple media with text” section. Because the requester uses Dawn 16.1.1, another participant supplied a custom Liquid section; after the file was mistakenly created in Assets rather than Sections, moving it to the Sections folder resolved the issue, and the requester confirmed it worked.
The requester then asked how to apply the same underline effect to buttons site-wide. A suggested global CSS rule styles Dawn buttons as underlined links, but a later reply cautioned that this also affects purchase-critical controls such as Add to cart and Checkout, potentially making them less noticeable, while branded Shop Pay or PayPal buttons remain unchanged. The latest recommendation is to exclude purchase buttons from the styling and test the changes on a duplicated theme, especially on mobile, before publishing. The custom section issue is resolved; the global styling choice remains open.
Hello, on my website, I am trying to create a button animation / layout similar as the second section on https://www.temptationvacation.co/ - “INTERMISSIN, THE FINAL CHAPTER”.
I would like 2 x portrait images on the left and text to the right, with that button animation, underlined on before with the underline removing on hover. Could someone help me?
Hi @ellacoker,
You can try this code in custom liquid block :
<div class="custom-intermissin-section">
<div class="images-wrapper">
<div class="portrait-img">
<img src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png" alt="Image 1">
</div>
<div class="portrait-img">
<img src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png" alt="Image 2">
</div>
</div>
<div class="content-wrapper">
<h2>INTERMISSIN, THE FINAL CHAPTER</h2>
<p>Aap yahan apni description ya sub-heading add kar sakti hain jo client ki requirement ke mutabiq ho.</p>
<a href="#" class="hover-underline-link">EXPLORE COLLECTION</a>
</div>
</div>
<style>
.custom-intermissin-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
max-width: 1300px;
margin: 60px auto;
padding: 0 40px;
}
.images-wrapper {
display: flex;
gap: 20px;
width: 55%;
}
.portrait-img {
width: 50%;
height: 520px;
overflow: hidden;
border-radius: 4px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.portrait-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.portrait-img:hover {
transform: translateY(-6px);
}
.portrait-img:hover img {
transform: scale(1.08);
}
.content-wrapper {
width: 40%;
}
.content-wrapper h2 {
font-size: 32px;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 20px;
color: #111;
line-height: 1.2;
}
.content-wrapper p {
font-size: 15px;
color: #666;
line-height: 1.6;
margin-bottom: 25px;
}
.hover-underline-link {
display: inline-block;
position: relative;
text-decoration: none;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 6px;
transition: letter-spacing 0.3s ease, color 0.3s ease;
}
.hover-underline-link::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #000;
left: 0;
bottom: 0;
transform-origin: right;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-underline-link:hover::after {
transform: scaleX(0);
}
.hover-underline-link:hover {
letter-spacing: 1.5px;
}
@media screen and (max-width: 768px) {
.custom-intermissin-section {
flex-direction: column;
padding: 0 20px;
gap: 30px;
}
.images-wrapper, .content-wrapper {
width: 100%;
}
.portrait-img {
height: 380px;
}
}
</style>
Hi @ellacoker,
The site you linked is built on the Prestige theme, and that part is Prestige’s own Multiple media with text section. The underline that disappears on hover is the theme’s built in link style, so on Prestige you can do this without any code: add that section, put your two portrait images in it, then add your heading, text and a button. The button’s style setting should have a link option, which gives you that underline.
I’ve added screenshots of that section below, before and on hover.
Hi @ellacoker
Dawn has no section like this built in, so you add a small one. No app needed.
two-portraits-text.liquid, then press Enter.
<style>
#shopify-section-{{ section.id }} .two-portraits {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.two-portraits__inner {
display: flex;
align-items: center;
gap: 6rem;
}
.two-portraits__images {
display: flex;
gap: 2rem;
width: 55%;
}
.two-portraits__image {
width: 50%;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.two-portraits__image img,
.two-portraits__image svg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.two-portraits__text {
width: 45%;
}
.two-portraits__text h2 {
margin: 0 0 1.2rem;
}
.two-portraits__text p {
margin: 0 0 2.4rem;
}
.two-portraits__link {
color: currentColor;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.6rem;
text-decoration-color: currentColor;
transition: text-decoration-color 0.3s ease;
}
.two-portraits__link:hover {
text-decoration-color: transparent;
}
@media screen and (max-width: 749px) {
.two-portraits__inner {
flex-direction: column;
gap: 3rem;
}
.two-portraits__images,
.two-portraits__text {
width: 100%;
}
}
</style>
<div class="two-portraits color-{{ section.settings.color_scheme }} gradient">
<div class="page-width two-portraits__inner">
<div class="two-portraits__images">
{%- for i in (1..2) -%}
{%- assign key = 'image_' | append: i -%}
<div class="two-portraits__image">
{%- if section.settings[key] != blank -%}
{{ section.settings[key] | image_url: width: 1000 | image_tag: loading: 'lazy', widths: '300, 500, 800, 1000', sizes: '(min-width: 750px) 25vw, 50vw' }}
{%- else -%}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
{%- endfor -%}
</div>
<div class="two-portraits__text">
{%- if section.settings.heading != blank -%}
<h2 class="h2">{{ section.settings.heading | escape }}</h2>
{%- endif -%}
{%- if section.settings.text != blank -%}
<p>{{ section.settings.text | escape }}</p>
{%- endif -%}
{%- if section.settings.button_label != blank -%}
<a class="two-portraits__link" href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
{%- endif -%}
</div>
</div>
</div>
{% schema %}
{
"name": "Two portraits + text",
"settings": [
{ "type": "image_picker", "id": "image_1", "label": "Image 1" },
{ "type": "image_picker", "id": "image_2", "label": "Image 2" },
{ "type": "text", "id": "heading", "label": "Heading", "default": "Intermission, the final chapter." },
{ "type": "text", "id": "text", "label": "Text", "default": "The moments between movement and ease." },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Your Intermission." },
{ "type": "url", "id": "button_link", "label": "Button link" },
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "scheme-1"
},
{ "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 36 },
{ "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 36 }
],
"presets": [
{ "name": "Two portraits + text" }
]
}
{% endschema %}
Thank you. I am on dawn 16.1.1
@ellacoker the file landed in the assets folder. It needs to sit in sections. The steps are the same on Dawn 16.1.1.
two-portraits-text.liquid and press Enter.Thank you. This worked great. One other thing - could you give me the css so that all of the buttons on my site are this same underlin effect? Thank you!
Hey @ellacoker, on Dawn this goes in Theme settings, so every button on the site picks it up.
.button,
button.shopify-payment-button__button--unbranded {
background-color: transparent;
color: rgb(var(--color-foreground));
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.6rem;
text-decoration-color: currentColor;
transition: text-decoration-color 0.3s ease;
}
.button::before,
.button::after,
button.shopify-payment-button__button--unbranded::before,
button.shopify-payment-button__button--unbranded::after {
display: none;
}
.button:hover,
button.shopify-payment-button__button--unbranded:hover {
text-decoration-color: transparent;
}
Your buttons now match the “Your Intermission.” link:
On hover the line fades out:
One thing to check before leaving that global CSS live: in Dawn, .button also covers Add to cart, the Check out button in the cart drawer and on the cart page, and the Sold out state. As thin underlined text, the two buttons that actually take the money get easy to miss, especially on a phone. If Shop Pay or PayPal is your Buy it now button, it stays a solid branded button, so the product page ends up with a text link sitting next to a big coloured block.
If you want the editorial look everywhere except the purchase path, swap Ploqo’s code for this version, which skips those buttons:
.button:not(.product-form__submit):not(.cart__checkout-button) {
background-color: transparent;
color: rgb(var(--color-foreground));
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.6rem;
transition: text-decoration-color 0.3s ease;
}
.button:not(.product-form__submit):not(.cart__checkout-button)::before,
.button:not(.product-form__submit):not(.cart__checkout-button)::after {
display: none;
}
.button:not(.product-form__submit):not(.cart__checkout-button):hover {
text-decoration-color: transparent;
}
Leaving Add to cart out also means a sold-out product still shows a greyed-out button, not an underlined link that looks clickable but isn’t.
With Black Friday about two weeks out, I’d test this on a copy of the theme first (Online Store > Themes > … > Duplicate) and preview it on mobile before publishing.