Example 4

The composition and configuration of the specific sections comprising this footer example are thoroughly described and documented. Consult the designated chapter for detailed insights: Footer Documentation.

Manage the Main Footer Section's Appearance

Go to Sections → Footer and apply the following style settings:

  • Background:

    • Type: Color

    • Color: #373E48

  • Colors Lines: #8B94A6

Additionally, make the following changes in Theme Settings:

  • Theme Settings: Colors

    • Accent Color: #E53935

  • Theme Settings: Typography

    • HEADINGS (H1-H3):

      • Font Type: Google

      • Google Font: Bebas Neue

      • Google Font Weight: 400

      • Font Size Scale: 140% (Mobile: 140%)

    • HEADINGS (H4-H6):

      • Font Type: Google

      • Google Font: Roboto Condensed

      • Google Font Weight: 500

      • Font Size Scale: 140% (Mobile: 140%)

    • BODY:

      • Font Type: Google

      • Google Font: Roboto Condensed

      • Google Font Weight: 400

      • Google Bold Font Weight: 700

      • Font Size Scale: 120% (Mobile: 129%)

    • MAIN MENU:

      • Font Type: Google

      • Google Font: Roboto Condensed

      • Google Font Weight: 500

      • Font Size Scale: 120% (Mobile: 120%)

Add Inner Sections to the Footer

You have to add the following inner sections to the footer in this exact sequence:

  • Media with text

  • Empty column

  • Menu

  • Menu

  • Media with text

Configure the First "Media with text" Section

Manage the first "Media with text" section as follows:

  • SVG Code: Paste the provided SVG code into the Svg code field.

<svg width="146" height="41" viewBox="0 0 146 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M56 12.4028H60.2348L62.1924 34.0722H62.2723L64.3498 12.4028H69.1439L71.2213 34.0722H71.3012L73.2588 12.4028H77.0542L74.2177 40.5972H68.7444L66.7468 21.5861H66.6669L64.6694 40.5972H58.8365L56 12.4028Z" fill="#E53935"></path>
<path d="M85.6293 41C83.472 41 81.8206 40.3824 80.6754 39.1472C79.5301 37.912 78.9575 36.1667 78.9575 33.9111V19.0889C78.9575 16.8333 79.5301 15.088 80.6754 13.8528C81.8206 12.6176 83.472 12 85.6293 12C87.7867 12 89.438 12.6176 90.5832 13.8528C91.7285 15.088 92.3011 16.8333 92.3011 19.0889V33.9111C92.3011 36.1667 91.7285 37.912 90.5832 39.1472C89.438 40.3824 87.7867 41 85.6293 41ZM85.6293 36.9722C87.1474 36.9722 87.9065 36.0458 87.9065 34.1931V18.8069C87.9065 16.9542 87.1474 16.0278 85.6293 16.0278C84.1112 16.0278 83.3521 16.9542 83.3521 18.8069V34.1931C83.3521 36.0458 84.1112 36.9722 85.6293 36.9722Z" fill="white"></path>
<path d="M95.2731 12.4028H99.6677V24.2847L105.261 12.4028H109.655L104.422 22.7542L109.735 40.5972H105.141L101.426 28.0306L99.6677 31.6153V40.5972H95.2731V12.4028Z" fill="white"></path>
<path d="M111.815 12.4028H116.21V40.5972H111.815V12.4028Z" fill="white"></path>
<path d="M119.501 12.4028H131.487V16.4306H123.896V23.8819H129.928V27.9097H123.896V36.5694H131.487V40.5972H119.501V12.4028Z" fill="white"></path>
<path d="M134.015 12.4028H146V16.4306H138.409V23.8819H144.442V27.9097H138.409V36.5694H146V40.5972H134.015V12.4028Z" fill="white"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5001 38.2574H24.9271V40.5943L23.2738 40.6792L22.9157 38.4945L21.787 38.6793L22.133 40.789L20.6276 41C20.2059 39.9719 19.5457 37.4106 18.819 37.2699L16.8746 36.8927L18.3383 38.4311L18.4932 38.8095L16.7648 39.504C15.4506 38.4375 14.6523 37.8982 13.1221 37.2298C13.9262 34.2146 15.5904 34.024 14.2266 31.3813L13.4115 33.3794L13.218 33.1051C11.0102 29.9754 11.0997 26.9904 12.0471 23.433C12.0471 23.433 10.5839 25.3416 9.7636 27.7344C-3.44857 24.55 -2.34293 8.99274 7.64418 4.70473C11.4405 3.07449 10.5608 0 10.5608 0C10.5608 0 14.4963 3.5871 10.3291 7.22012C6.16192 10.8537 5.83844 15.2318 7.73662 17.9803C8.85092 19.5942 11.3533 20.137 13.1966 20.1062C18.9333 9.59834 32.0664 9.59834 37.8037 20.1062C39.6464 20.1376 42.1488 19.5948 43.2636 17.9803C45.1618 15.2318 44.8378 10.8531 40.6711 7.22012C36.5045 3.5871 40.4395 0 40.4395 0C40.4395 0 39.5597 3.07449 43.3561 4.70473C53.3432 8.99274 54.4483 24.55 41.2361 27.7344C40.4158 25.3422 38.9526 23.433 38.9526 23.433C39.9006 26.9898 39.9895 29.9754 37.7817 33.1051L37.5882 33.3794L36.7737 31.3813C35.4093 34.024 37.0741 34.2146 37.8782 37.2298C36.3485 37.8982 35.5496 38.4375 34.2355 39.504L32.5071 38.8095L32.6625 38.4311L34.1263 36.8927L32.1813 37.2699C31.4546 37.4106 30.7949 39.9719 30.3727 41L28.8673 40.789L29.2139 38.6793L28.0851 38.4945L27.727 40.6792L26.0737 40.5943V38.2574H25.5001ZM25.5001 30.8239H24.9236C24.6978 31.1331 23.8157 32.3566 23.3513 33.2266C22.7632 34.3274 23.7591 35.3532 24.677 35.2608L25.5007 34.1448L26.3245 35.2608C27.2424 35.3537 28.2376 34.3274 27.6502 33.2266C27.1857 32.3566 26.3037 31.1331 26.0778 30.8239H25.5001ZM34.7947 28.4481C34.3678 27.8105 33.8121 27.2677 33.3898 27.1212C32.7087 26.8852 29.5668 27.0677 29.36 27.3606C29.2797 27.6559 28.9176 29.0583 28.9314 30.2352C28.9436 31.3441 28.9771 31.9305 28.988 32.0973C29.1902 32.3938 30.561 34.3431 31.8197 34.6493C33.0207 34.9417 33.8259 34.3651 33.9801 34.2413C34.1396 33.8874 35.3538 31.1512 35.422 30.1486C35.4538 29.6656 35.1799 29.0234 34.7947 28.4481ZM16.2056 28.4481C16.6331 27.8105 17.1882 27.2677 17.6105 27.1212C18.2915 26.8852 21.4334 27.0677 21.6402 27.3606C21.7205 27.6559 22.0827 29.0583 22.0694 30.2352C22.0567 31.3441 22.0232 31.9305 22.0128 32.0973C21.8106 32.3938 20.4393 34.3431 19.1806 34.6493C17.9796 34.9417 17.1749 34.3651 17.0201 34.2413C16.8613 33.8874 15.6464 31.1512 15.5783 30.1486C15.5459 29.6656 15.8203 29.0234 16.2056 28.4481Z" fill="#E53935"></path>
</svg>

  • SVG Width: Set to 250px.

  • Heading: Remove the Heading.

  • First Block - #1:

    • Description: T: 555-555-1000 .

    • Preset icon name: Leave empty.

  • Second Block - #2:

    • Preset icon name: Leave empty.

    • Description: Add the content:

      Open daily from 08:00 to 19:00
Address: 123 Madison Avenue, Suite 456
New York, NY 10010, USA

  • Blocks #3-#5: Make all fields empty.

  • Button: Leave the Button field empty.

Configure Menu Sections

Open each of the two Menu sections and assign a menu that you have created in your Shopify admin.

  • Shopify Administration Steps: Go to Content → Menus in your Shopify admin panel to create or manage your menus.

The footer menu section only displays first-level items.

Configure the Second "Media with text" Section

Open the second "Media with text" section (the last item in the sequence).

  • Image: Add your own image.

  • Text: Change the texts as needed.

  • First Item - #1:

    • Description: Wokiee is one of the most powerful and flexible themes for creating a modern online store on the Shopify platform.

Configure the Button Section

Scroll to the bottom and manage the Button settings:

  • Show background: Enable

  • Background Color: #E53935

  • Background Hover Color: #ffffff

  • Text Hover Color: #373E48

  • Enable shadow: Disable

PreviousExample 1NextCopyright

Last updated