Free carbon-neutral shipping for orders $75.00 USD+

Jenn Test Article for New Theme

We have a new blog design! This article is designed to show you how we load content into Shopify so that it appears how we want it to appear! There are special instructions for how to upload desktop- and mobile-specific images.

Read below to learn everything you need to know.

How do we style the blog posts?

It's pretty simple! Here are high level instructions.

  • Main headings use <h2> tags
  • Secondary heading use <h3> tags
  • Any paragraph text should be in <p> tags
  • Banner images (which appear right under the byline) in desktop and mobile version must be uploaded via Settings > Files and then inserted using Metafields Guru. These are different from "In-text images" (next bullet point) in that the desktop version stretches across the whole screen while in-text desktop images do not
  • In-text images should be in <p> tags. (See the next question for info on how to make them appear on mobile or desktop and how to change the width on desktop!

Can I see an example of an in-text image that is shown on all device sizes?

Above is a picture that is uploaded at 1200 x 1200. I uploaded it via Shopify's RTE.

  • Size: Product image (480px)
  • Alignment: Center (strangely this didn't make it centered in desktop...later I had to go into the HTML and set the <p> tag as <p style="text-align: center;">
  • Alt text: not set here but you should always set one!

On mobile, it shows as full-width. On desktop, it shows as partial width (relative to the text container).

What if I want to show different aspect ratios of in-text images for mobile and desktop?

Here is an example of a mobile-specific image (square). You will only see it on mobile:

What is Gold Vermeil? Flower Ring

Steps for mobile-specific image:

  • Upload the image via Shopify's RTE (rich text editor)
  • Set the size as "Original size" and set the Alt text
    • I believe the theme is coded such that all mobile-specific images are full width on mobile
  • In HTML code, enclose the image in a <p class="large--hide"> tag. This hides it from desktop.

Here are 2 examples of desktop-specific images (landscape). You will only see them on desktop:

Flexible width desktop image:

What is Gold Vermeil? Flower Ring

Steps for flexible width desktop-specific image:

  • Upload the image via Shopify's RTE (rich text editor)
  • Set the size (various options available), set the alignment (center) and set the Alt text.
    • The max width for "flexible width" is the full width of the text container
    • The image I uploaded image is 1920px wide. However, I set the image size as "Banner size (600px)" so it's not the full width of the container. We can choose what works best depending on the image
  • In HTML code, enclose the image in a <p class="small--hide medium--hide"> tag. This hides the image from mobile
  • Note: if you edit the image settings in the RTE (e.g. set the alignment to be centered) after you add the <p> tag, it may replace your <p> tag with a <div> tag and delete the instruction to hide from mobile. In this case, replace the "div" with "p" and put "class="small--hide medium--hide" back into the tag. Ask Jenn if you have questions about this; it's a bit difficult to explain concisely here if you don't know so much CSS.

"Outside container" desktop image:

What is Gold Vermeil? Gemstone Ring

Unlike the "Flexible width" desktop image above, this one stretches slightly beyond the text container on desktop. 

To do this, you follow the same steps above, but add "image--full" as a class, i.e.  <p class="small--hide medium--hide image--full">

FYI This is what our H2 looks like without bolding

For readability, I think it's better to bold the H2s.

Question 4: Should I buy from you?

Yes, you absolutely should! 

Close

Your Cart

Your cart is empty.

Continue browsing here
English