Shopify themes, liquid, logos, and UX
I've been working on making my Dawn home page more clickable, and have successfully made my "Image with text" and "Multicolumn" sections clickable.
I'm still trying to make "Image banner" blocks clickable. Ideally, what I want is that if there's only a single button in the "Image banner" section (and it has a link) to expand the scope of the button so it activates if you click anywhere on the banner section. Alternatively, a way to have a section getting that makes the entire image background clickable, even when there's text.
Roughly loop the blocks in sections/image-banner.liquid checking for settings that have been set, then wrap the content in an anchor tag.
{%- for block in section.blocks -%}
{%- if block.type == 'buttons' and block.settings.button_label_1 != blank and block.settings.button_link_1 != blank -%}
{%- assign link = block.settings.button_link_1 -%}
{%- assign link_text = block.settings.button_label_1 -%}
{%- assign linkable = true -%}
{%- endif -%}
{%- endfor -%}
{% if linkable %}
<a href="{{link}}">{{link_text}}</a>
{% endif %}
{%- comment -%}Link wrapped content{%- endcomment -%}
{% if linkable %}
</a>
{% endif %}
User | RANK |
---|---|
74 | |
74 | |
69 | |
65 | |
40 |
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023