TEXT DECORATION STLYING

This tutorial on enhancing Shopify store titles and descriptions with text decoration techniques. It covers how to use HTML and CSS to style text, making it more visually appealing to customers.

How-To:

  1. Access Shopify Admin:

    • Go to your Shopify admin panel.

  2. Navigate to Online Store:

    • Select "Themes" and then "Customize."

  3. Edit Code:

    • Go to "Actions" > "Edit code."

  4. go into your general css and add 

/*
    Decorated titles
*/

.title-decorated span {
    font-family: var(--bs-headings-font-family-textured);
    color: var(--bs-primary);
    font-style: italic;
}

.title-decorated em {
    font-family: var(--bs-headings-font-family-textured);
    color: var(--bs-secondary);
    font-style: normal;
}

.title-decorated-underline span {
    font-family: var(--bs-headings-font-family-textured);
    font-style: italic;
    text-decoration: underline;
    text-decoration-thickness: 8px; 
}

  1. make sure to add the class to titles and the section.header of the file

  2. make sure to change the type to html in your settings schema 

 {
                    "type": "html",
                    "id": "title",
                    "label": "Title",
                    "default": "Image With Text"
                },

Make sure to add the right class to apply. for example if you want the underline styling, add title-decorated-underline to the existing class

class="title title-decorated-underline mb-4

then in the theme editor, wrtie span for that area you want to see the styling to appear

Additional Tips:

  • Experiment with different text decoration styles (e.g., underline, overline, line-through).

  • Use appropriate colors to match your store's theme.

  • Ensure readability and accessibility when styling text.

For more detailed instructions, watch the full tutorial on YouTube: Revamp Your Shopify Titles And Descriptions.

Last updated