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 |
---|---|
150 | |
110 | |
90 | |
53 | |
52 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By