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 Edit theme

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 ••• → 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 Edit theme
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

Custom inputs in Product page

You can add custom fields to your product page to collect information from customers—perfect for things like engraving details or personal messages. These values are passed to the cart as line item properties.

{%- assign product_form_id = 'product-form-' | append: section.id -%}
<label for="cf-{{section.id}}">
<span>**Engraving**</span>
</label>
<input id="cf-{{section.id}}" form="{{ product_form_id }}" type="text" class="fullwidth"
name="properties[**Engraving**]">

You can use the same method to add any HTML input type.

---

Add inputs using Custom Liquid block

1. From your Shopify admin, go to Online Store → Themes
2. Find your current theme and click Edit theme
3. In the theme editor, navigate to the Product page template
4. In the left sidebar, click Add block under the Product page section.
5. Select Custom Liquid
6. Paste one of the code examples above into the textarea.

   NOTE

   Replace any placeholder text like **Engraving**, **Position**, or **It's a gift** with your own labels and property names. Be sure to remove the ** ** formatting.

7. Repeat steps 4 - 6 for each additional field you want to add.

   IMPORTANT

   Use a separate Custom Liquid block for each field you add!

8. Click Save

Prevent Cart pop-up from opening

To prevent cart pop-up from opening when adding a product to cart, you can use the following code to prevent it from showing up.

1. From your Shopify admin, go to Online Store → Themes.
2. Click Edit theme
3. Open Theme settings, and scroll to the Custom code section.
4. Add the following code to the JS text area

   document.addEventListener("liquid-ajax-cart:request-end", (event) => { event.stopImmediatePropagation(); }, true);

5. Click Save