How do I center an image using custom liquid?

Riz_bangee · January 25, 2022, 8:38am

Hi,

I need help to center this image to the middle of the page width. I have inserted this image using custom liquid.

This is in the Terms & Conditions Page

url: https://pure-date.myshopify.com/

pw: triwhi

himanshuhkm · January 25, 2022, 9:31am

@Riz_bangee
which page it is??

Riz_bangee · January 25, 2022, 9:33am

Terms & Conditions page

himanshuhkm · January 25, 2022, 9:36am

@Riz_bangee
copy and paste below
shopify admin>>>online store>>>Actions>>>Edit Code>>>assets>>>base.css
paste here at the last of page

section#shopify-section-template--14359006380075__1643097635ea6c7761 {
    text-align: center;
}

Riz_bangee · January 25, 2022, 9:40am

@himanshuhkm It worked! thank you!

Riz_bangee · January 25, 2022, 9:42am

@himanshuhkm

do you know how to merge the newsletter email sign up in Footer with the quick links? I’ve been trying to edit this for the past week - but havent found any help…

i want my footer to look like this

himanshuhkm · January 25, 2022, 9:44am

@Riz_bangee

Yes I can Do

Riz_bangee · January 25, 2022, 9:54am

@himanshuhkm so, how can i do this? I know i need to somehow merge the newsletter code to the grid wrapper…


          {%- for block in section.blocks -%}  
          

              {%- if block.settings.heading != blank -%}
               ## {{- block.settings.heading | escape -}}
              {%- endif -%}
                  
              {%- case block.type -%}
                {%- when 'text' -%}
                  
                    {{ block.settings.subtext }}
                  

                {%- when 'link_list' -%}
                  {%- if block.settings.menu != blank and block.settings.heading != blank -%}
                    
                      {%- for link in block.settings.menu.links -%}
                        - {{ link.title }}
                          
                        
                      {%- endfor -%}
                    

                  {%- endif -%}
                {%- when 'image' -%}
                  
                    {%- if block.settings.image != blank -%}
                      {%- assign image_size = block.settings.image_width | append: 'x' -%}
                      
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                    {%- endif -%}
                  

                {%- endcase -%}
            

          {%- endfor -%}
        

      {%- endif -%}

      
        {%- if section.settings.newsletter_enable -%}
          

            {%- if section.settings.newsletter_heading != blank -%}
              ## {{ section.settings.newsletter_heading | escape }}
            {%- endif -%}
            {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
              
              

                

                  
                  
                  
                

                {%- if form.errors -%}
                  <small>{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              

              {%- if form.posted_successfully? -%}
                ### {% render 'icon-success' %}{{ 'newsletter.success' | t }}
              {%- endif -%}
            {%- endform -%}
          

        {%- endif -%}

        {%- if section.settings.show_social -%}
          
            {%- if settings.social_twitter_link != blank -%}
              - {%- render 'icon-twitter' -%}
                    {{ 'general.social.links.twitter' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_facebook_link != blank -%}
              - {%- render 'icon-facebook' -%}
                    {{ 'general.social.links.facebook' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_pinterest_link != blank -%}
              - {%- render 'icon-pinterest' -%}
                    {{ 'general.social.links.pinterest' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_instagram_link != blank -%}
              - {%- render 'icon-instagram' -%}
                    {{ 'general.social.links.instagram' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_tiktok_link != blank -%}
              - {%- render 'icon-tiktok' -%}
                    {{ 'general.social.links.tiktok' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_tumblr_link != blank -%}
              - {%- render 'icon-tumblr' -%}
                    {{ 'general.social.links.tumblr' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_snapchat_link != blank -%}
              - {%- render 'icon-snapchat' -%}
                    {{ 'general.social.links.snapchat' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_youtube_link != blank -%}
              - {%- render 'icon-youtube' -%}
                    {{ 'general.social.links.youtube' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_vimeo_link != blank -%}
              - {%- render 'icon-vimeo' -%}
                    {{ 'general.social.links.vimeo' | t }}
                
              
            {%- endif -%}
          

        {%- endif -%}
      

    
  {%- endif -%}

himanshuhkm · January 25, 2022, 9:55am

@Riz_bangee
Wait let me check

himanshuhkm · January 25, 2022, 10:02am

@Riz_bangee
Check this once


    {%- for block in section.blocks -%}  
    

        {%- if block.settings.heading != blank -%}
         ## {{- block.settings.heading | escape -}}
        {%- endif -%}
            
        {%- case block.type -%}
          {%- when 'text' -%}
            
              {{ block.settings.subtext }}
            

          {%- when 'link_list' -%}
            {%- if block.settings.menu != blank and block.settings.heading != blank -%}
              
                {%- for link in block.settings.menu.links -%}
                  - {{ link.title }}
                    
                  
                {%- endfor -%}
              

            {%- endif -%}
          {%- when 'image' -%}
            
              {%- if block.settings.image != blank -%}
                {%- assign image_size = block.settings.image_width | append: 'x' -%}
                
              {%- else -%}
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
              {%- endif -%}
            

          {%- endcase -%}
      

    {%- endfor -%}
    
        {%- if section.settings.newsletter_enable -%}
          

            {%- if section.settings.newsletter_heading != blank -%}
              ## {{ section.settings.newsletter_heading | escape }}
            {%- endif -%}
            {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
              
              

                

                  
                  
                  
                

                {%- if form.errors -%}
                  <small>{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              

              {%- if form.posted_successfully? -%}
                ### {% render 'icon-success' %}{{ 'newsletter.success' | t }}
              {%- endif -%}
            {%- endform -%}
            {%- if section.settings.show_social -%}
            
              {%- if settings.social_twitter_link != blank -%}
                - {%- render 'icon-twitter' -%}
                      {{ 'general.social.links.twitter' | t }}
                  
                

              {%- endif -%}
              {%- if settings.social_facebook_link != blank -%}
                - {%- render 'icon-facebook' -%}
                      {{ 'general.social.links.facebook' | t }}
                  
                

              {%- endif -%}
              {%- if settings.social_pinterest_link != blank -%}
                - {%- render 'icon-pinterest' -%}
                      {{ 'general.social.links.pinterest' | t }}
                  
                

              {%- endif -%}
              {%- if settings.social_instagram_link != blank -%}
                - {%- render 'icon-instagram' -%}
                      {{ 'general.social.links.instagram' | t }}
                  
                

              {%- endif -%}
              {%- if settings.social_tiktok_link != blank -%}
                - {%- render 'icon-tiktok' -%}
                      {{ 'general.social.links.tiktok' | t }}
                  
                

              {%- endif -%}
              {%- if settings.social_tumblr_link != blank -%}
                - {%- render 'icon-tumblr' -%}
                      {{ 'general.social.links.tumblr' | t }}
                  
                

              {%- endif -%}
              {%- if settings.social_snapchat_link != blank -%}
                - {%- render 'icon-snapchat' -%}
                      {{ 'general.social.links.snapchat' | t }}
                  
                

              {%- endif -%}
              {%- if settings.social_youtube_link != blank -%}
                - {%- render 'icon-youtube' -%}
                      {{ 'general.social.links.youtube' | t }}
                  
                

              {%- endif -%}
              {%- if settings.social_vimeo_link != blank -%}
                - {%- render 'icon-vimeo' -%}
                      {{ 'general.social.links.vimeo' | t }}
                  
                
              {%- endif -%}
            

          {%- endif -%}
          

          
        {%- endif -%}
      

      

  

{%- endif -%}

{%- endif -%}

Riz_bangee · January 25, 2022, 10:06am

@himanshuhkm it worked! But now how do i align [move up] the heading ‘subscribe to our newsletter’ so that it is inline with ‘Our Policies’

himanshuhkm · January 25, 2022, 10:19am

@Riz_bangee
do remove this"}"

Riz_bangee · January 25, 2022, 10:22am

@himanshuhkm better! still need to move up a bit

himanshuhkm · January 25, 2022, 10:24am

@Riz_bangee
Replace this

from

Riz_bangee · January 25, 2022, 10:27am

@himanshuhkm Thank you! Thank you for all your help!

himanshuhkm · January 25, 2022, 10:28am

@Riz_bangee
your welcome
do recommend your freind about me and you have my email from my caption

Riz_bangee · January 25, 2022, 10:33am

@himanshuhkm Will do!

Maybe you can help with this - https://community.shopify.com/topic/1462500

Topic		Replies	Views
How to change this code to fit on my website i tried inserting on personalized liquid Store Design design , customizations , collection-page , css , shopify-themes , html	9	65	August 13, 2023
Change media logo and newsletter to center - Dawn 2.0 Store Design	4	19	January 17, 2022
Center Custom liquid H1 titles on homepage Store Design design	5	68	September 25, 2025
Logo alignment Store Design design , customizations , css	6	50	February 23, 2026
Custom Liquid Block alignment issue Shopify Discussion troubleshooting	6	60	November 27, 2024

How do I center an image using custom liquid?

Related topics