How to apply a class to your templates in Shopify

Every image on each page being opened in a lightbox is not a thing that is within your expectation? Particularly, photos which are hyperlinks, should be skipped but you still want your users to be capable of clicking on those photos to be directed to another web page. On top of that, in case the original uploaded images have the same size as the image, which is displayed on the page, you may want to leave that image alone and not let it opened in a lightbox. In fact, there are 2 ways for you to implement the customization: to apply a class to your templates or to add your jQuery.

However, please keep reading our instructional writing on How to apply a class to your templates to know more deeply about the first method mentioned above.

How to apply a class to your templates

To start, you need to customize your page.liquid, article.liquid, and blog.liquid templates. In every template, please locate the div element that contains your blog or post content. Then add class="rte"( the “rte” is for Rich Text Editor) to open the <div> tag. To go more into details, please follow these steps listed below.

Apply a class to your templates on Desktop

  • Step 1: Go to Online Store > Themes from your Shopify Admin panel.

  • Step 2: Choose the theme you want to edit and click Actions > Edit code.

  • Step 3: Under the Templates folder, tap page.liquid, article.liquid, and blog.liquid to let them opened in the online code editor:

- page.liquid is employed for all specialized page content. - article.liquid is employed for every individual blog post page. - blog.liquid is employed for the blog landing page.

  • Step 4: Locate the div element which wraps your content, and insert rte to its class attribute. In case the class attribute does not exist, please add it

- In blog.liquid and article.liquid:


  <div class="rte">
    {{ article.content }}
  </div>

- In page.liquid:


  <div class="rte">
    {{ page.content }}
  </div>

  • Step 5: Tap Save to save all of your changes to every template file.

Apply a class to your templates on iPhone/Android (Click here)

  • Step 1: From the Shopify App, choose Store.

  • Step 2: Tap Online store in the Sales channels section.

  • Step 3: Choose Manage themes.

  • Step 4: Choose the theme you want to edit and click Actions > Edit code.

  • Step 5: Under the Templates folder, tap page.liquid, article.liquid, and blog.liquid to let them opened in the online code editor:

- page.liquid is employed for all specialized page content.
- article.liquid is employed for every individual blog post page.
- blog.liquid is employed for the blog landing page.

  • Step 6: Locate the div element which wraps your content, and insert rte to its class attribute. In case the class attribute does not exist, please add it

- In blog.liquid and article.liquid:

  <div class="rte">
    
  </div>

- In page.liquid:

  <div class="rte">
    Every [image](https://avada.io/shopify/docs/how-add-background-image-color-main-content-area-shopify.html) on each page being opened in a lightbox is not a thing that is within your expectation? Particularly, photos which are hyperlinks, should be skipped but you still want your users to be capable of clicking on those photos to be directed to another web page. On top of that, in case the original uploaded images have the same size as [the image](https://avada.io/shopify/docs/how-upload-image-file-online-store-content-shopify.html), which is displayed on the page, you may want to leave that image alone and not let it opened in a lightbox. In fact, there are 2 ways for you to implement the customization: to apply a class to your templates or to add your jQuery.

However, please keep reading our instructional writing on **How to apply a class to your templates** to know more deeply about the first method mentioned above. 

**How to apply a class to your templates**

- [Apply a class to your templates on Desktop](#on-desktop)
- [Apply a class to your templates on iPhone/Android](#on-iphone-android)

To start, you need to customize your `page.liquid`, `article.liquid`, and `blog.liquid` templates. In every template, please locate the `div` element that contains your [blog or post content](https://avada.io/shopify/docs/how-add-post-blog-shopify.html). Then add `class="rte"`( the "rte" is for Rich Text Editor) to open the `
` tag. To go more into details, please follow these steps listed below. ### Apply a class to your templates on Desktop {#on-desktop} - **_Step 1:_** Go to **Online Store > Themes** from your Shopify Admin panel. - **_Step 2:_** Choose [the theme](https://avada.io/shopify/docs/how-add-free-theme-from-admin-shopify.html) you want to edit and click **Actions > Edit code.** - **_Step 3:_** Under the **Templates** folder, tap `page.liquid`, `article.liquid`, and `blog.liquid` to let them opened in the online code editor: **-** `page.liquid` is employed for all specialized page content. **-** `article.liquid` is employed for every individual blog post page. **-** `blog.liquid` is employed for the blog landing page. - **_Step 4:_** Locate the `div` element which wraps your [content](https://avada.io/shopify/docs/how-link-file-page-content-shopify.html), and insert `rte` to its `class` attribute. In case the `class` attribute does not exist, please add it **-** In `blog.liquid` and `article.liquid`: ``` {% raw %}
{{ article.content }}
{% endraw %} ``` **-** In `page.liquid`: ``` {% raw %}
{{ page.content }}
{% endraw %} ``` - **_Step 5:_** Tap **Save** to save all of your changes to every template file.

Apply a class to your templates on iPhone/Android (Click here)

  • Step 1: From the Shopify App, choose Store.

  • Step 2: Tap Online store in the Sales channels section.

  • Step 3: Choose Manage themes.

  • Step 4: Choose the theme you want to edit and click Actions > Edit code.

  • Step 5: Under the Templates folder, tap page.liquid, article.liquid, and blog.liquid to let them opened in the online code editor:

- page.liquid is employed for all specialized page content.
- article.liquid is employed for every individual blog post page.
- blog.liquid is employed for the blog landing page.

  • Step 6: Locate the div element which wraps your content, and insert rte to its class attribute. In case the class attribute does not exist, please add it

- In blog.liquid and article.liquid:

  <div class="rte">
    {{ article.content }}
  </div>

- In page.liquid:

  <div class="rte">
    {{ page.content }}
  </div>
  • Step 7: Tap Save to save all of your changes to every template file.
## Conclusion Thank you for reading, please follow all those steps listed above to get your e-commerce business fully prepared! </div> </code></pre>
  • Step 7: Tap Save to save all of your changes to every template file.
</details> ## Conclusion Thank you for reading, please follow all those steps listed above to get your e-commerce business fully prepared!