Snippets

Change header link color

To customize the color of a link in your header, ensure you're using the latest version of Etheryx. Follow these steps carefully:

Steps to change the link color

1. From your Shopify admin, go to Online Store → Themes.

2. Click Customize

3. Open Theme settings, and scroll to the Custom code section.

4. Add the following CSS to the CSS area:

   #mainHeader [data-name="Sale"] { color: red }

   • Replace Sale with the exact text of the link as it appears in the header.
   • ⚠️ Match visible text exactly, including spaces and special characters.

5. Replace red with your desired color. Use:

   • Standard color names (e.g., red, green, blue).
   • HEX codes (e.g., #FFFFFF for white).

6. Click Save

IMPORTANT

• Include spaces and special characters: Ensure text matches exactly, such as Sales & Distribution.
• Avoid special characters in URLs: Do not use quotes (") or unusual characters in your URLs.
• If the code doesn’t work: Verify that the text in the link uses standard letters without unsupported characters.

Examples based on common link texts

Link text = Sales & Distribution

#mainHeader [data-name="Sales & Distribution"] { color: green }

Link text = Final saLe

#mainHeader [data-name="Final saLe"] { color: red }

Link text = SALE

#mainHeader [data-name="SALE"] { color: blue }

Add inputs to the contact form

The contact form supports custom HTML input types for collecting additional information:

• Supports all standard HTML input types

• Each field requires a specific naming format: name="contact[information_id]"

• The information_id should briefly identify the collected information

• These identifiers appear in contact notifications

• Each identifier must be unique within the form

This feature allows you to collect specialized information from customers beyond the standard name, email, and message fields.

---

1. From Shopify admin, go to Online Store → Themes

2. Click Actions → Edit Code

3. Search for p-contact.liqud and open the file.

4. Inside the file search for:

   {%- when '@app' -%}
       <p class="itsapp" {{ block.shopify_attributes }}>{% render block %}</p>

5. Right after it, paste your desired code. Here's a quick example:

   {%- when 'request-type' -%}
   <p class="request-type">
   	<label for="request-type">...</label>
   	<select id="request-type" name="contact[request_type]">
   		<option>OpenThinking</option>
   	</select>
   </p>

6. Inside the file search for: { "type": "@app" },

7. Right after it, paste the following code

   { 
   	"type": "fname",
   	"name": "Name", 
   },

   • replace "fname" with your input name.
   • replace "Name" with you input name.

8. Click Save

{%- when 'request-type' -%}
<div class="request-type">
	<label for="request-type">What is this regarding?</label>
	<select id="request-type" name="contact[request_type]">
		<option>Returns</option>
		<option>Shipping</option>
		<option>Custom order</option>
		<option>Other</option>
	</select>
</div>

Re-order inputs

If you, now, want to re-order your newly created input.

1. From Shopify admin, go to Online Store → Themes
2. Click Customize
3. From top dropdown, select Pages → Contact
4. In the left panel, go to Contact page
5. Here, drag and drop the block to the desired order.
6. Click Save