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:
-
Adding Images with Links to the Table:
- Locate the
<table>
tag within the<div>
with the style attributetext-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.
- Use the
- Locate the
-
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.
- Copy one of the existing
- Ensure that each row contains exactly three
<td>
tags, each representing a cell containing an image with a link.
- To add another row to the table:
Example:
Note:
- Replace
https://example.com/...
with the actual URLs of the images and the collection pages. - Customize the
href
andsrc
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:
- Navigate to Content > Files.
- Click on "Upload files."
- 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.