INSTRUCTION FOR ALL DESIGNERS PAGE

First, you need to access the Shopify code editor inside the ALL DESIGNERS page, which appears as '</>'.
From there, select the entire code by pressing Ctrl + A, then copy it with Ctrl + C.

Next, head over to an online code editor for simplicity. I suggest using onecompiler.com/html. Once there, paste the code you copied into the editor.



How to Structure the Code:

  1. Adding Images with Links to the Table:

    • Locate the <table> tag within the <div> with the style attribute text-align: center;.
    • Inside the <tbody> tag, you'll find multiple <tr> tags, each representing a row in the table.
    • Inside each <tr> tag, you'll find multiple <td> tags, each representing a cell in the row.
    • To add an image with a link to a cell:
      • Use the <a> tag to create a hyperlink.
      • Set the href attribute of the <a> tag to the URL you want the image to link to.
      • Inside the <a> tag, use the <img> tag to insert the image.
      • Set the src attribute of the <img> tag to the URL of the image file.

  2. Adding Another Row to the Table:

    • To add another row to the table:
      • Copy one of the existing <tr> tags along with its content (i.e., <td> tags representing cells).
      • Paste the copied <tr> tag immediately after the last <tr> tag in the table.
      • Adjust the content of the <td> tags within the new <tr> tag to add new images with links.
    • Ensure that each row contains exactly three <td> tags, each representing a cell containing an image with a link.

Example:

Note:

  • Replace https://example.com/... with the actual URLs of the images and the collection pages.
  • Customize the href and src attributes according to your requirements.
  • Remember to maintain the overall structure of the HTML code to ensure proper rendering.

 

To get a source link for an image from your Shopify admin:

  1. Navigate to Content > Files.
  2. Click on "Upload files."
  3. Once the file is uploaded, click on the image link on the right side to get the source link.

Make sure to maintain the measurements of 400x225 pixels for each logo image to ensure proper rendering.