Can we hide a section on home page if the gift card is not enabled?

What exactly we need is we have section in the homepage that we have created for Giftcard, but we want that when all the gift card are disabled then that section should also hide automatically.

For example the same thing use to happen on shopify checkout, that when the giftcard is enabled in the store there is a box in the checkout where we can add that giftcard and once all the gift card is disabled then that box removes automatically.

We want the same type of functionality for the section.

I have tried few things for this but nothing worked for me. Is there a way that we can achieve this automatically?

I know we can hide the section manually from customize but, Is there any way we can have the functionality as it is in the checkout page?

Hi Sahilrev,

There is a liquid object for shop.accepts_gift_cards which returns a boolean based on a stores setting for accepting gift cards. You could try to use the output of this to conditionally render content based on whether a store accepts gift cards or not, eg:

{% if shop.accepts_gift_cards == true %}
  

Another approach you could explore is to display the giftcard content on the home page as a app block/ theme app extension rather than as a typical theme section. This might give you more control over when it's displayed, or at least since it's associated with the app rather than with the theme you could build some functionality to turn on/off visibility based on conditions that you set.

Hope this helps!

Hey @Lorrainelillian how can we do it? Is it different from what liam has explained?

Hey @Liam thanks for the explanation but I have an issue as I am using the same section in other things as well so if I will use this condition inside that section then it will cause issue in all the other parts where I have used this section.

For Better explanation here is the example: I have used Image with Text Section for giftcard and also the section is used in different parts on homepage as well. So, in homepage I have used this section for 4-5 times, and if I will use the if/else condition then all other sections will also get effected. So how can I use if/else condition in the section?

Did I have to create a new section and then use this condition in that specific section?

Hey @Liam I have tried the if/else condition as specified by you, but it is not working as expected. I have created a different section just for giftcard with this condition in theme files, but the section use to display irrespective of the if/else condition i.e. even when I have deactivated all the giftcards from store the section is displaying on the homepage it doesn’t hide automatically? Can you please specify if I am doing something wrong here?

Here is the code of the section:

{% if shop.accepts_gift_cards == true %}
  
    {%- liquid
      assign has_background_color = false
    
      if section.settings.background_color != blank and section.settings.background_color != 'rgba(0,0,0,0)'
        assign has_background_color = true
      endif
    
      assign show_animations = false
      if settings.enable_section_animations and section.settings.enable_animation
        assign show_animations = true
      endif
    -%}
    
    {%- capture image_sizes -%}
      {%- if section.settings.show_small_image -%}
        (min-width: 720px) calc(calc(50vw - clamp(18px, 3.3vw, 3.3vw)) * .93), calc((100vw - 80px) * .93)
      {%- else -%}
        (min-width: 720px) calc(calc(50vw - clamp(18px, 3.3vw, 3.3vw)), calc(100vw - 80px)
      {%- endif -%}
    {%- endcapture -%}
    
    {%- capture section_classes -%}
      section section--divider-{{ section.settings.divider_style }}
      {{ section.settings.section_padding }}
    {%- endcapture -%}
    
    
      

        

          

            

              
    
              {%- if section.settings.show_small_image -%}
                
                  {%-
                    render 'image' with
                    wrapper_class: "image-with-text__small-image",
                    image: section.settings.image_small,
                    sizes: "(max-width: 720px) calc(90vw * .42), (max-width: 1500px) calc(50vw * .42), 300px",
                    aspect_ratio: section.settings.image_small_aspect_ratio,
                    focal_point: section.settings.image_small_focal_point,
                    include_placeholder: true,
                    animate: show_animations
                  -%}
                

              {%- endif -%}
            

          

    
          
            

              {%- for block in section.blocks -%}
                {%- case block.type -%}
                  {%- when 'accent' -%}
                    {%- unless block.settings.accent == blank -%}
                      

                        {{ block.settings.accent }}
                      

                    {%- endunless -%}
                  {%- when 'heading' -%}
                    {%- unless block.settings.title == blank -%}
                      ## 
                        {{ block.settings.title }}
                      
                    {%- endunless -%}
                  {%- when 'subheading' -%}
                    {%- unless block.settings.subheading == blank -%}
                      ## 
                        {{ block.settings.subheading }}
                      
                    {%- endunless -%}
                  {%- when 'text' -%}
                    {%- unless block.settings.text == blank -%}
                      
                        {{ block.settings.text }}
                      

                    {%- endunless -%}
                  {%- when 'image' -%}
                    {%-
                      render 'image-block' with
                      shopify_attributes: block.shopify_attributes,
                      wrapper_class: 'image-with-text__text-container-image section-blocks__image  section-blocks__image',
                      image: block.settings.image,
                      width: block.settings.image_size,
                      mobile_width: block.settings.image_size_mobile,
                      break_to_mobile_at: '720',
                      align: section.settings.text_alignment
                    -%}
                  {%- when 'button' -%}
                    {%-
                      render 'button-block' with
                      wrapper_class: "image-with-text__text-container-button section-blocks__button",
                      link: block.settings.link,
                      label: block.settings.link_text,
                      button_style: block.settings.button_style,
                      is_overlay: true,
                      button_alignment: section.settings.text_alignment,
                      buttons_can_inline: true,
                      forloop: forloop
                    -%}
                  {%- when 'play-button' -%}
                    {%-
                      render 'play-button-block' with
                      wrapper_class: 'image-with-text__text-container-play-button section-blocks__video-button',
                      shopify_attributes: block.shopify_attributes,
                      poster_image: block.settings.poster_image,
                      poster_aspect: block.settings.aspect_ratio,
                      video_url: block.settings.video_url,
                      label: block.settings.text,
                      button_alignment: section.settings.text_alignment,
                      icon_style: block.settings.icon_style
                    -%}
                  {%- when 'border' -%}
                    {%- render 'border-block' -%}
                  {%- when 'spacer' -%}
                    {%- render 'spacer-block' with space: block.settings.space -%}
                {%- endcase -%}
              {%- endfor -%}
            

          

        

      

    

{% endif %}

Hi again Sahilrev,

I’ve tested out a few things on my side and it does look like there are limitations with the shop.accepts_gift_cards Liquid object I wasn’t aware of, that might not work for this usecase. From testing it seems that:

  • When a store has not created any gift card codes, shop.accepts_gift_cards will return “false”.
  • Once a gift card is created for the first time shop.accepts_gift_cards will return “true”.
  • After this point it doesn’t look like shop.accepts_gift_cards can return “false” again - even if you disable all gift cards on a store, shop.accepts_gift_cards continues to return “true”.

I have connected with our internal team to see if this is expected behaviour or a bug, and I’ll update here when I find out more.

Another option to conditionally display content could be achieved with a custom app that makes a call to retrieve a list of gift cards, and check the status, then you could display the content if gift cards are enabled or not. If this is not practical you could look into seeing if Shopify Flow could have triggers for adjusting visibility based on gift cards or may need to manually turn on/off visibility of the section.

Hope this helps,

Hey @Liam thanks for the reply, I will wait for your update till then I will look into shopify flow, if we can achieve this from there, but I think shopify flow doesn’t have this type of capability that it can hide a section on basis of any trigger, still will look into this.

Hey @Liam Is there any update on this?

Hey @Liam Still waiting for the update, Is there any update on shop.accepts_gift_cards Liquid object?