Dynamic HTML Code

Solved
Tourist
12 0 2

Hi everyone, 

 

I'm trying to fix some issue with my site's code,

is there anyway to present the code in full (just like it shows when you choose show page source)

kindly find the attached screenshot for your reference. 

 

Thanking you in advance, 

 

Edmond.Screen Shot 2019-07-30 at 12.46.51.png

0 Likes
Shopify Expert
63 9 9

hi @ColorDiamondNet 

We find a solution for you.

Its help you to development.

Some following step you need to do 

  • Add {% raw %} liquid and html code  {% endraw%} 
  • Then Capture whole the "raw" code .
  • Then assign capture code with "escape"
  • Then print assign variable .

Please see the below screenshot for better understand . 

 

escape.png 

Here the output will show you in text format.

0 Likes
Astronaut
835 95 178

I'm not sure if what @Silverclouding posted is what you're looking for, but you can right click and "inspect" on any webpage to view it's HTML and you can make edits to it on the fly to see how css changes will effect your code before you put them in your stylesheet.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
12 0 2

Hello @

my question is how do I implement those necessary changes in my theme liquid product liquid etc.

if I can't view the entire code?

 

Thanking you in advance, 

 

Edmond.

 

0 Likes
Tourist
12 0 2

Hello @Silverclouding 

 

thank you so much for your prompt response.

1 Like

Success.

Astronaut
835 95 178

You just have to track the problem areas down. If it's on your product page, you want to edit product.liquid. If it's a collection page, collection.liquid, if it's the home page, index.liquid -- but your search may not end there.

 

You open product.liquid or collection.liquid and you see this: 

 

{% include 'product-template' %}
//or
{% section 'product-template' %}

{% include 'collection-template' %}
//or
{% section 'collection-template' %}

If it's an include, it's referencing a snippet file called "product-template.liquid" -- same for section, but it's referencing a section file, and you may have to continue your search in there. 

 

For index.liquid, if you use your customize editor to create your homepage you'll see:

 

{{ content_for_index }}

This renders all your dynamic sections. So if you're setting an image inside a dynamic section and there's no option for alt text, the only way to edit that code is to go into the section itself, and make a new schema setting for you to add alt text into, and reflect it in the section code. For example:

 

<div class="container">
  <div class="desktop-image">
  <img src="{{ section.settings.desktop_image | img_url: "300x" }}" alt="{{ section.settings.desktop_alt }}">
  </div>
</div>

{% schema %}
  {
    "name": "Image Section",
    "settings": [
{
"id": "desktop_image",
"type": "image_picker",
"label": "Desktop Image"
},
{
"id": "desktop_alt",
"type": "text",
"label": "Desktop Alt Text"
}
],
    "presets": [
      {
        "category": "Image",
        "name": "Image Section",
        "settings": {
      }
  }
]
}
{% endschema %}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
12 0 2

Once again, thank you so much for your help.

0 Likes