Home > Shopify Development > Apply a class to your templates

How to apply a class to your templates in Shopify

Sam Updated: March 20, 2024

Drive 20-40% of your revenue with Avada

Get Started

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.

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.

How to apply a class to your templates in shopify

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.

How to apply a class to your templates in shopify

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.

Conclusion

Thank you for reading, hope this guide will help you know more about how to apply a class to your templates in Shopify, please follow all those steps listed above to get your e-commerce business fully prepared!

Catalog

How to modify the shipping calculator HTML How to add the gift-wrapping snippet in your cart template How to modify your theme.liquid file How to insert some JavaScript to your theme Delete the author's name in your theme Generate a currencies snippet Insert the search box on your Jekyll site using lunr.js How to hide sold out variants for nonsectioned themes Liquid Variables: assign, capture, increment, increment Liquid paginate: Split into multiple pages Update the product form to support dynamic checkout buttons Select which page to show when customers log in to your online store Modify the code for your payment icons Insert the security badge code to your theme Insert Disqus to your blog Insert breadcrumb navigation to your store Get consent for promotional emails during customer registration Generate your snippet generate the How did you hear about us form field Generate and include an age-check snippet Generate a back-to-the-top snippet Edit correct quantities on the cart page silently Apply a class to your templates Update item quantity fields in the cart Update the collection-template.liquid file Modify the theme code to add the shipping calculator Insert the notification form code to your theme Insert custom fields to your theme's customer registration form Add Custom Fields to Contact Form in Shopify Insert a form field to your theme code

Sam Nguyen

Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.