How can I modify my theme to do what I want it to?

Highlighted
New Member
1 0 0

So, I'm having some trouble designing my store.  I'm building a store in the survival/prepping/camping niche.

 

Here's the site as it is now:

 

https://www.plannedsurvival.com

 

It's obviously a work in progress and I haven't even modified the product descriptions or set all the prices correctly.  I'm mostly working on getting the theme and overall design the way I want it.

 

I'm using the Woodmart theme I purchased from ThemeForest.  I like it but I'd like to modify a number of things that I can't seem to through the Shopify interface.

 

I really don't know the first thing about html or coding.  I can do it if I have really clear instructions but I'm a real novice at it.


Theoretically, I should be able to modify the code to make the changes I'd like, but I can't seem to find a good guide on how to do it.

 

For example, I'd like to place an image with Trust Badges right next to the "Add to Cart" button on the product pages.  Also, I'd like to make the "Add to Cart" button a little larger if I could.

 

On the main page, I'd like to add spacers, not spaces but horizontal lines consistent with my theme between sections.

 

I can't for the life of me figure out how to do any of this.

 

If I could only find a good tutorial that will tell me what to do when I want to add an image to a particular part of a particular page.  If I could have it spelled out to me clearly, it would help me a lot.


I've been spending a lot of time stuck because I can't figure out how to make design changes I'd like to on my website.

 

Could anyone please help me out?

 

Thanks.

0 Likes

Hello ,
Add this code at the bottom of theme -> edit code -> assets -> theme.scss.css
Note:- Add Trust badge image at your media and replace the image url code with my given url code.

.single_add_to_cart_button.button::after {
	content: "";
	display: block;
	width: 75px;
	height: 75px;
	right: -75px;
	background-size: 100%;
	top: 0;
	left: auto;
	background-image: url(https://apps.shopifycdn.com/listing_images/b995b0dcd76159f99a9a6a601f75a5b5/icon/5ed424a559e28513a3bfda01f52b9ba2.png);
	opacity: 1;
}
.single_add_to_cart_button.button {
	font-size: 22px;
	width: 250px;
}

After Add this code your site looks like this.

 

trust.jpg

Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
0 Likes

Hi @Jacob_Rodefeld,

 

My name is Charles from Shogun Page Builder, and I believe that our application can help you achieve the modifications to your theme that you would like to make.

 

If you build a completely custom product page you can set this up to include a trust badge using an image.  You can also use our separator element to add spacing between sections.  We also have an image element that should allow you to add any image to any page, no coding required.

 

Please feel free to reach out if you have any questions. :)

Charles Wecker | Technical Support, Shogun |
support@getshogun.com | Try Shogun Page Builder for Shopify for FREE!
0 Likes