Adding contact block to description of collections

Store Design

Topic summary

A user seeks help adding contact information (specifically a phone number) to their collection page description using the Empire theme. They want to split the description layout with contact options displayed on the right side.

Solution Provided:

  • Another user shares custom code snippets to achieve the desired structure
  • Instructions include: navigating to theme code editor, searching for ‘theme.liquid’, and pasting code below the ‘’ tag
  • Screenshots are provided to guide implementation

Follow-up Request:

  • The original poster confirms the solution works but requests the script run only on desktop devices (not mobile)
  • They note already having a sticky banner with contact information on mobile

Status: The responder indicates they can provide a desktop-only version of the code, mentioning it as a special accommodation for premium support customers. The discussion appears ongoing with the final code adjustment pending.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would love some help regarding our collections pages. We use the Empire theme and looking for ways to add the contact options to our description.

This is the way I would like to split the description and add the contact options with a phone number on the right like this below.

Schermafbeelding 2024-04-19 131333.png
Schermafbeelding 2024-04-19 131333.png1845×408 67.2 KB

This is how my collection page is now designed. This is the URL https://mijn-wijnkoelkast.nl/collections/wijnkoelkasten

Schermafbeelding 2024-04-19 131658.png
Schermafbeelding 2024-04-19 131658.png1897×510 36.8 KB

Could anyone help me?

Thanks in advance!

Siem

2

Hi!

The desired structure should be implemented within the software itself. However, locating the necessary elements through Shopify can sometimes prove challenging. External implementation requires significant effort. Nonetheless, I believe the following code snippets can achieve the desired structure. Feel free to modify the image link as needed.

If you encounter any issues again, feel free to write, I’ll help.

  1. Navigate to the ‘Edit Code’ option in your theme settings, then search for ‘theme.liquid’ in the search bar.

  2. Paste the following code below the ‘’ tag. Please refer to the attached screenshot for guidance.

shopify.head.jpg
shopify.head.jpg1366×545 61.8 KB

TerenceKEANE_0-1713529978258.png
TerenceKEANE_0-1713529978258.png1561×705 176 KB
3

Hi Terence,

Works like a charm, thanks. Could you only help to make sure the script only runs on desktop? On mobile we already have a sticky banner with our number applied. Hope you can help us, thanks in advance!

All the best,

Siem

4

You’re most welcome!

My code always works. I never send it out without thorough testing. I only provide such detailed code to our esteemed ‘Premium Support’ customers. But consider this a special gift for you. Please delete the code I sent earlier and replace it with the one below.